Ease

An ease is a function which takes an input from 0..1 and returns a value, which is usually in the range 0..1. The simplest is LinearEase, which is a straight line from (0,0) to (1,1) :

Output
1 ▲               .
  │             .
  │           .
  │         .
  │       .
  │     .
  │   .
  │ .
0 └───────────────▶
  0   Input (t)   1

They are often used for animations. For example, suppose we want to move a box from the side of the screen into the middle in 1 second. We could set its position like so :

xPosition = startX + distanceToMove * elapsedTime

However, this would look jerky (even though it is constant speed), because things in the natural world don't move with constant speed. They start slowly, get up to speed, and then slow down at the end.

This is the ease curve we just described. See Eases.easeInOut.

Output
1 ▲               .
  │            .
  │          .
  │         .
  │        .
  │       .
  │     .
  │ .
0 └───────────────▶  t
  0   Input (t)   1

Notice that large changes in the input near 0 and 1 make small changes to the output. Small input changes near t=0.5 cause large changes in the output. i.e. it is fast in the middle of the animation. The "speed" of the animation is represented by the slope of the graph.

To achieve this, smoother looking motion our code becomes :

xPosition = startX + distanceToMove * Eases.easeInOut( elapsedTime )

Note, this example is slightly contrived, because the animation lasts for exactly 1 second. When our animations last an arbitrary amount of time, we need this :

xPosition = startX + distanceToMove * Eases.easeInOut( animationDuration / elapsedTime )

While the output for most eases are in the range 0..1 this isn't always the case. For example, if an ease returned 1.0 at t=0.8, 1.1 at t=0.9 and 1.0 at t=1.0, the animation would appear to overshoot and then correct itself. This can be visually very appealing.

Ease can be used for animations which have nothing to do with positions. For example, they can be used for rotations, scaling and changes of color.

Note. FlipBookPage.progress is designed to work well with eases, because the progress value is in the range 0..1, perfect as an input to ease.

Inheritors