Skip to content

Latest commit

 

History

History
192 lines (178 loc) · 3.96 KB

Easing.md

File metadata and controls

192 lines (178 loc) · 3.96 KB
Raw

Easing

Description

This component provides functions for controlling the velocity of an animation known as it's "easing". An easing is a function which takes a delta value between 0 and 1 and returns a value between 0 and 1 (typically). You can use easing functions for smooth transitions from one state to another, versus an often harsh linear interpolation.

Dependencies

  • None

Sub-Components

  • None

Terms

  • Easing: Single argument function which takes a delta (x) and returns a new delta (y).
  • Easing Type: Single argument factory which takes an easing function and generates a new easing function.
  • Easing Scale: Double argument factory which takes a scalar value and easing function and generates a new easing function

Design

Easing

  • ( x: number ): number

EasingType

  • ( easing: Easing ): Easing

Ease

  • defaultEasing: Easing
  • defaultEasingType: EasingType
  • parse( easing: string ): Easing
    • Accepts the following formats:
      • easing
      • easingType
      • easing-easingType
      • easing*scale
      • easingType*scale
      • easing-easingType*scale

Easings

  • scale( scale: number, easing: Easing ): Easing
return ((easing( x ) - x) * scale) + x
  • linear: Easing
return x
  • quad: Easing
return x * x
  • ease: Easing
i = (1.0 - x)
i2 = i * i
x2 = x * x
eq1 = (0.3 * i2 * x) + (3.0 * i * x2) + (x2 * x)
eq2 = 1.0 - i2 * i2
return eq1 * i + eq2 * x;
  • cubic: Easing
return x * x * x
  • quartic: Easing
x2 = x * x
return x2 * x2
  • quintic: Easing
x2 = x * x
return x2 * x2 * x
  • back: Easing
x2 = x * x
x3 = x2 * x
return x3 + x2 - x
  • sine: Easing
return sin(x * 1.57079632679)
  • overshot: Easing
return (1.0 - x * (7.0 / 10)) * x * (10.0 / 3.0)
  • elastic: Easing
x2 = x * x
x3 = x2 * x
scale = x2 * ((2.0 * x3) + x2 - (4.0 * x) + 2.0)
wave = -sin(x * 10.9955742876)
return scale * wave
  • revisit: Easing
return abs(x - sin(x * 3.14159265359))
  • lasso: Easing
return (1.0 - cos(x * x * x * 36.0) * (1.0 - x))
  • slowbounce: Easing
x2 = x * x
return (1.0 - abs((1.0 - x2) * cos(x2 * x * 14.8044066016)))
  • bounce: Easing
return (1.0 - abs((1.0 - x) * cos(x * x * 14.8044066016)))
  • smallbounce: Easing
inv = 1.0 - x
return (1.0 - abs(inv * inv * cos(x * x * 14.8044066016)))
  • tinybounce: Easing
inv = 1.0 - x
return (1.0 - abs(inv * inv * cos(x * x * 7.0)))
  • hesitant: Easing
return (cos(x * x * 12.0) * x * (1.0 - x) + x)
  • sqrt: Easing
return sqrt(x);
  • sqrtf: Easing
i = (1.0 - x)
i2 = i * i
return ((1.0 - i2 * i2) + x) * 0.5
  • log10: Easing
return (log10(x + 0.01) + 2.0) * 0.5 / 1.0021606868913213
  • slingshot: Easing
if (x < 0.7) {
  return (x * -0.357)
} else {
  d = x - 0.7
  return ((d * d * 27.5 - 0.5) * 0.5)
}
  • circular: Easing
return 1.0 - sqrt( 1 - x * x )
  • gentle: Easing
return (3.0 * (1.0 - x) * x * x) + (x * x * x)

EasingTypes

  • in: EasingType
return easing( x )
  • out: EasingType
return 1.0 - easing( 1.0 - x )
  • inout: EasingType
return (x < 0.5) ? (easing( 2.0 * x ) * 0.5) : (1.0 - (easing( 2.0 - 2.0 * x ) * 0.5))
  • yoyo: EasingType
return (x < 0.5) ? (easing( 2.0 * x )) : (easing( 2.0 - 2.0 * x ))
  • mirror: EasingType
return (x < 0.5) ? (easing( 2.0 * x )) : (1.0 - easing( 2.0 - 2.0 * x ))
  • reverse: EasingType
return easing( 1.0 - x )
  • flip: EasingType
return 1.0 - easing( x )