Animating JS frame by frame

This is day 6 of my year of code.

After animating my Triangle using CSS animations and JS timeouts I got curious about frame by frame animations.

Codepen of JS frame by frame animations:

http://codepen.io/jirandowlati/pen/dNzadK

I followed the instructions on this page:

The way I see it, frame by frame animation is the foundation of all other animations. By applying the ideas learned here we can use these animation techniques in multiple technologies while setting an animation property on CSS contains us just to CSS.

Understanding frame by frame animation has also helped me learn a little more about optimizations within the browser.

Frame by frame animation to me means that over a period of time a value continues to change. Each frame is a point in time where a value is changing. It seems that much of animation’s foundations lie in Interpolation.

Wikipedia tells me Interpolation inside of Mathematics is:

Interpolation is a method of constructing new data points within the range of a discrete set of known data points.

So in our case Interpolation inside of animations is constructing new values within the range of a set known as time.

Such as moving a box from 0px to 200px on the screen within a time of 2 seconds. For every moment in time we must know where that object will be. Interpolation helps us find that value for each moment until the last moment.

The formula used in this article and found across the web is:

valueAtTime = startPosition + (endPosition — startPosition) * (time / duration);

Notice the time/duration, that’s how we achieve the 0..1 set of time.

So inside of our code we have something like:

var run = function() {
time = new Date().getTime() - startTime;
time = time/duration;
if(time < 1) requestAnimationFrame(run);
var value = startX + (endX - startX) * time;
console.log(value);
setX(box, value);
}

Where we continue to run the run() function for each frame until we reach the end of time set also known as 1.

Optimizations

This article was highly informative on which CSS properties allow the best run times: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Essentially the summary is that using transform and opacity we can animate much more cheaply than any other property that causes the browser to re-render the scene.

Easing

There is a massive list of information around easing, I would look into Robert Penner’s work and the functions that are underneath a lot of the [JQuery Easing functions](https://github.com/danro/jquery-easing/blob/master/jquery.easing.js)

The way I understand it, Easing functions are just functions of time. We manipulate the current time to change the values during a duration. We can make an object speed up then slow down. Or we can make it bounce, ease in, ease out and so on.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.