Data Viz - (Timing|Easing) Function
Table of Contents
About
Timing function (also known as easing) are used in transition to calculate the speed and smooth of the animation between state.
They specify the rate of change of a parameter over time.
Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.
Timing Curves describe the pace with which a transform changes between each keyframe. Each timing curve is modeled as a cubic bezier curve from point [0, 0] to [1, 1], where the X value is the progression in time from the origin keyframe to the destination keyframe, and the Y value describes the amount of change in the value at a given time:
<MATH> origValue + (destValue - origValue) * Y </MATH>
Articles Related
Name
- “elastic”,
- “cubic-in-out”
- and “linear”
Implementation
They are generally:
- Bezier curve (key points are close)
- Cardinal_spline (typical interpolation in 2D)
- nonuniform rational B-spline (key points are close)