Animation is becoming a first-class citizen of the good user interface. Users loves animation. If the computer has the ability to just blow-out the answer, user is not accustomed to controls just popping-up. The visual ability of the human eye is based on frames and it is friendly for the web user interface to use animations.
Latest browsers include quite simple, but powerful interface for doing animations. This tip contains the basic idea (and code) for extending the interface to such powerful enough for using it in web application controls. The result interface is barely around 150 lines and contains facilities for events, storing data and of course, starting and stopping animation. It is compatible with Internet Explorer, Opera, Safari, Chrome and Firefox. Since the simplicity of the code, this tip stops at ideas in the code, not in the code itself.
var complete = false;
complete = true;
In this code, we set a variable to
The New Interface
The target of the code is to provide a usable interface for performing animations. The first of all is to make connection with the environment provided by browsers. For this, the code creates a
cancelFrame functions. They use
Every call to
requestAnimationFrame will most likely create a queue. Therefore for two animations, one will be called the first time, and the other - the second time. This will reduce the frame rate of animation by two. It is unnecessary for animation to paint only one element, therefore the interface in this code combines all requested frame function to be called in a single frame function provided to the browser. This effectively ensures frame rate to be equal to provided.
Memory Problem with Multiple Animations
Animation function and store it in our global frame function. This will prevent collecting the animation object when it is no longer used. Provided solution is to hold the instance to the
animation object of all currently running animations. When animation is not running (and it will eventually stop), animation object is removed from the array of active animations and if there are no other attachments, it will be free. However if object has been detached from everywhere, it will still continue its animation until the
stop() is called or the animation completes.
Animation Event System
Animation Timing Effects
The progress that is not linear can be calculated from linear progress. For example for "swing" animation position of animation can be calculated as follows:
position = 0.5 - Math.cos( position * Math.PI ) / 2;
The original position is based on
(currentTime - startTime) / (endTime - startTime) which gives value between
1. For values greater than
1, callback function must be called with
position = 1 to generate the final frame, then animation should stop itself.
Comparison with jQuery
Animation class does not provide effects like jQuery, but also it doesn't mess with the design of the website. This gives fairly easy to use base to stop effects in the middle and start them again with different values while predefined effects in jQuery can be stopped in the middle, but cannot be started from middle state without resulting invalid position. The jQuery does not use the new animation function, therefore animation with jQuery is not (always) smoother like with provided function. Due to the fact plain old timer method uses 0ms as timeout, the frame rate is as fast as the browser can do and animation becomes even smoother.
Points of Interest
jQuery provides richer facility for premade effects. While there is a problem handling stopped effects, handling proper contents when animated element is wrapped and other annoying stuff, it is quite a useful place to start learning animations.