generic javascript animation library
http://imthenachoman.github.io/nAnimation/
There are a lot of great JavaScript animation libraries but all of them were either too complex or bulky for my needs. They all offered a host/slew of features that I didn't need. So I set out to write something simpler for myself. I ended up with nAnimation
.
nAnimation
doesn't really do any kind of animation; it lets you run a function an X # of times for a Y duration using an optional easing function. The function is called on each frame and can do whatever you need/want. At each frame/call the function is passed one paramater: a rate
. The rate
is a number between 0
and 1
and represents the % complete
for each frame/call. (However, it is possible that some of the easing functions will result in a number larger then 1 during the duration.) The rate will always be 0
at the first frame/call and 1 at the last frame/call.
You can, in turn, use rate
to do anything, including animations. For example, if the function sets the width
of an element to be rate * width
then the element will grow from 0
to width
over the duration.
I didn't really actually create anything special; I was able to piece together different things I found online to do what I need. The resources I used:
requestAnimationFrame
from https://gist.github.com/paulirish/1579671- a cool animation wrapper by Dmitri Lau (http://www.sitepoint.com/simple-animations-using-requestanimationframe/)
jQuery
's easing functions from https://github.com/danro/jquery-easing/blob/master/jquery.easing.js- Robert Penners easing equations from http://robertpenner.com/easing/
- http://imthenachoman.github.io/nAnimation/nAnimation.1.0.min.js
- http://imthenachoman.github.io/nAnimation/nAnimation.1.0.js
nAnimate.start([duration in milliseconds], [function to call with the % complete], [(optional) name of the easing function to use]);
For example:
nAnimate.start(1000, function(rate)
{
// grow the div width from 100 to 300
element.style.width = 100 + (rate * 200) + "px";
});
nAnimate.start(2000, function(rate)
{
element.style.height = 100 + (rate * 200) + "px";
}, "easeInQuart");
nAnimate.start
will return an ID
. Use the ID
to cancel.
nAnimate.stop([ID]);
For example:
var ID = nAnimate.start(1000, function(rate)
{
element.style.width = 100 + (rate * 200) + "px";
});
nAnimate.stop(ID);
nAnimate.easingFunctions();
For example:
var easingFunctions = nAnimate.easingFunctions();
Check http://jsfiddle.net/imthenachoman/q1tdx8s4/ or the example.html
file for an example and to see how each easing function looks.