집 > 기사 > 웹 프론트엔드 > 캔버스에 구현된 뼈대 애니메이션

캔버스에 구현된 뼈대 애니메이션

不言원래의: 2018-06-12 16:58:363072검색

이 글은 주로 캔버스 기반 뼈대 애니메이션의 샘플 코드에 대한 관련 정보를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

최근에 캔버스 위의 뼈대 애니메이션에 대해 알게 되었어요. 이름에서 알 수 있듯이 이전 캔버스 위의 애니메이션과 다른 점이 있으니 알아보시겠어요?

스켈레탈 애니메이션에 관해서는 텐센트 팀에서 우연히 처음 봤는데, 공식 홈페이지에 튜토리얼이 거의 없어서 참고할만한 작은 데모만 있고, 정식으로 다운로드한 케이스도 없으면 아주 이상하게 실행됩니다. 나오지 마세요. 제 작업이 잘못되었을 수도 있지만 문제가 되지 않습니다. 이 작은 데모를 통해 이 매우 진보된 뼈대 애니메이션에 대해 알아봅시다. 저도 처음이라 이해가 부족합니다

. 처음에, AlloyStick에 대해 알아봅시다

공식 소개에 따르면 AlloyStick은 HTML5 기술을 사용하여 개발된 골격 애니메이션 엔진이며 HTML5 애니메이션 개발과 HTML5 게임 개발에 사용할 수 있습니다. 골격 애니메이션 엔진 및 골격 애니메이션 편집기는 강력한 골격 애니메이션 편집 기능을 제공하며 애니메이션 키프레임을 설정하고 강력한 자동 트위닝 및 골격 관계를 사용하여 원활하게 실행될 수 있는 현실적이고 생생한 Canvas 골격 애니메이션을 만들 수 있습니다. PC, 휴대폰, 태블릿 및 기타 장치. 뭐, 말은 쉽지만 매력적이네요

골격 애니메이션은 말 그대로 뼈를 통해 그리는 애니메이션을 의미합니다. 그렇다면 여기의 뼈는 어떤 모습일까요?

그렇습니다. 그래도 기대에 부합합니다. 결국 매우 강력한 자동 트위닝 기능이 있다고 생각하면 됩니다. 페더링과 비슷해요

굉장히 강력한 기능이니까 나름의 장점을 가진 사람이 분명 있을 거에요

애니메이션이 더 현실적이라는 건 확실해요
사진이 공간을 거의 차지하지 않아요. 볼 수도 있습니다. 이 사람은 머리, 손, 다리 세 부분으로만 구성되어 있습니다
전환 애니메이션이 자동으로 트위닝되어 움직임이 더욱 유연해집니다
뼈대 제어 가능
뼈 이벤트 프레임, 애니메이션이 진행됩니다. 특정 액션이나 프레임을 바로 기다리며 사용자 정의 이벤트 동작을 트리거합니다.
액션 데이터 상속, 여러 캐릭터가 애니메이션 데이터 세트를 사용할 수 있습니다.
하우스 엔진과 결합 가능
스프라이트 애니메이션과 결합하여 하이브리드 애니메이션 만들기

작은 데모를 시작하겠습니다

골격 애니메이션은 주로 골격 데이터, 스키닝 데이터, 애니메이션 데이터의 세 부분으로 구성됩니다. 이 세 부분의 데이터를 사용하여 AlloyStick은 생생한 골격 애니메이션을 렌더링할 수 있습니다. 물론, 이 세 가지 데이터 부분은 수동으로 생성할 필요가 없으며 편집기에서 조작하기만 하면 자동으로 생성됩니다. 데이터를 생성한 후 다음과 같이 골격 애니메이션을 호출하고 실행할 수 있습니다. 첫 번째 단계는 Alloysk.js를 도입한 다음 리소스 Resource.js를 추가하는 것입니다. skinned png는 img 태그와 함께 도입되며 물론 js에서도 로드될 수 있다는 점에 유의해야 합니다. resources.js에는 스키닝 데이터, 뼈대 관계 데이터, 애니메이션 이름과 매개변수를 포함한 모든 액션 데이터가 포함되어 있습니다. 두 번째 단계에서는 새로운 리소스 파일에 따라 스테이지 객체인 Stage와 역할 객체인 Armature가 생성되고, Stage 객체는 Armature 객체를 관리한다. playTo 메소드는 캐릭터가 다양한 액션 애니메이션을 재생할 수 있도록 하는 핵심 메소드입니다. 이벤트를 추가하여 다양한 액션 간에 전환할 수 있습니다. 드디어 무대를 시작합니다.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(&#39;canvas&#39;)
var textureImg = document.getElementById(&#39;xiaoxiaoImg&#39;)
var scene = new alloyge.Scene(canvas.getContext(&#39;2d&#39;))
var player = new alloysk.Armature(&#39;xiaoxiao&#39;,textureImg)
// 第五步 制作动画
// 动作快慢 参数：动作状态，速度，初始速度，是否一直执行，这里还可以设置其他动作，比如翻滚 roll
// 更新了几个动作状态：run 奔跑  roll 翻滚  simpleHit 右手扔东西   secondHit  右手打拳
 //  jump_kick  侧踢 comeon 挑衅   relax 放松  soap 捡肥皂
player.playTo(&#39;run&#39;,50,15,true);
// 动画位置
player.setPos(300,300); 

player.setEaseType(true);		
scene.addObj(player);
 // 启动FPS监听器 (辅助功能 非必须)
alloyge.monitorFPS(scene);
// 开始场景里的动画，并且可以传入callback循环调用
// 最后一步 执行动画
scene.start(); 
// 效果就是下面这样奔跑的少年啦，原谅我还没开通做gif动画的大门……

이게 처음이라 아직은 잘 모르는게 많아서, 시간 나면 정리하겠습니다

그렇습니다. 이 글의 전체 내용이 여러분의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목해 주세요!

캔버스에 구현된 뼈대 애니메이션

관련 기사