What Are Easing Functions?

Imagine you're animating a circle moving across the screen from left to right. If the circle moves at a constant speed, it might feel a bit mechanical or unnatural. In the real world, objects accelerate and decelerate - they don't start and stop instantly.

Easing functions are mathematical functions that let you shape how a value changes from one value to another.

Every easing function takes a single input value between 0 and 1 (representing progress through the animation) and returns an output value that represents the "eased" position at that point in time.

Built-in Easing Functions

keyed comes with a variety of built in easing functions.

• quad_in

  ---

• quad_out

  ---

• quad_in_out

  ---

• cubic_in

  ---

• cubic_out

  ---

• cubic_in_out

  ---

• quartic_in

  ---

• quartic_out

  ---

• quartic_in_out

  ---

• quintic_in

  ---

• quintic_out

  ---

• quintic_in_out

  ---

• sine_in

  ---

• sine_out

  ---

• sine_in_out

  ---

• circular_in

  ---

• circular_out

  ---

• circular_in_out

  ---

• elastic_in

  ---

• elastic_out

  ---

• elastic_in_out

  ---

• expo_in

  ---

• expo_out

  ---

• expo_in_out

  ---

• back_in

  ---

• back_out

  ---

• back_in_out

  ---

• bounce_in

  ---

• bounce_out

  ---

• bounce_in_out

  ---

• linear_in_out

  ---

In, Out, and In-Out

Every easing function in keyed follows a naming convention with one of three suffixes.

• _in: The easing function affects how the value eases into its transition beween values, but changes linearly after.
• _out: The easing function affects how the value eases out of its process of changing beween two values, but changes linearly initially.
• _in_out: Combines both effects - the easing function affects both how the value starts and ends changing.

For example, cubic_in, cubic_out, and cubic_in_out are all cubic easing functions with different behaviors at the start and end.

Using easing functions in keyed

Many of the built-in transformation methods in keyed support easing via an ease or easing input argument. Common methods that accept easing functions include:

• translate() - Move an object
• rotate() - Rotate an object
• scale() - Resize an object
• move_to() - Position an object at specific coordinates

Here's an example of how we can control the acceleration of a circle travelling across the screen by using an easing function.

from keyed import Circle, Scene, Text, easing

scene = Scene(scene_name="easing-demo", num_frames=60, width=800, height=200)

# Move a circle across the screen
circle = Circle(scene, x=scene.nx(0.2), y=scene.ny(0.5), radius=30).move_to(
    x=scene.nx(0.8), y=None, start=0, end=60, easing=easing.cubic_in_out
)

# Make labels to indicate the start/end of the circle's journey
start = Text(scene, "Start", size=30).move_to(scene.nx(0.2), scene.ny(0.2))
end = Text(scene, "End", size=30).move_to(scene.nx(0.8), scene.ny(0.2))

# Add the objects to the scene
scene.add(circle, start, end)

In this example, cubic_in_out is an easing function that causes the circle to start slowly, speed up in the middle, and slow down at the end.

Consider running this example yourself and swapping out the easing function with some of the other built-in easing functions available.

Next Steps

For more information, check out the API reference for the keyed.easing module for a full list of easing functions and some extra utility functions for manipulating/constructing custom easing functions.