马儿呀，你慢些走，我的html动画之旅

最新推荐文章于 2021-08-26 00:30:29 发布

wphmoon123

最新推荐文章于 2021-08-26 00:30:29 发布

阅读量210

点赞数

分类专栏：前端文章标签： html javascript 动画

本文链接：https://blog.csdn.net/firebat/article/details/90703070

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天在看一篇动画片原理的文章，觉得我堂堂一个程序员，模拟个动画场景还不是妥妥的。虽然手绘不是我的强项，但把图片一张一张的连成动画，我比那些只能在纸上一张一张画的家伙还是要有办法的多，于是我翻出了我尘封多年的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是很强大的，可挖掘的部分不少，探索动画的奥秘就靠大家了，上吧，少年！

源代码地址

wphmoon123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
马儿呀，你慢些走，我的html动画之旅

今天在看一篇动画片原理的文章，觉得我堂堂一个程序员，模拟个动画场景还不是妥妥的。虽然手绘不是我的强项，但把图片一张一张的连成动画，我比那些只能在纸上一张一张画的家伙还是要有办法的多，于是我翻出了我尘封多年的javascript技术，开始了我动画师之旅。首先要有一张图，这张图把所有动作都画出来了才能弄出动画，于是就有了这张图这种图怎么让它动起来呢，这时候就要请出一个Java...
复制链接

扫一扫

专栏目录