马儿呀，你慢些走，我的html动画之旅
今天在看一篇动画片原理的文章，觉得我堂堂一个程序员，模拟个动画场景还不是妥妥的。虽然手绘不是我的强项，但把图片一张一张的连成动画，我比那些只能在纸上一张一张画的家伙还是要有办法的多，于是我翻出了我尘封多年的javascript技术，开始了我动画师之旅。
首先要有一张图，这张图把所有动作都画出来了才能弄出动画，于是就有了这张图
这种图怎么让它动起来呢，这时候 就要请出一个JavaScript工具了，easeljs，它就是一个可以做动画的工具，下面我们先看下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>horse</title>
</head>
<body>
<canvas id="mycanvas" width="500" height="280"></canvas>
<script type="text/javascript" src="js/easeljs.min.js"></script>
<script type="text/javascript">
var stage = new createjs.Stage("mycanvas")
createjs.Ticker.addEventListener("tick", stageBreakHandler);
var img = new Image()
img.src = "img/horse.png"
img.onload = function(){
var ss = new createjs.SpriteSheet({
"images": ["img/horse.png"],
"frames": [
[519,1352,468,225,0,-39.5,-6.05],
[525,694,405,225,0,-39.5,-6.05],
[402,1577,398,241,0,-37.5,-9.05],
[0,1565,402,239,0,-33.5,-8.05],
[521,920,430,233,0,-23.5,-14.05],
[520,0,465,228,0,-7.5,-22.05],
[515,238,479,228,0,-8.5,-24.05],
[508,470,500,224,0,-2.5,-26.05],
[0,470,508,231,0,-5.5,-20.05],
[0,238,515,232,0,-9.5,-17.05],
[0,0,520,238,0,-12.5,-11.05],
[0,920,521,219,0,-18.5,-11.05],
[0,701,525,219,0,-18.5,-11.05],
[0,1352,519,213,0,-28.5,-10.05],
[0,1139,520,213,0,-28.5,-10.05]
],
"animations" : {
"run": [0,14,"run",1]
}
})
var sp = new createjs.Sprite(ss,"run")
stage.addChild(sp)
stage.update();
}
function stageBreakHandler(event){
stage.update();
}
</script>
</body>
</html>里面有几个关键点说一下：
createjs.Ticker.addEventListener("tick", stageBreakHandler);Ticker是一个动画的钩子程序，它可以加监听器，每且一帧画面就会通知一次监听器，我们这边加的监听器就是stageBreakHandler，我们再来看stageBreakHandler的代码：
function stageBreakHandler(event){
stage.update();
}很简单，stage就是html上的canvas被easeljs包装了一下，变成了一个动画演出的舞台（stage），这里就是每次动画切换一帧就是更新一下canvas，刷出新的一帧动画。
然后就是针对这张跑马图的切割啦：
"images": ["img/horse.png"],
"frames": [
[519,1352,468,225,0,-39.5,-6.05],frames里面是7个数字参数，分别代表的意思是
1-4的参数：x（横坐标）, y（纵坐标）, width（切割图宽度）, height（切割图高度），四个参数就是一帧马的图片了，对照的图样是这样的
这是整个图的坐标，到细节部分是这样的
x是985，y是1352，宽度是468，高度是255，这是我用ps的参考线切出来的，一个会用ps的人能把示意图画的这么难看就问你服不服。
第5个参数代表的是第几张图，代码中"images": ["img/horse.png"],images是复数，表明可以一次导入多张图，这个参数就是表明这个切图是从哪张图里面去切，我们这边只有一张horse.png，所以这个值都是0
6-7这两个参数是图片放在stage的位置坐标点，左上角的坐标是原点（0，0）。
我们看这7个参数的数据一共有15组，马的帧数也一共是15个，正好一一对应。
下面我们再看怎么动起来的部分：
"animations" : {
"run": [0,14,"run",1]
}run的四个参数分别代表，开始帧，结束帧，下一帧连到哪，速度。我们这边一共15帧，所以是0到14，我们并没有其他需要的切到第二场的动画，所以每一帧都是在run里面，最后这个代表速度，数值越高，跑的越快，想跑的慢，用小数就好了。
1倍速
0.1倍速
3倍速
这三段分别是用1,0.1和3 调速后的效果。
番外篇
我要看到的是马儿跑，不是马儿在原地跑，所以我做了些改动，让马儿可以从右跑到左，这才是真的马儿跑嘛。
首先修改stage的大小。因为stage其实就是canvas，所以我们改动的是这段：
<canvas id="mycanvas" width="1500" height="280"></canvas>把width改宽到1500
然后需要修改的就是动画的移动了，之前动画都是原地跑，所以前面7个一组的参数第六个代表的x轴移动只是少量移动，代表马头的起伏，但我们要跑起来，就要把 X轴的位置拉大，我这里是每一帧移动100个像素，所以代码改动是这样的：
"frames": [
[519,1352,468,225,0,-1539.5,-6.05],
[525,694,405,225,0,-1439.5,-6.05],
[402,1577,398,241,0,-1337.5,-9.05],
[0,1565,402,239,0,-1233.5,-8.05],
[521,920,430,233,0,-1123.5,-14.05],
[520,0,465,228,0,-907.5,-22.05],
[515,238,479,228,0,-808.5,-24.05],
[508,470,500,224,0,-702.5,-26.05],
[0,470,508,231,0,-605.5,-20.05],
[0,238,515,232,0,-509.5,-17.05],
[0,0,520,238,0,-412.5,-11.05],
[0,920,521,219,0,-318.5,-11.05],
[0,701,525,219,0,-218.5,-11.05],
[0,1352,519,213,0,-128.5,-10.05],
[0,1139,520,213,0,-28.5,-10.05]
],主要看每一行的第六个参数，都是100递减的，这样再看，效果是这样的，完美。
当然，easeljs是很强大的，可挖掘的部分不少，探索动画的奥秘就靠大家了，上吧，少年！
推荐阅读