• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當前位置: 首頁 - 科技 - 知識百科 - 正文

    canvas實現的骨骼動畫

    來源:懂視網 責編:小采 時間:2020-11-27 15:05:14
    文檔

    canvas實現的骨骼動畫

    canvas實現的骨骼動畫:這篇文章主要介紹了基于canvas的骨骼動畫的示例代碼的相關資料,內容挺不錯的,現在分享給大家,也給大家做個參考。最近學習到了一種關于canvas的骨骼動畫,聽這個名字就知道他和canvas之前的動畫不同,不知道你有沒有興趣了解一下呢?關于骨骼動畫最初是無意
    推薦度:
    導讀canvas實現的骨骼動畫:這篇文章主要介紹了基于canvas的骨骼動畫的示例代碼的相關資料,內容挺不錯的,現在分享給大家,也給大家做個參考。最近學習到了一種關于canvas的骨骼動畫,聽這個名字就知道他和canvas之前的動畫不同,不知道你有沒有興趣了解一下呢?關于骨骼動畫最初是無意
    這篇文章主要介紹了基于canvas的骨骼動畫的示例代碼的相關資料,內容挺不錯的,現在分享給大家,也給大家做個參考。

    最近學習到了一種關于canvas的骨骼動畫,聽這個名字就知道他和canvas之前的動畫不同,不知道你有沒有興趣了解一下呢?

    關于骨骼動畫最初是無意間在騰訊團隊上看到的,但是由于他官網的教程是在是少之又少,也就僅有一個小demo供參考,官方下載的案例也很奇怪的運行不出來,可能是我的操作不對,但是沒關系,就通過這個小demo了解一下這個很高大上的骨骼東動畫吧,我也是剛接觸,了解的也不是很全面,還請見諒

    在開始之前,先來了解一下AlloyStick

    官方介紹說AlloyStick 是采用HTML5技術開發的一個骨骼動畫引擎,可以用于HTML5動畫開發、HTML5游戲開發;AlloyStick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成,骨骼動畫編輯器提供強大的骨骼動畫編輯功能,通過設置動畫關鍵幀,依靠強大的自動補間和骨骼關系,就可以制作出逼真、生動的Canvas骨骼動畫,可以暢快的運行在PC、手機、平板等設備里。嗯,說的很輕松又很有吸引力

    所謂的骨骼動畫從字面意思來說就是通過骨骼去繪制的動畫,那么這里的骨骼是長什么樣呢?

    沒錯,就是長這樣的,也算是符合預想的吧,畢竟人家有和很強大的自動補間功能,可以聯想一下每一部分都用很光滑的方式連接起來,有點像PS的羽化吧

    既然是很強大的一個功能,肯定有人家自己獨特的優勢

    1. 動畫更加的逼真,這是肯定的啊

    2. 圖片占用的空間很小,這也能看出來,這個人只有頭,手和腿三部分組成

    3. 過渡動畫自動補間,讓動作更加靈活

    4. 骨骼可控

    5. 骨骼事件幀,動畫直行待某個動作或某個幀,觸發自定義事件行為

    6. 動作數據繼承,多角色可用一套動畫數據

    7. 可結合屋里引擎

    8. 結合精靈圖動畫制作混合動畫

    下面來開始小demo

    一個骨骼動畫主要由3部分組成:骨骼數據、蒙皮數據、動畫數據,有了這三部分數據,就可以由AlloyStick渲染出生動的骨骼動畫了。這三部分數據當然不需要手動生成,只需要在編輯器中操作,即可自動生成。生成數據后,就可以向下面這樣調用執行骨骼動畫了,第一步引入alloysk.js,再加入資源resource.js。其中注意的是蒙皮png是以img標簽引入,當然也可js的方式加載。resource.js里面包括蒙皮數據,骨骼關系數據,和所有動作數據包括動畫名字和參數。第二步,根據資源文件new出舞臺對象Stage和角色對象Armature,Stage對象管理Armature對象。playTo方法時核心方法,讓角色播放不同動作動畫,你可以增加事件去切換不同動作。最后啟動舞臺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
    // 第四步 準備工作
    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)
    // 第五步 制作動畫
    // 動作快慢 參數:動作狀態,速度,初始速度,是否一直執行,這里還可以設置其他動作,比如翻滾 roll
    // 更新了幾個動作狀態:run 奔跑 roll 翻滾 simpleHit 右手扔東西 secondHit 右手打拳
     // jump_kick 側踢 comeon 挑釁 relax 放松 soap 撿肥皂
    player.playTo('run',50,15,true);
    // 動畫位置
    player.setPos(300,300); 
    
    player.setEaseType(true);	
    scene.addObj(player);
     // 啟動FPS監聽器 (輔助功能 非必須)
    alloyge.monitorFPS(scene);
    // 開始場景里的動畫,并且可以傳入callback循環調用
    // 最后一步 執行動畫
    scene.start(); 
    // 效果就是下面這樣奔跑的少年啦,原諒我還沒開通做gif動畫的大門……

    由于是剛接觸,很多東西還不是很了解,有時間會在整理

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    canvas實現的骨骼動畫

    canvas實現的骨骼動畫:這篇文章主要介紹了基于canvas的骨骼動畫的示例代碼的相關資料,內容挺不錯的,現在分享給大家,也給大家做個參考。最近學習到了一種關于canvas的骨骼動畫,聽這個名字就知道他和canvas之前的動畫不同,不知道你有沒有興趣了解一下呢?關于骨骼動畫最初是無意
    推薦度:
    標簽: 骨骼 動畫 實現
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 精品国产一级在线观看| 欧美日韩成人精品久久久免费看 | 国内精品久久久久久99蜜桃| 国产精品伊人久久伊人电影| 99免费精品视频| 久久亚洲精精品中文字幕| 人妻VA精品VA欧美VA| 亚洲日韩精品欧美一区二区| 91老司机深夜福利精品视频在线观看 | 2024最新国产精品一区| 国产精品乱码高清在线观看| 亚洲精品乱码久久久久久按摩| 久久久久久久久久久免费精品| 国产高清在线精品一区小说 | 尤物国精品午夜福利视频| 久久精品国产欧美日韩| 999久久久免费国产精品播放| 99久久精品国产高清一区二区| 欧洲精品久久久av无码电影| 欧美精品色精品一区二区三区| 国产精品久久久99| 精品久久久久久无码中文字幕一区| 国产精品一区二区不卡| 欧洲成人午夜精品无码区久久 | 成人精品一区二区三区中文字幕| 亚洲动漫精品无码av天堂| 在线精品国产一区二区三区| 麻豆精品| 欧美日韩精品一区二区视频 | 亚洲精品无码AV人在线播放| 无码精品久久一区二区三区| 欧美日韩在线精品一区二区三区激情综合 | 精品综合久久久久久88小说| 国产精品亚洲视频| 国产精品一级毛片无码视频| 精品91自产拍在线观看二区| 精品国产午夜肉伦伦影院| 精品亚洲视频在线观看| 欧美精品黑人粗大| 亚洲AV无码成人精品区天堂 | 欧美日韩国产中文精品字幕自在自线 |