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.
I will teach you how to use Ash Library 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<link rel="stylesheet" type="text/css" href="test.css" media="screen">
<script src="ash.js"></script>
<script src="test.js"></script>
</head>
<body>
<!--demo1-->
<div class='demo_holder'>
<div id="demo_block" class='demo_block'></div>
</div>
<a id='demo_btn' class='demo_btn'>Play</a>
<!--demo1-->
</body>
</html>
.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; }
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;
});
}
};
};
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){
| 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 |
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 |
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