2. 程式人生 > >動畫師之旅，用javascript讓馬兒跑起來

動畫師之旅，用javascript讓馬兒跑起來

阿新 • • 發佈：2019-05-31

    今天在看一篇動畫片原理的文章，覺得我堂堂一個程式設計師，模擬個動畫場景還不是妥妥的。雖然手繪不是我的強項，但把圖片一張一張的連成動畫，我比那些只能在紙上一張一張畫的傢伙還是要有辦法的多，於是我翻出了我塵封多年的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 調速後的效果。

番外篇

我要看到的是馬兒跑，不是馬兒在原地跑，所以我做了些改動，讓馬兒可以從右跑到左，這才是真的馬兒跑嘛。

首先修改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是很強大的，可挖掘的部分不少，探索動畫的奧祕就靠大家了，上吧，少年！

相關推薦

動畫師之旅，用javascript讓馬兒跑起來

    今天在看一篇動畫片原理的文章，覺得我堂堂一個程式設計師，模擬個動畫場景還不是妥妥的。雖然手繪不是我的強

facenet採坑之旅，主要記錄一些用facenet過程中遇到的大大小小的問題

問題1：Unable to run align_dataset_mtcnn.py getting an attribute error module ‘facenet’ has no attribute ‘store_revision_info’ 使用anaconda的環境，將facen

【上海站】 EOLINKER 用戶培訓之旅，等你來共建API新連接

size 1.5 圖片 技術人 人員 預約 api 開啟 ima 從今年3月4日起，EOLINKER AMS?團隊將再次開啟全國用戶培訓之旅。本次全國培訓之旅依舊將覆蓋北上廣深等國內主要城市，重點提供兩種服務內容，一是 對?EOLINKER?產品的交流，包括?API?管理

python之uinttest，用例執行順序

單元測試框架 構建 mage es2017 但是 images testsuite 順序執行 python unittest單元測試框架， 以test開頭的測試用例，默認執行順序是按照ASC碼來執行 如果有類，先排序執行類，在執行類中，再排序用例順序執行 如果想要按照指

取之開源，用之開源-深度剖析阿里巴巴對Flink的優化與改進

作者 | 阿里巴巴實時計算團隊 導讀：隨著人工智慧時代的降臨，資料量的爆發，阿里巴巴的商品資料處理就經常需要面對增量和全量兩套不同的業務流程問題，所以阿里巴巴就在想：能不能有一套統一的大資料引擎技術，使用者只需要根據自己的業務邏輯開發一套程式碼。這樣在各種不同的場景下，不管是全量資料還是增量資料，亦或者實時處

向前之旅，vuex的安裝！

vue全家桶——vuex。 可在package.json的dependencies 中輸入 如下 然後可以在自己的編輯器（本人用的是webstorm）的terminal中輸入 npm install （如果沒有上述步奏，可直接 npm install --s

【微信小程式控制硬體②】 開始微信小程式之旅，匯入小程式Mqtt客戶端原始碼，實現簡單的驗證和通訊於伺服器！（附帶原始碼）

本博文由熱愛分享熱愛技術的半顆心臟原創，非官方人員、非組織名義編寫，博文如有不對或侵犯您的權益，請及時留言，第一時間糾正！ 一、前言； 繼續我們的小程式控制智慧硬體（包括esp8266）學

docker之旅，從入門到放棄

前言（廢話）：花了3天時間, 才認識了docker這個神器, 並且成功地將專案部署到容器裡面, 但不知道為什麼docker.hub不能註冊, 所以無法上傳映象, 所以現在先記錄docker從安裝到部署專案的過程; 0#：開始前附上參考文件 1 ：什麼

一條資料的HBase之旅，簡明HBase入門教程-開篇

一些常見的HBase新手問題什麼樣的資料適合用HBase來儲存？既然HBase也是一個數據庫，能否用它將現有系統中昂貴的Oracle替換掉？存放於HBase中的資料記錄，為何不直接存放於HDFS之上？能否直接使用HBase來儲存檔案資料？Region(HBase中的資料分片)遷移後，資料是否也會被遷移？為何基

