Animations do not have to be linear. With the help of Bezier curve, we can create more vibrant transitions like this one from Google Material Design:

Modern Web languages have built-in support for these curves. Try it out here.

Recently a sudden thought came to me: how commonly are these curve used in real world UI designs? To find out, I have to 1) make some screen recordings, and then 2) reverse-engineer the original animation curve out.

The first step is easy, since most mobile phones have embedded screen recording function. For the second part, which is a bit tricky, I'll seek a little help from OpenCV's object tracking algorithms.

All the codes are run on the browser, so it might take a while before OpenCV.js is loaded.

The idea is quite simple. For every pair of consecutive frames, cv.findTransformECC() is called to evaluate a 2*3 affine transformation matrix. I then extract the translation, rotation and scaling components from it, independently.

The default example works well on my Opera/MacOS, and the result shows the translation animation curve is indeed a Bezier one. You can try with your own recording videos (only your browser can see the content).