I recently co-authored an article titled Bézier Curve as a Generalization of the Easing Function in Computer Animation, which was accepted for presentation at Computer Graphics International 2020.

In this article, I address several misconceptions I encountered during my research. I will begin by introducing two key concepts essential for understanding these misconceptions, and then present my perspective on the topic.

Keyframe animation

Keyframe animation is a widely adopted technique in both video production and game development. It traces its origins to traditional hand-drawn animation, where key poses were manually illustrated to define motion. Today, the method is integral to all major video editing software and game engines, serving as a foundational tool for animators to control movement and transitions.

In computer animation, however, the concept of keyframes differs significantly from its traditional counterpart and can be somewhat misleading. Rather than defining entire frames, the technique involves animating specific parameters selected by the artist. These key parameters may include not only spatial properties such as position, rotation, and scale, but also material attributes like color, transparency, and texture. For this reason, it may be more accurate to refer to it as a method of key parameters rather than keyframe animation.

From a mathematical perspective, a keyframe can be represented as an ordered pair (x,y), where 𝑥 denotes the frame number (which can be easily translated into time), and 𝑦 represents the value of the animated parameter. Intermediate values between keyframes are computed by a computer algorithm, typically using an interpolation function. The slope of this function determines the rate of change: a steep slope indicates rapid variation, while a gentle slope suggests a slower transition.

In principle, any function can be used for interpolation, provided it meets two criteria:

1. The function must be deterministic. Although non-deterministic or noise-based functions are occasionally used, most applications rely on deterministic behavior.
2. The function must be expressible as a mathematical formula interpretable by the CPU.

There is an infinite number of interpolation functions, which can be categorized based on various properties, such as:

• Whether the function performs interpolation or approximation
• Its computational complexity
• The smoothness class of the resulting curve
• The degree of control it offers over the curve's shape

I won’t delve into these details here, as I want to keep this text concise.

One notable categorization of interpolation functions was introduced by Robert Penner in his book Programming Macromedia Flash MX. Penner developed a set of easing functions designed to simulate the movement of objects at variable speeds, enhancing the realism and expressiveness of animations. These functions are grouped into types based on their behavior, such as ease-in (smooth start), ease-out (smooth stop), and ease-in-out (smooth start and stop).

Penner’s easing functions have become widely adopted and can be found in numerous frameworks and libraries, including Qt, Windows Presentation Foundation (WPF), and CSS-based web animations. Their versatility and intuitive control over motion make them a standard tool in modern animation workflows.

Of course, Penner’s set of easing functions represents just one approach to categorizing motion curves and does not exhaust the topic.

Another widely used class of interpolation functions includes polynomials, particularly cubic Bézier curves.

Bézier curve

The Bézier curve was originally developed for geometric modeling in industrial design. It was first formulated by Paul de Casteljau while working at Citroën in the 1950s, but his work was not published at the time. Later, Pierre Bézier, an engineer at Renault, independently developed and popularized the curve for use in automobile design (hence the name Bézier curve). Given this context, it is reasonable to assume that the curve was initially intended to aid in car body modeling and other design applications requiring smooth, controllable curves.

No discussion of computer graphics is complete without mentioning the Utah teapot, a classic 3D model originally designed using Bézier surfaces—the three-dimensional analog of 2D Bézier curves. These surfaces allowed for smooth, mathematically defined shapes that became foundational in early graphics research.

Bézier curves are not limited to 3D modeling, however. In 2D graphics, they play a crucial role as well. For instance, every glyph in a TrueType font is constructed using quadratic Bézier curves, enabling scalable, resolution-independent text rendering across digital platforms.

Bézier curve definition

In general, a Bézier curve of degree k is defined by a set of k + 1 control points $P_0,P_1,\dots ,P_k\in {ℝ}^n$ and its parametric equation is given by:

$$P\left(t\right)=\sum _{i=0}^k{P}_i{B_i}^k\left(t\right)\text{t ∈ [0,1]}$$

where ${B_i}^k\left(t\right)$ are the Bernstein polynomials defined as:

$$B_i{}^k\left(t\right)=\frac{k!}{i!(k-i)!}{t}^i{(1-t)}^{n-i}$$

In the context of keyframe animation, I focus on the cubic Bézier curve in 2D as an interpolation function. A cubic Bézier curve is defined by four control points: $P_0\left(t\right),P_1\left(t\right),P_2\left(t\right),P_3\left(t\right)$, often referred to as handles. Its parametric form is:

