動畫師之旅，用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是很強大的，可挖掘的部分很多，探索動畫的奧祕就靠你們了，上吧，少年！

源代碼地址