feat: improve easing functions

docs/en/Tween.md

@@ -40,10 +40,18 @@ You can use one of the built-in easing functions simply specifying its name as a
 - `quadratic` — accelerates fast, then slows quickly towards end.
 - `cubic` — overshoots over 1 and then returns to 1 towards end.
 - `elastic` — overshoots over 1 multiple times - wiggles around 1.
-- `circ` — Commonly known as `outCirc`. Moves very fast at the beginning and
+- `inSine` — accelerating from zero velocity.
+- `outSine` — decelerating to zero velocity.
+- `inOutSine` — accelerating until halfway, then decelerating.
+- `inExpo` — exponential accelerating from zero velocity.
+- `outExpo` — exponential decelerating to zero velocity.
+- `inOutExpo` — exponential accelerating until halfway, then decelerating.
+- `inCirc` — circular accelerating from zero velocity.
+- `outCirc` — circular decelerating to zero velocity Moves very fast at the beginning and
 then quickly slows down in the middle. This tween can actually be used
 in continuous transitions where target value changes all the time,
 because of the very quick start, it hides the jitter between target value changes.
+- `inOutCirc` — circular acceleration until halfway, then deceleration.
 - `inQuad` — accelerating from zero velocity
 - `outQuad` — decelerating to zero velocity.
 - `inOutQuad` — acceleration until halfway, then deceleration.

src/Tween/__story__/story.tsx

@@ -78,9 +78,129 @@ storiesOf('Animation/Tween', module)
       }</Tween>
     </div>
   )
-  .add('Entry - circ', () =>
+  .add('Entry - outCirc', () =>
     <div>
-      <Tween ms={1000} easing='circ'>{({value}) =>
+      <Tween ms={1000} easing='outCirc'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - inCirc', () =>
+    <div>
+      <Tween ms={1000} easing='inCirc'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - inOutCirc', () =>
+    <div>
+      <Tween ms={1000} easing='inOutCirc'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - inExpo', () =>
+    <div>
+      <Tween ms={1000} easing='inExpo'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - outExpo', () =>
+    <div>
+      <Tween ms={1000} easing='outExpo'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - inOutExpo', () =>
+    <div>
+      <Tween ms={1000} easing='inOutExpo'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - inSine', () =>
+    <div>
+      <Tween ms={1000} easing='inSine'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - outSine', () =>
+    <div>
+      <Tween ms={1000} easing='outSine'>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('Entry - inOutSine', () =>
+    <div>
+      <Tween ms={1000} easing='inOutSine'>{({value}) =>
         <div style={{
           width: 100,
           height: 100,

src/Tween/easing.ts

@@ -5,7 +5,6 @@ export interface IEasingMap {
   quadratic: TEasing;
   cubic: TEasing;
   elastic: TEasing;
-  circ: TEasing;
   inQuad: TEasing;
   outQuad: TEasing;
   inOutQuad: TEasing;
@@ -18,6 +17,15 @@ export interface IEasingMap {
   inQuint: TEasing;
   outQuint: TEasing;
   inOutQuint: TEasing;
+  inSine: TEasing;
+  outSine: TEasing;
+  inOutSine: TEasing;
+  inExpo: TEasing;
+  outExpo: TEasing;
+  inOutExpo: TEasing;
+  inCirc: TEasing;
+  outCirc: TEasing;
+  inOutCirc: TEasing;
 }
 
 export const easing: IEasingMap = {
@@ -33,12 +41,6 @@ export const easing: IEasingMap = {
   // Overshoots over 1 multiple times - wiggles around 1.
   elastic: (t) => t * (33 * t * t * t * t - 106 * t * t * t + 126 * t * t - 67 * t + 15),
 
-  // Commonly known as 'easeOutCirc'. Moves VERY fast at the beginning and
-  // then quickly slows down in the middle. This tween can actually be used
-  // in continuous transitions where target value changes all the time,
-  // because of the very quick start, it hides the jitter between target value changes.
-  circ: (t) => Math.sqrt(1 - (t = t - 1) * t),
-
   // Accelerating from zero velocity
   inQuad: (t) => t * t,
 
@@ -74,4 +76,44 @@ export const easing: IEasingMap = {
 
   // Acceleration until halfway, then deceleration
   inOutQuint: (t) => t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t,
+
+  // Accelerating from zero velocity
+  inSine: (t) => -Math.cos(t * (Math.PI / 2)) + 1,
+
+  // Decelerating to zero velocity
+  outSine: (t) => Math.sin(t * (Math.PI / 2)),
+
+  // Accelerating until halfway, then decelerating
+  inOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+
+  // Exponential accelerating from zero velocity
+  inExpo: (t) => Math.pow(2, 10 * (t - 1)),
+
+  // Exponential decelerating to zero velocity
+  outExpo: (t) => -Math.pow(2, -10 * t) + 1,
+
+  // Exponential accelerating until halfway, then decelerating
+  inOutExpo: (t) => {
+    t /= .5;
+    if (t < 1) return Math.pow(2, 10 * (t - 1)) / 2;
+    t--;
+    return (-Math.pow( 2, -10 * t) + 2) / 2;
+  },
+
+  // Circular accelerating from zero velocity
+  inCirc: (t) => -Math.sqrt(1 - t * t) + 1,
+
+  // Circular decelerating to zero velocity Moves VERY fast at the beginning and
+  // then quickly slows down in the middle. This tween can actually be used
+  // in continuous transitions where target value changes all the time,
+  // because of the very quick start, it hides the jitter between target value changes.
+  outCirc: (t) => Math.sqrt(1 - (t = t - 1) * t),
+
+  // Circular acceleration until halfway, then deceleration
+  inOutCirc: (t) => {
+    t /= .5;
+    if (t < 1) return -(Math.sqrt(1 - t * t) - 1) / 2;
+    t -= 2;
+    return (Math.sqrt(1 - t * t) + 1) / 2;
+  }
 };