EaselJS简明教程2-动画

EaselJS简明教程2动画，动画是将静止的画面变为动态的艺术，由静止到动态的实现，主要依靠人眼的视觉残留效应。

动画可以分为逐帧动画和补间动画两种，逐帧动画把动画（例如人物动作）进行分解，然后绘制出连续的、具有代表性的动作，连续播放形成动画，逐帧动画适用于复杂的不连续的动画。

补间动画，指我们给定动作的初始状态和结束状态，然后动画系统（例如动画软件）自动补齐中间状态，从而形成动画，补间动画适用于物体的移动、状态的改变等简单的动画。

1.逐帧动画

首先看看我的codepen上的实例一。

[html] view plaincopyprint?

1. <canvas id="testCanvas" width="960" height="400"></canvas>  

[javascript] view plaincopyprint?

1. // 创建stage并把它放到舞台上  
2. stage = new createjs.Stage(document.getElementById("testCanvas"));  
3.   
4. // 定义SpriteSheet  
5. var ss = new createjs.SpriteSheet({  
6.     "animations":  
7.     {  
8.         "run": [0, 25, "jump"],  
9.         "jump": [26, 63, "run"]},  
10.         "images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],  
11.         "frames":  
12.             {  
13.                 "height": 292.5,  
14.                 "width":165.75,  
15.                 "regX": 0,  
16.                 "regY": 0,  
17.                 "count": 64  
18.             }  
19.     });  
20.   
21. var grant = new createjs.Sprite(ss, "run");  
22. grant.x = 360;  
23. grant.y = 22;  
24.   
25. // 把动画放到舞台上，创建一个间隔事件侦听，进行动画  
26. stage.addChild(grant);  
27. createjs.Ticker.setFPS(60);  
28. createjs.Ticker.addEventListener("tick", stage);  

实现逐帧动画主要需要两个东西，动作关键帧和动起来的机制。

1.1关键帧

我们从一个png图像里面弄进来实现Sprite，EaselJS有个专门的类SpriteSheet来实现。

传递给SpriteSheet类构造函数的参数需要定义三个重要的信息，

1. Sprite使用的图片，或是图片集
2. 每个图像帧的位置，可以以两种方式，一种是涉及连续大小的、相同的帧呈现，一种是每个帧单独设置。
3. 动画，同样通话也可以以两种方式定义，一种是定义开始和结束帧的连续帧，一种是定义一个帧列表。

例如下面的代码

[javascript] view plaincopyprint?

1. var data = {  
2.     images: ["sprites.jpg"],  
3.     frames: {width:50, height:50},  
4.     animations: {run:[0,4], jump:[5,8,"run"]}  
5. };  
6. var spriteSheet = new createjs.SpriteSheet(data);  
7. var animation = new createjs.Sprite(spriteSheet, "run");  

SpriteSheet方法主要这么几个，功能如下

clone ()  克隆一个SpriteSheet实例  返回值是一个SpriteSheet对象

getAnimation ( name )  返回指定的动画对象，参数name接受String类型，返回一个包含frames, speed, name, and next properties的对象

getAnimations ()  返回一个由字符串命名的动画组成数组

getFrame ( frameIndex ) Object

getFrameBounds ( frameIndex  [rectangle] ) Rectangle

getNumFrames ( animation ) Number

1.2 “动画”机制

使动画动起来的机制，这里使用EaselJS的另一个类Ticker。Ticker的使用貌似下面代码

[javascript] view plaincopyprint?

1. createjs.Ticker.addEventListener("tick", tick);  
2. function tick(evt) {  
3.     //some code   
4. }  

Ticker的几个关键方法，setFPS、getFPS设置和获取帧频，setInterval、getInterval设置和获取时间间隔，setPaused、getPaused设置和获取暂停等，这些都是静态方法。

2.补间动画

我们让刚刚那个原地跑步的人，向前方跑动，单击时表示跳起，先看实例。

[javascript] view plaincopyprint?

1. //创建stage对象，并放到舞台上  
2. stage = new createjs.Stage(document.getElementById("testCanvas"));  
3. //用来做加速度  
4. var speed=1;  
5.   
6. //创建spriteSheet对象  
7. var ss = new createjs.SpriteSheet({  
8.       "animations": {"run": [0, 25, "run", 1.5], "jump": [26, 63, "run"]},  
9.         "images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],  
10.         "frames":  
11.             {  
12.                 "height": 292.5,  
13.                 "width":165.75,  
14.                 "regX": 0,  
15.                 "regY": 0,  
16.                 "count": 64  
17.             }  
18.     });  
19.   
20. var grant = new createjs.Sprite(ss, "run");  
21. grant.x =20;  
22. grant.y = 22;  
23.   
24. // 将人物放到舞台上  
25. stage.addChild(grant);  
26. createjs.Ticker.setFPS(20);  
27. //动画动起来  
28. createjs.Ticker.addEventListener("tick",tick);  
29. function tick(evt){  
30.   grant.x+=3*speed;  
31.   stage.update();  
32.   speed+=.01;  
33. }  
34. //侦听鼠标单击，跳起来  
35. stage.addEventListener("stagemousedown", handleJumpStart);  
36. function handleJumpStart(evt){  
37.   grant.gotoAndPlay("jump");  
38. }  

再加上控制按钮

[html] view plaincopyprint?

1. <input type="button" value="pause" id="pauseBtn" onclick="togglePause();">  

[javascript] view plaincopyprint?

1. function togglePause(){  
2.     var paused = !createjs.Ticker.getPaused();  
3.     //alert(paused);  
4.     createjs.Ticker.setPaused(paused);  
5.     document.getElementById("pauseBtn").value = paused ? "unpause" : "pause";  
6. }  

完工！系列教程未完待续。

同时，原来的Ticker处理方法，也要进行相应的修改。

[javascript] view plaincopyprint?

1. function tick(evt){    
2.   if (!createjs.Ticker.getPaused()) {    
3.     grant.x+=3*speed;     
4.   }else{    
5.     grant.Stop();    
6.   }    
7.   stage.update();    
8.   speed+=.01;    
9.   if(grant.x>=1000){    
10.     grant.x=0;    
11.     speed=1;    
12.   }    
13. }    

完工，系列教程还在继续，请大家持续关注。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------