$$P\left(t\right)=\{\begin{array}{c}x\left(t\right)=P_0.x{(}^{1-t}+3P_1.x{(}^{1-t}t+3P_2.x(1-t)t^2+P_3.x{t}^3\\ y\left(t\right)=P_0.y{(}^{1-t}+3P_1.y{(}^{1-t}t+3P_2.y(1-t)t^2+P_3.y{t}^3\end{array}$$

In computer animation, the first and last control points ($P_0$ and $P_3$) define the start and end values and timing of the key parameter. By adjusting the intermediate control points ($P_1$ and $P_2$), the animator shapes the curve, which directly influences the speed and acceleration of the interpolated parameter.

Cubic Bézier curves are widely used in keyframe animation because:

• They are intuitive and easy for artists to manipulate, enabling expressive animations with variable-speed transitions.
• The interpolation behavior can be adjusted simply by repositioning the handles $P_1$ and $P_2$.
• Multiple Bézier segments can be joined with up to $C^2$ continuity, allowing smooth and complex motion paths.

Furthermore, the parametric Bézier equation can be reformulated as a pair of cubic polynomials:

$$\{\begin{array}{c}g\left(x\right)={\alpha }_0{x}^3+{\beta }_0{x}^2+{\gamma }_{0}x+{\delta }_0\\ f\left(x\right)={\alpha }_1{x}^3+{\beta }_1{x}^2+{\gamma }_{1}x+{\delta }_1\end{array}$$

Details on how to compute these coefficients are provided in my paper.

The Core Issue: Graph of a Function vs. 2D Curve

Now that we've laid the groundwork, let's address the elephant in the room. Throughout this text, you've likely noticed frequent references to two terms: function (specifically, the graph of a function) and curve. These words are often used interchangeably in casual conversation, especially in animation and graphics—but in mathematics, they represent distinct concepts. And in the context of keyframe animation, that distinction matters.

Let me explain why.

Every graph of a function is a curve, but not every curve is a graph of a function.

A function is a rule that assigns each element of a set 𝑋 to a single element of a set 𝑌. That word single is key. (Yes, mathematicians also study multivalued functions, but that's outside the scope of this discussion. We're not diving into complex analysis or Riemann surfaces here.)

A curve, on the other hand, is defined more broadly:

A curve is the image of a continuous function from an interval to a topological space.

This definition allows for much more flexibility. A curve can loop, twist, or even double back on itself. It doesn't need to pass the "vertical line test" that functions do. In fact, many curves—like circles or figure-eights—cannot be represented as the graph of a single-valued function.

Why This Matters in Animation

In keyframe animation, we often use curves to interpolate parameters. But these curves aren't always graphs of functions. For example, a Bézier curve used to control easing might not be expressible as $y=f\left(x\right)$ because it could loop or bend in ways that violate the definition of a function.

To clarify this distinction, here are a few examples of curves that support the argument.

Graphs of a Function

2D Curves

Can you see the difference?

Indeed, the graph of a function cannot contain arcs, loops, spirals, or be closed. This limitation is precisely why graphs of functions form only a subset of all possible curves.

Yet in animation, we often hear that curves are used for interpolation and yes, that’s absolutely true. But in the specific context of keyframe animation, what exactly does curve mean? More importantly, how does this concept relate to the cubic Bézier curve, one of the most commonly used interpolation functions in animation editors?

To illustrate this, let’s take the cubic Bézier curve parametrization shown above. What happens when we interpolate using the parameter t? (Many people mistakenly interpret this parameter as time.) The result is shown in the animation below as a moving blue dotted line.

As mentioned at the beginning of this presentation, in keyframe animation the x-axis typically represents the passage of time. This behavior is visualized by the moving green dotted line. As we can see, interpolation by the parameter 𝑡 is not the same as interpolation by the x-coordinate. This means that the parametrization of the cubic Bézier curve shown above cannot be used directly as an interpolation function in the keyframe animation method.

To resolve this, we need a new parametrization—one that transforms the parametric description into a function of a single variable, where a time-dependent function (also known as an easing function) is used.

We define:

$$C\left(x\right)=f\left(g^{-1}\right(x\left)\right)$$

where ${g\left(x\right)}^{-1}$ is the inverse of the function $g\left(x\right)$ , defined earlier.

This simple formula enables the switch. Now, the function $C\left(x\right)$ becomes the new parametrization of the Bézier curve, suitable for use as an easing function. In this article, we refer to the function $g$ as the internal function, and $f$ as the external function.

When using a cubic Bézier curve as an interpolation function, we must address a critical issue: depending on the positions of the control handles $P_1$ and $P_2$, the resulting curves—such as those shown on the slide—can exhibit problematic behavior.

As demonstrated earlier, these types of trajectories cannot be described as the graph of a function. This limitation aligns with the keyframe animation context, where the x-axis represents time. For example, if we interpolate using the x-coordinate on such Bézier curves, it can result in time looping—a behavior that is clearly not allowed.

This observation tells us that not all cubic Bézier curves are suitable for use as easing functions in keyframe animation. Only those that satisfy the following condition are valid:

$g^{\text{'}}\left(x\right)>0\text{for}x\in [0,1]$

This condition ensures that the internal function $g\left(x\right)$ is strictly increasing, which guarantees its invertibility over the relevant domain. Enforcing this condition allows the composite function $C\left(x\right)$ to be well-defined and ensures that the resulting curve does not contain arcs or loops.

A slightly weaker condition is also acceptable:

$g^{\text{'}}\left(x\right)\ge 0\text{for}x\in [0,1]$

For functions $C\left(x\right)$ that meet this relaxed condition, a single inflection point within the domain is permissible. However, this does not constitute a local extremum, since the first derivative does not change sign at the stationary point.

Cubic Bézier Curve as an Interpolation Function

In my paper, I describe the condition that the inner function $g\left(x\right)$ must satisfy for a cubic Bézier curve to be considered a valid interpolation function.

For a normalized cubic Bézier curve—where the endpoints are fixed at $P_0=(0,0)$ and $P_3=(1,1)$ we ask:

What is the permissible range of variation for the x-coordinates of the control handles $P_1$ and $P_2$ to fulfill the condition?

As explained in my paper, only the inner function $g\left(x\right)$ influences the x-component of the Bézier curve. And since the condition for legality applies solely to $g\left(x\right)$, we must ensure:

$g^{\text{'}}\left(x\right)>0\text{for}x\in [0,1]$

This guarantees that $g\left(x\right)$ is strictly increasing and therefore invertible—an essential requirement for defining the easing function:

$C\left(x\right)=f\left(g^{-1}\right(x\left)\right)$

If this condition is violated, the curve may contain loops or arcs, which are invalid in keyframe animation where the x-axis represents time.

Many animation editors impose overly restrictive constraints on the x-coordinates of Bézier handles—or use hidden tricks to force compliance. Blender, I love you, but please don’t cheat! These limitations often prevent users from exploring the full space of legal interpolation functions.

From Parametric Curve to Easing Function

Now that we have a formal equation, we can express the cubic Bézier curve as an easing function.

To determine the formula for $C\left(x\right)$, we must compute the inverse of the inner function $g\left(x\right)$, which is at most a cubic polynomial. This requires solving for the roots of a cubic equation, restricted to real solutions only, since we’re working within the domain of real-valued time interpolation.

Families of Easing Functions

Depending on the coefficients of the inner function $g\left(x\right)$, the resulting easing function $C\left(x\right)$ does not belong to a single family of equations. Instead, it falls into six distinct families, each corresponding to different configurations of the Bézier handles.

These families are shown below.

• $a=0\wedge b=0$
  $C\left(x\right)=\alpha {(lx+k)}^3+\beta {(lx+k)}^2+\gamma (lx+k)+\delta$
• $a=0$
  $C\left(x\right)=\alpha {\left(\sqrt{lx+k}\right)}^3+\beta {\left(\sqrt{lx+k}\right)}^2+\gamma \left(\sqrt{lx+k}\right)+\delta$
• $a\ne 0\wedge p=0$
  $C\left(x\right)=\alpha {\left(\sqrt[3]{lx+k}\right)}^3+\beta {\left(\sqrt[3]{lx+k}\right)}^2+\gamma \left(\sqrt[3]{lx+k}\right)+\delta$
• $a\ne 0\wedge p>0$
  $C\left(x\right)=\alpha {\sinh \left(\frac{1}{3}\mathrm{asinh}\right(lx+k\left)\right)}^3+\beta {\sinh \left(\frac{1}{3}\mathrm{asinh}\right(lx+k\left)\right)}^2+\gamma \sinh \left(\frac{1}{3}\mathrm{asinh}\right(lx+k\left)\right)+\delta$
• $a>0\wedge p<0$
  $C\left(x\right)=\alpha {\cosh \left(\frac{1}{3}\mathrm{acosh}\right(lx+k\left)\right)}^3+\beta {\cosh \left(\frac{1}{3}\mathrm{acosh}\right(lx+k\left)\right)}^2+\gamma \cosh \left(\frac{1}{3}\mathrm{acosh}\right(lx+k\left)\right)+\delta$
• $a<0\wedge p<0$
  $C\left(x\right)=\alpha {\left(\cos \right(\frac{1}{3}\mathrm{acos}\left(lx+k\right)-\frac{2\pi }{3}\left)\right)}^3+\beta {\left(\cos \right(\frac{1}{3}\mathrm{acos}\left(lx+k\right)-\frac{2\pi }{3}\left)\right)}^2+\gamma \left(\cos \right(\frac{1}{3}\mathrm{acos}\left(lx+k\right)-\frac{2\pi }{3}\left)\right)+\delta$

Those families are very different at first glimpse, but some similarities and common patterns can be found after getting a deeper look. How to determine the coefficients of α, β, γ, δ, l, and k can be found in my paper for each of the family of functions.

By introducing this limitation now we can call generated interpolation functions as splines (for those interpolation function with continuity of at the border of the curves).

How Bézier curve is interpolated currently in engines or graphics applications?

How engines or graphics applications are dealing with the interpolation cubic Bézier curve?

My research shows that they do in two different ways:

1. The first way is that they are using a two-step algorithm, the first step is to solve at most cubic polynomial. And finding roots are done in terms of radicals or numeric root-finding algorithm.
2. The second way is a sampling of the cubic Bézier curve in some defined frequency (e.g. 30 or 60 FPS). And values between samples are linear interpolated. This method while is minimalizing the performance overhead introduces memory overhead. Storing all those samples need a lot of space in memory.

But how to use knowledge from my paper to deal with this problem? This is a subject for another article.

Łukasz Izdebski
October 2020