Ash is a small and feature-rich javascript library. It helps to improve the interaction of animation in HTML5 website or apps. With Ash, you can control different animation in one time-axis easily. The most exciting thing is that you can write your own plug-in for Ash, this will enable you to implement much more fantastical effect.

Write you first animation

I will teach you how to use Ash to make amazing thing. Make sure you have loaded Ash.js before you try to write any demo. Here is a very easy demo to move an element;

$3

``














Play



`

$3

`

.demo_block{position:absolute; top:50px; left:0px; width:60px; height:60px; background-color:#64B5F6;border-radius:50%;}
.demo_holder{width: 100%; height: 200px; position: relative;}
.demo_btn{display: inline-block; padding: 10px 20px; text-align: center; color: white; border-radius: 4px; background-color: #03A9F4; cursor: pointer;}
.demo_btn:hover{ background-color: #0288D1; }
`

$3

`
window.onload = function(){
var isMoving = false;
block = document.getElementById('demo_block');
document.getElementById('demo_btn').onclick= function(){
if(!isMoving){
isMoving = true;
Ash.play([{
dom: block,
css:[{left:'0px'},{left:'400px'}],
time:100
}],function(){
isMoving = false;
});
}
};
};
`




Learn the basical usage

Ash.play

According to the source code below, you should know the first method of Ash, `Ash.play` ! The function 'play' accepts 4 parameters. The following the code to define the function 'play'.

`
var play=function(scripts,renderGap,endFunc,stopFunc){
`


$3

| parameter | optional | description |
| ----------------|:-------------:| --------------------------------------------------|
| scripts | No | An array to ojbect to descript the animation |
| renderGap | Yes | How many frame for each rendering |
| endFunc | Yes | Callback function when the animation ends |
| stopFunc | Yes | Callback function when the animation is stopped |

$3

The scripts is the most important argument. Let's its element script in our site. The following table shows the attributes for the script.

| attribute | optional | description |
| ----------------|:-------------:| ------------------------------------------------------------------------------|
| dom | Yes | The animation element(s) |
| css | Yes | An array contains dom's state in the begining and the ending of the animation |
| attr | Yes | Similar with css, but it descript of dom's attribute |
| time | Yes | How long will the animation last.(The unit is frame) |
| delay | Yes | delay time |
| tween | Yes | The name of easing formula. Such as 'linear','easeIn' and so on |

Ash.stop

You can stop the animtion with this function.

`
//start animation
var id = Ash.play([{
dom:document.getElementById('div'),
css:[{width:'100px'},{width:'200px'}],
time:200
}]);
//stop the animation after 1 secord.
setTimeout(function(){
Ash.stop(id);
},1000);
``

Website: http://jsonic.net/ash/docs/get-start.html

Email: ArthusLiang@gmail.com