canvas畫布儲存圖片，avaScript將圖片轉畫布，用JavaScript將畫布保持成圖片格式，上傳阿里雲

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

avaScript將圖片轉畫布，用JavaScript將畫布保持成圖片格式

使用JavaScript將圖片拷貝進畫布 要想將圖片放入畫布裡，我們使用canvas元素的drawImage方法： // Converts image to canvas; returns new canvas element function convertImageToCanvas(im

PHP之spl，用最簡單的方式教你使用

一、什麼是spl標準庫呢？ 引官方的一段解釋：SPL是用於解決典型問題(standard problems)的一組介面與類的集合。 對許多phper來說，這個東西估計很多人並不熟悉，在平時的開發初級開發者並用不到，或者用到了也不知道。在重溫資料結構的時候，我就在想，PHP

一條資料的HBase之旅，簡明HBase入門教程-Read全流程

這是《一條資料的HBase之旅》系列文章的第4篇，介紹HBase Get&Scan的核心思路。 系列文章 在閱讀此文之前，希望你已經讀過本系列文章的前3篇內容： 本文思路 介紹HBase的兩種讀取模式：Get與Scan 如何發起一次Get請求，Get有哪些關鍵引數 如何發

一條資料的HBase之旅，簡明HBase入門教程-Flush與Compaction

Flush與Compaction其實屬於Write流程的繼續，所以本文應該稱之為”Write後傳“。在2.0版本中，最主要的變化就是新增了In-memory Flush/Compaction，而DateTieredCompaction並不算2.0新加入的特性，2.0版本在Compaction核心演

2015菜鳥學飛之旅，2016我要飛得更高

看到標題的猿友應該都覺得博主應該有點小天真，沒錯！博主就是2015本科畢業生一枚！14年12月份開始，先後在兩家公司實習4個月、2個月，6月份拿到畢業生正式入職，至今博主工作已有一年了，博主是Java開發的。一年裡，收穫許多，讓我十分慶幸的是開始認真在csdn寫

一名Java大佬跳槽之旅，離開京東，14面面試經驗和收穫

2019年，打算離開京東，換個地方，然後開始了跳槽之旅。 先和boss們打了招呼，然後請假專心面試，2周內請假了6天左右時間，敲

git之旅，暢遊git的世界

今天小銘醬帶大家探索一下git的奧祕！ 1.初步探索 首先我在一個空的資料夾新建了一個名叫hello.html檔案，檔案內容只有一句話“hello git”。我們先引入git，看看git能為我們它能幹什麼，嘻嘻~ 1) git init 初始化後，在當前目錄下會出現一個名為 .git 的目錄，所有 G

Python學習之旅：用Python製作一個打字訓練小工具

一、寫在前面 　　說道程式設計師，你會想到什麼呢？有人認為程式設計師象徵著高薪，有人認為程式設計師都是死肥宅，還有人想到的則是996和 ICU。 　　 　　別人眼中的程式設計師：飛快的敲擊鍵盤、酷炫的切換螢幕、各種看不懂的字元程式碼。 　　然而現實中的程式設計師呢？對於很多程式設計師來說，沒有百度和

MySQL的修仙者之旅，不來看看你的修為如何嗎？

#### 目錄 因為我個人比較喜歡看修仙類的小說，所以本文的主體部分借用修仙者的修為等級，將學習旅程劃分成：練氣、築基、結丹、元嬰、化神、飛昇六個段位，你可以看下你大概在哪個段位上哦！ 本文目錄： - 我為什麼要寫這篇文章 - 都這麼捲了，是時候好好學MySQL了！ - 勾勒腦圖 - 練氣期 - 築基期

當我在說下一篇的時候，我在說什麼（一個7年程式設計師的2020之旅，已上岸騰訊，歡迎找我內推）

# 標題緣起 大家可能都發現了，有時候標題不好起，因為近些年，資訊實在是太多了，資訊爆炸，讓人眼花繚亂，所以很多“無良”博主就可以在起名字上下功夫，當然了，我這裡的無良加了引號，因為有的文章那是真的和標題一樣譁眾取寵，比如很多點進去說了不到100字你就意識到是廣告的；而有的文章內容確實是不錯的，標題起得炸一點