Cubic Bézier for Animation Smoothing

I will point at this youtube video for the best intro to bezier curves. This was created as a look at recreating CSS animation smoothing for JS animations, which in CSS is all handled via cubic bézier curves.

Below is a very constrained curve generator, with P0 and P3 always fixed at 0,0 and 1,1 respectively; and P1 + P2 restricted to the same bound, although out of bound P1+P2 points can still provide a functional curve to use for timings.

For example, extreme P1+P2 Y-coordinate values allow for an animation bouncing effect as the graph minum and maxum are not correlated 0 to 1 X values.

This is 100 points on a cubic bezier of (0, 0), (0.5, 0), (0.5, 1) and (1, 1).

The X Axis is time while Y shows the transition.

Note: As the above video mentions, there is no compute friendly way to calculate a point by X axis, so we're using the pre-computed curve points as a LUT/look up table to find a Y/transition value by using the nearest X coordinate point to the current X/time value.

By Alanas Jakubauskas