Web-based animation
Approaches providing web-based animations using tools and techniques that take into account the limited capabilities and resources available in the web environment are disclosed. In some embodiments, such web-based animations are implemented in JavaScript.
1. A method for triggering animation events, comprising:
configuring an animation timer to fire at a maximum rate, wherein the maximum rate corresponds to a recurring period of the animation timer, and wherein at the expiry of each recurring period the animation timer fires;
configuring a first animation composed of a first plurality of frames to progress to a next frame in the first plurality of frames each time a first multiple of the recurring period expires, wherein the first multiple is calculated based on a first frame rate of the first animation and the maximum rate;
configuring a second animation composed of a second plurality of frames to progress to a next frame in the second plurality of frames each time a second multiple of the recurring period expires, wherein the second multiple is calculated based on a second frame rate of the second animation and the maximum rate, and
the first frame rate and the second frame rate are different, thereby causing the calculated first and second multiples to be different;
activating the animation timer to cause the first animation and the second animation to be displayed, wherein the first animation is displayed at the first frame rate and the second animation is displayed at the second frame rate.
2. The method as recited in claim 1 , wherein the maximum rate comprises a maximum of the first frame rate and the second frame rate.
3. The method as recited in claim 1 , wherein the maximum rate of the animation timer is higher than a maximum of the first frame rate and the second frame rate.
4. The method as recited in claim 1 , wherein the animation timer is associated with a browser configured to display the first animation and the second animation.
5. The method as recited in claim 1 , wherein the animation timer comprises an instance of a JavaScript class.
6. A system for triggering animation events, comprising:
a processor; and
a memory storing instructions that, when executed, cause the processor to:
configure an animation timer to fire at a maximum rate, wherein the maximum rate corresponds to a recurring period of the animation timer, and wherein at the expiry of each recurring period the animation timer fires;
configure a first animation composed of a first plurality of frames to progress to a next frame in the first plurality of frames each time a first multiple of the recurring period expires, wherein the first multiple is calculated based on a first frame rate of the first animation and the maximum rate;
configure a second animation composed of a second plurality of frames to progress to a next frame in the second plurality of frames each time a second multiple of the recurring period expires, wherein the second multiple is calculated based on a second frame rate of the second animation and the maximum rate, and
the first frame rate and the second frame rate are different, thereby causing the calculated first and second multiples to be different;
activate the animation timer to cause the first animation and the second animation to be displayed, wherein the first animation is displayed at the first frame rate and the second animation is displayed at the second frame rate.
7. The system as recited in claim 6 , wherein the maximum rate comprises a maximum of the first frame rate and the second frame rate.
8. The system as recited in claim 6 , wherein the maximum rate of the animation timer is higher than a maximum of the first frame rate and the second frame rate.
9. A computer program product for triggering animation events, the computer program product being embodied in a non-transitory computer readable storage medium and comprising computer instructions for:
configuring an animation timer to fire at a maximum rate, wherein the maximum rate corresponds to a recurring period of the animation timer, and wherein at the expiry of each recurring period the animation timer fires;
configuring a first animation composed of a first plurality of frames to progress to a next frame in the first plurality of frames each time a first multiple of the recurring period expires, wherein the first multiple is calculated based on a first frame rate of the first animation and the maximum rate;
configuring a second animation composed of a second plurality of frames to progress to a next frame in the second plurality of frames each time a second multiple of the recurring period expires, wherein the second multiple is calculated based on a second frame rate of the second animation and the maximum rate, and
the first frame rate and the second frame rate are different, thereby causing the calculated first and second multiples to be different;
activating the animation timer to cause the first animation and the second animation to be displayed, wherein the first animation is displayed at the first frame rate and the second animation is displayed at the second frame rate.
10. The computer program product as recited in claim 9 , wherein the maximum rate comprises a maximum of the first frame rate and the second frame rate.
11. The computer program product as recited in claim 9 , wherein the maximum rate of the animation timer is higher than a maximum of the first frame rate and the second frame rate.
12. The computer program product as recited in claim 9 , wherein the animation timer is associated with a browser configured to display the first animation and the second animation.
13. The computer program product as recited in claim 9 , wherein the animation timer comprises an instance of a JavaScript class.