CreateJs-EaselJS精灵Sprite类和简明动画

一、EaselJS中Sprite类

   EaselJS精灵Sprite类是用spritesheet实例显示一个帧或帧序列（即动画）。精灵片是一系列的图像（通常是动画帧）合并成一个单一的图像。例如，一个动画由8个100x100图像可以组合成一个400X200精灵表。

sprite结构：

Sprite ( spriteSheet  frameOrAnimation )

参数:

spritesheet，这包括源图像，帧的尺寸，和帧数据。

[frameOrAnimation] String | Number optional

最初播放的帧数或动画。

实例：

// 实例化  createjs.Sprite类，传入精灵spriteSheet参数

var instance = new createjs.Sprite(spriteSheet);

// 使用gotoAndPlay和gotoAndStop方法开启和结束动画

instance.gotoAndPlay("frameName");

instance.gotoAndStop("frameName");

重点：gotoAndPlay()和gotoAndStop()这两个方法很重要，就是唤起和结束精灵帧动画的方法。

二、EaselJS中Ticker类动画机制

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

通常来说动画分为两种：逐帧动画和补间动画

1.逐帧动画

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

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

关键帧：

var data = {

   images: ["images/runningGrant.png"],

   frames: {width:50, height:50},

   animations: {run:[0,4], jump:[5,8,"run"]}

};

var spriteSheet = new createjs.SpriteSheet(data);

var animation = new createjs.Sprite(spriteSheet, "run");

“动画”机制：

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

createjs.Ticker.addEventListener("tick", tick); 

function tick(evt) { 

  //some code

}

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

逐帧小demo：

扫码欣赏：

2.补间动画

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

三、实例代码

下面就让我们来做一个完整的实例吧!

1. 创建Sprite类，传入精灵spriteSheet参数
2. 逐帧动画，奔跑的小人
3. 补间动画，让刚刚那个原地跑步的人，向前方跑动，单击时表示跳起
4. 再加上控制小人是否运动的按钮

html结构：

  <canvas id='canvas' width="750" height="1334">您的浏览器不支持canvas，请使用现代浏览器。</canvas>

  <input value="暂停pause" id='btn' type="button">

CSS样式：

  #canvas{background: #ffffff;}

  #btn{width: 80px;height: 40px; margin-left: 440px;position: absolute;bottom: 5%;left: 50%;margin-left: -40px; border: none; border-radius: 5px;background: #ccc;}

JS：

引入easeljs文件

注意：为了保证更好的运行速度，请使用EaselJS 0.7.0及以上的版本。

   var w = document.documentElement.clientWidth,

      h = document.documentElement.clientHeight;

   var  stage=new createjs.Stage("canvas"),

        container=new createjs.Container(),

        // 定义SpriteSheet 参数

        data={

        /*定义动画*/

        "animations":{

           // start, end, next, speed

           "run": [0, 25, "run",1.5],

           //start,end,next,speed开始帧，结束帧，下一个动作，运行速度

           "jump": [26, 63, "run",1.5]

        },

        /*定义图像路径,使用图像或图像的url列表*/

        "images": ["images/runningGrant.png"],

        /*定义框架:

        简单的方法来定义框架,只需要连续帧大小（框架的大小就是单个帧的图片大小）*/

        "frames":{

            //单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小

           "height": 292.5,

           "width":165.75,

           //相对于原始偏移的位置

           "regX": 0,

           "regY": 0,

           //帧数

           "count": 64

        }

        };

      //适配用

      stage.canvas.width = w;;

      stage.canvas.height = h;

      //实例精灵动画集

      var move = new createjs.SpriteSheet(data);

      //SpriteSheet类设置帧和动画,里面的run为开始的动画

      var grant = new createjs.Sprite(move,"run");

        //设置在舞台中的位置

         grant.x=20;

         grant.y=120;

      // 把动画放到舞台上，创建一个间隔事件侦听，进行动画 

      container.addChild(grant);

      stage.addChild(container);

      createjs.Ticker.setFPS(20);

      createjs.Ticker.addEventListener("tick",tick);

      //speed用来做加速度

      var speed=1;

      function tick(){

        if(!createjs.Ticker.getPaused()){

           grant.x+=3*speed;

           stage.update(); //更新舞台

           speed+=.01;

           (grant.x>stage.canvas.width) && (grant.x=0,speed=1)

        }

      }

      //侦听鼠标事件

      stage.addEventListener("stagemousedown",handleClick);

      function handleClick(){

        grant.gotoAndPlay("jump");

      }

      //设置按钮暂停

      var btn=document.getElementById("btn");

      btn.addEventListener("click",togglePause);

      function togglePause(){

          //grant.gotoAndStop();

          //其实实现暂停和运动就是false和true切换

          var paused = !createjs.Ticker.getPaused();

          createjs.Ticker.setPaused(paused);

          btn.value = paused ? "运动play" : "暂停pause";

      }

      stage.update(); //更新舞台

DEMO演示：