Animations may be viewed in a method outside of the 3D viewport, known as a curve editor. The curve editor is a 2D graph that breaks out the types of transformations occurring between frames and shows them as curves between two values at specific frames. In the below image, we see the curve representing the change in position along the X axis for the selected sphere.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/92ebe1fc-4553-44a5-8b2e-5f8714ee5415/Animation_Curves.png

Easing

Easing is the rate of change of a parameter over time. Easing is used to alter the rate of change in an animation curve. Below is a chart of easing functions. Refer to the original website in order to alter some of these and see the code input. Another website, GSGD, demonstrates the programmatic input.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0997a33c-12d3-4a45-a4c5-1db80c4c1be5/Animation_EasingFunctions.png

Example

We might use several key frames to establish the height and spacing of a bouncing ball, and then further refine those key frames in the curve editor by using an easeOutBounce type curve to create the illusion that the ball is moving slower at the height of the bounce as well as reducing velocity and distance per bounce. Below is a sketch of what the end result would be.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/88267ab6-8d6e-417d-9519-3eea151d6156/Animation_KeysCurves_Example.png