EaselJS简明教程2-动画

青旅半醒 2022-08-25 02:02 173阅读 0赞

## 系列教程目录 ##

[EaselJS简明教程1-绘图][EaselJS_1-]

[EaselJS简明教程2-动画][EaselJS_2-]

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

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

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

## 1.逐帧动画 ##

首先看看我的codepen上的[实例一][Link 1]。

// 创建stage并把它放到舞台上
    stage = new createjs.Stage(document.getElementById("testCanvas"));
    
    // 定义SpriteSheet
    var ss = new createjs.SpriteSheet({
    	"animations":
    	{
    		"run": [0, 25, "jump"],
    		"jump": [26, 63, "run"]},
    		"images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],
    		"frames":
    			{
    				"height": 292.5,
    				"width":165.75,
    				"regX": 0,
    				"regY": 0,
    				"count": 64
    			}
    	});
    
    var grant = new createjs.Sprite(ss, "run");
    grant.x = 360;
    grant.y = 22;
    
    // 把动画放到舞台上，创建一个间隔事件侦听，进行动画
    stage.addChild(grant);
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);

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

### 1.1关键帧 ###

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

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

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

例如下面的代码

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的使用貌似下面代码

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

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

## 2.补间动画 ##

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

//创建stage对象，并放到舞台上
    stage = new createjs.Stage(document.getElementById("testCanvas"));
    //用来做加速度
    var speed=1;
    
    //创建spriteSheet对象
    var ss = new createjs.SpriteSheet({
    	  "animations": {"run": [0, 25, "run", 1.5], "jump": [26, 63, "run"]},
    		"images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],
    		"frames":
    			{
    				"height": 292.5,
    				"width":165.75,
    				"regX": 0,
    				"regY": 0,
    				"count": 64
    			}
    	});
    
    var grant = new createjs.Sprite(ss, "run");
    grant.x =20;
    grant.y = 22;
    
    // 将人物放到舞台上
    stage.addChild(grant);
    createjs.Ticker.setFPS(20);
    //动画动起来
    createjs.Ticker.addEventListener("tick",tick);
    function tick(evt){
      grant.x+=3*speed;
      stage.update();
      speed+=.01;
    }
    //侦听鼠标单击，跳起来
    stage.addEventListener("stagemousedown", handleJumpStart);
    function handleJumpStart(evt){
      grant.gotoAndPlay("jump");
    }

再加上控制按钮

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

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

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

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

\---------------------------------------------------------------

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

[EaselJS_1-]: http://blog.csdn.net/whqet/article/details/19154653
[EaselJS_2-]: http://blog.csdn.net/whqet/article/details/19234055
[Link 1]: http://codepen.io/whqet/pen/LcgDn
[SpriteSheet]: http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html
[Ticker]: http://createjs.com/Docs/EaselJS/classes/Ticker.html
[Link 2]: http://codepen.io/whqet/pen/uqCgJ
[whqet]: http://blog.csdn.net/whqet