动画师之旅，用javascript让马儿跑起来

时间 2019-11-05

原文原文链接

今天在看一篇动画片原理的文章，以为我堂堂一个程序员，模拟个动画场景还不是妥妥的。虽然手绘不是个人强项，但把图片一张一张的连成动画，我比那些只能在纸上一张一张画的家伙仍是要有办法的多，因而我翻出了我尘封多年的javascript技术，开始了我动画师之旅。javascript

首先要有一张图，这张图把全部动做都画出来了才能弄出动画，因而就有了这张图html

这种图怎么让它动起来呢，这时候就要请出一个JavaScript工具了，easeljs，它就是一个能够作动画的工具，下面咱们先看下代码：java

<!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>

里面有几个关键点说一下：git

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

Ticker是一个动画的钩子程序，它能够加监听器，每且一帧画面就会通知一次监听器，咱们这边加的监听器就是stageBreakHandler，咱们再来看stageBreakHandler的代码：程序员

function stageBreakHandler(event){
	stage.update();
}

很简单，stage就是html上的canvas被easeljs包装了一下，变成了一个动画演出的舞台（stage），这里就是每次动画切换一帧就是更新一下canvas，刷出新的一帧动画。canvas

而后就是针对这张跑马图的切割啦：工具

"images": ["img/horse.png"], 
		"frames": [
			[519,1352,468,225,0,-39.5,-6.05],

frames里面是7个数字参数，分别表明的意思是动画

1-4的参数：x（横坐标）, y（纵坐标）, width（切割图宽度）, height（切割图高度），四个参数就是一帧马的图片了，对照的图样是这样的ui

这是整个图的坐标，到细节部分是这样的spa

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 调速后的效果。

番外篇

我要看到的是马儿跑，不是马儿在原地跑，因此我作了些改动，让马儿能够从右跑到左，这才是真的马儿跑嘛。

首先修改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是很强大的，可挖掘的部分很多，探索动画的奥秘就靠你们了，上吧，少年！

源代码地址