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