canvas如何實(shí)現(xiàn)的骨骼動(dòng)畫(huà)

今天就跟大家聊聊有關(guān)canvas如何實(shí)現(xiàn)的骨骼動(dòng)畫(huà)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

關(guān)于骨骼動(dòng)畫(huà)最初是無(wú)意間在騰訊團(tuán)隊(duì)上看到的，但是由于他官網(wǎng)的教程是在是少之又少，也就僅有一個(gè)小demo供參考，官方下載的案例也很奇怪的運(yùn)行不出來(lái)，可能是我的操作不對(duì)，但是沒(méi)關(guān)系，就通過(guò)這個(gè)小demo了解一下這個(gè)很高大上的骨骼東動(dòng)畫(huà)吧，我也是剛接觸，了解的也不是很全面，還請(qǐng)見(jiàn)諒

在開(kāi)始之前，先來(lái)了解一下AlloyStick

官方介紹說(shuō)AlloyStick 是采用HTML5技術(shù)開(kāi)發(fā)的一個(gè)骨骼動(dòng)畫(huà)引擎，可以用于HTML5動(dòng)畫(huà)開(kāi)發(fā)、HTML5游戲開(kāi)發(fā)；AlloyStick 主要由骨骼動(dòng)畫(huà)引擎和骨骼動(dòng)畫(huà)編輯器兩部分組成，骨骼動(dòng)畫(huà)編輯器提供強(qiáng)大的骨骼動(dòng)畫(huà)編輯功能，通過(guò)設(shè)置動(dòng)畫(huà)關(guān)鍵幀，依靠強(qiáng)大的自動(dòng)補(bǔ)間和骨骼關(guān)系，就可以制作出逼真、生動(dòng)的Canvas骨骼動(dòng)畫(huà)，可以暢快的運(yùn)行在PC、手機(jī)、平板等設(shè)備里。嗯，說(shuō)的很輕松又很有吸引力

所謂的骨骼動(dòng)畫(huà)從字面意思來(lái)說(shuō)就是通過(guò)骨骼去繪制的動(dòng)畫(huà)，那么這里的骨骼是長(zhǎng)什么樣呢？

沒(méi)錯(cuò)，就是長(zhǎng)這樣的，也算是符合預(yù)想的吧，畢竟人家有和很強(qiáng)大的自動(dòng)補(bǔ)間功能，可以聯(lián)想一下每一部分都用很光滑的方式連接起來(lái)，有點(diǎn)像PS的羽化吧

既然是很強(qiáng)大的一個(gè)功能，肯定有人家自己獨(dú)特的優(yōu)勢(shì)

1. 動(dòng)畫(huà)更加的逼真，這是肯定的啊

2. 圖片占用的空間很小，這也能看出來(lái)，這個(gè)人只有頭，手和腿三部分組成

3. 過(guò)渡動(dòng)畫(huà)自動(dòng)補(bǔ)間，讓動(dòng)作更加靈活

4. 骨骼可控

5. 骨骼事件幀，動(dòng)畫(huà)直行待某個(gè)動(dòng)作或某個(gè)幀，觸發(fā)自定義事件行為

6. 動(dòng)作數(shù)據(jù)繼承，多角色可用一套動(dòng)畫(huà)數(shù)據(jù)

7. 可結(jié)合屋里引擎

8. 結(jié)合精靈圖動(dòng)畫(huà)制作混合動(dòng)畫(huà)

下面來(lái)開(kāi)始小demo

一個(gè)骨骼動(dòng)畫(huà)主要由3部分組成：骨骼數(shù)據(jù)、蒙皮數(shù)據(jù)、動(dòng)畫(huà)數(shù)據(jù)，有了這三部分?jǐn)?shù)據(jù)，就可以由AlloyStick渲染出生動(dòng)的骨骼動(dòng)畫(huà)了。這三部分?jǐn)?shù)據(jù)當(dāng)然不需要手動(dòng)生成，只需要在編輯器中操作，即可自動(dòng)生成。生成數(shù)據(jù)后，就可以向下面這樣調(diào)用執(zhí)行骨骼動(dòng)畫(huà)了，第一步引入alloysk.js，再加入資源resource.js。其中注意的是蒙皮png是以img標(biāo)簽引入，當(dāng)然也可js的方式加載。resource.js里面包括蒙皮數(shù)據(jù)，骨骼關(guān)系數(shù)據(jù)，和所有動(dòng)作數(shù)據(jù)包括動(dòng)畫(huà)名字和參數(shù)。第二步，根據(jù)資源文件new出舞臺(tái)對(duì)象Stage和角色對(duì)象Armature，Stage對(duì)象管理Armature對(duì)象。playTo方法時(shí)核心方法，讓角色播放不同動(dòng)作動(dòng)畫(huà)，你可以增加事件去切換不同動(dòng)作。最后啟動(dòng)舞臺(tái)stage.start().

// 第一步 還是要先搭建canvas
<canvas id="canvas" width="800px" height="600px">抱歉，你的瀏覽器不支持canvas，建議你使用Chrome瀏覽器</canvas>

// 第二步 以圖片形式或者js方式引入蒙皮資源
<img src="img/texture.png" id="xiaoxiaoImg" style="display:none;">

// 第三步 引入alloysk.js和resource.js
// 第四步 準(zhǔn)備工作
var canvas = document.getElementById('canvas')
var textureImg = document.getElementById('xiaoxiaoImg')
var scene = new alloyge.Scene(canvas.getContext('2d'))
var player = new alloysk.Armature('xiaoxiao',textureImg)
// 第五步 制作動(dòng)畫(huà)
// 動(dòng)作快慢 參數(shù)：動(dòng)作狀態(tài)，速度，初始速度，是否一直執(zhí)行，這里還可以設(shè)置其他動(dòng)作，比如翻滾 roll
// 更新了幾個(gè)動(dòng)作狀態(tài)：run 奔跑  roll 翻滾  simpleHit 右手扔?xùn)|西   secondHit  右手打拳
 //  jump_kick  側(cè)踢 comeon 挑釁   relax 放松  soap 撿肥皂
player.playTo('run',50,15,true);
// 動(dòng)畫(huà)位置
player.setPos(300,300); 

player.setEaseType(true);		
scene.addObj(player);
 // 啟動(dòng)FPS監(jiān)聽(tīng)器 (輔助功能 非必須)
alloyge.monitorFPS(scene);
// 開(kāi)始場(chǎng)景里的動(dòng)畫(huà)，并且可以傳入callback循環(huán)調(diào)用
// 最后一步 執(zhí)行動(dòng)畫(huà)
scene.start(); 
// 效果就是下面這樣奔跑的少年啦，原諒我還沒(méi)開(kāi)通做gif動(dòng)畫(huà)的大門(mén)……

由于是剛接觸，很多東西還不是很了解，有時(shí)間會(huì)在整理

看完上述內(nèi)容，你們對(duì)canvas如何實(shí)現(xiàn)的骨骼動(dòng)畫(huà)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。