Easing curves

By default, Transitionables create constant or linear transitions between start and end values. However, we can create more lively transitions by changing the Transitionable's easing curve.

Default curve

When no curve is specified, Transitionables use a linear easing curve. This means values transition evenly over the course of the specified duration.

var child = context.addChild();

var position = new Position(child);
position.set(0,-300,0, { duration: 3000 })

Refer to the the previous Transitioning Components for an explanation of the code above

Without setting the curve, halfway through this animation (1.5 seconds) the Y position value will be -150.

But, what if we wanted a more satisfying transition- maybe we want it to move faster at first and then slow down just at the end? This is where we use curves.

Adding easing curves

Specify the easing curve in the options hash passed to the Transitionable's .set() method.

position.set(0, 0, -300 { duration: 3000, curve: 'outQuad' });

Though completing in the same amount of time, the animation above now looks very different from the previous one.

For the specific case of quaternion interpolation, method: 'slerp' may be specified in the options hash to give a more natural rotational transition.

var myValue = new Transitionable([1,0,0,0]);
myValue.set([Math.cos(Math.PI/4),Math.sin(Math.PI/4),0,0], {duration: 1000, curve: 'outQuad', method: 'slerp'});

You may be wondering what other curves are at your disposal? Reference the table below or check out the Curves.js file for a full list of registered curves.

Custom easing curves

Of course we can write and input our own curves. In order to avoid jitter, or a teleporting Transitionable, it is important that our custom functions are 1. continuous, and 2. begin at 0 and end at 1.

function myCustomCurve(progress) {
    return Math.sin(progress * Math.PI/2);
}

position.set(0, 0, -300 { duration: 300, curve: myCustomCurve });

Note how the curve must accept a progress parameter, which varies linearly from 0 to 1 and describes the current stage of the transition.

Easing curves table

Below is a full list, graph and demos for all 30 of the easing curves included by default with Famous.