최근 캔버스의 뼈대 애니메이션에 대해 알아보았습니다. 이름에서 알 수 있듯이 이전의 캔버스 애니메이션과 다른 점이 있습니다.
뼈대 애니메이션에 관해서는 Tencent 팀에서 우연히 처음 봤지만 공식 웹 사이트에 튜토리얼이 거의 없기 때문에 참고용으로 작은 데모만 있고 공식적으로 다운로드한 사례는 이상하게 실행이 되지 않습니다. 틀렸지만 상관없습니다. 이 작은 데모를 통해 이 매우 진보된 뼈대 애니메이션에 대해 알아봅시다. 저도 처음 접해서 이해가 부족합니다.
시작하기 전에 AlloyStick에 대해 알아보겠습니다.공식 소개에 따르면 AlloyStick은 HTML5 기술을 사용하여 개발된 골격 애니메이션 엔진이며 HTML5 애니메이션 개발 및 HTML5 게임 개발에 사용할 수 있습니다. AlloyStick은 주로 골격 애니메이션 엔진과 골격 애니메이션 편집기로 구성되어 강력한 골격 애니메이션을 제공합니다. 애니메이션 편집 기능을 사용하면 애니메이션 키 프레임을 설정하고 강력한 자동 트위닝 및 골격 관계를 활용하여 PC, 휴대폰, 태블릿 및 기타 장치에서 원활하게 실행할 수 있는 사실적이고 생생한 Canvas 골격 애니메이션을 만들 수 있습니다. 글쎄, 말하기 쉽고 매우 매력적입니다.
소위 골격 애니메이션은 문자 그대로 뼈를 통해 그려진 애니메이션을 의미합니다. 그렇다면 여기의 뼈는 어떻게 생겼을까요?
네, 이렇게 보여도 기대에 딱 맞습니다. 결국 매우 강력한 자동 트위닝 기능을 가지고 있습니다. PS 페더링처럼 모든 부분이 아주 매끄럽게 연결되어 있다고 생각하시면 됩니다.
매우 강력한 기능이기 때문에 고유한 장점이 있어야 합니다.
아래에서 작은 데모를 시작해 보겠습니다.
골격 애니메이션은 크게 골격 데이터, 스키닝 데이터, 애니메이션 데이터의 세 부분으로 구성됩니다. 이 세 부분의 데이터를 통해 AlloyStick은 생생한 골격 애니메이션을 렌더링할 수 있습니다. 물론, 이 세 가지 데이터 부분은 수동으로 생성할 필요가 없으며 편집기에서 조작하기만 하면 자동으로 생성됩니다. 데이터가 생성된 후 다음과 같이 골격 애니메이션을 호출하고 실행할 수 있습니다. 첫 번째 단계는 Alloysk.js를 도입한 다음 리소스 Resource.js를 추가하는 것입니다. skinned png는 img 태그와 함께 도입되며 물론 js에서도 로드될 수 있다는 점에 유의해야 합니다. resources.js에는 스키닝 데이터, 뼈대 관계 데이터, 애니메이션 이름과 매개변수를 포함한 모든 액션 데이터가 포함되어 있습니다. 두 번째 단계에서는 새로운 리소스 파일에 따라 스테이지 객체인 Stage와 역할 객체인 Armature가 생성되고, Stage 객체는 Armature 객체를 관리한다. playTo 메소드는 캐릭터가 다양한 액션 애니메이션을 재생할 수 있도록 하는 핵심 메소드입니다. 이벤트를 추가하여 다양한 액션 간에 전환할 수 있습니다. 마지막으로 stage.start()를 시작합니다.
// 첫 번째 단계는 캔버스를 빌드하는 것입니다. <canvas id=canvas width=800px height=600px> 죄송합니다. 귀하의 브라우저는 캔버스를 지원하지 않습니다. Chrome 브라우저를 사용하는 것이 좋습니다.</canvas>
// 두 번째 단계는 사진이나 js 형식의 스킨 리소스를 소개하는 것입니다. <img src=img/texture.png id=xiaoxiaoImg style=display:none;>
// 세 번째 단계에서는 Alloysk.js 및 Resource.js를 소개합니다. // 네 번째 단계는 준비입니다. var canvas = document.getElementById('canvas')var textImg = document.getElementById('xiaoxiaoImg')var scene = new Alloyge.Scene( canvas.getContext('2d'))var player = new Alloysk.Armature('xiaoxiao',textureImg)//다섯 번째 단계는 애니메이션을 생성하는 것입니다// 동작 속도 매개변수: 동작 상태, 속도, 초기 속도, 항상 실행 여부 여기에서 롤 롤과 같은 다른 동작을 설정할 수도 있습니다.// 여러 동작 상태 업데이트됨: 실행 실행 롤 롤 단순 히트 오른손으로 무언가 던지기 secondHit 펀치 오른손 // Jump_kick 사이드 킥 Comeon Provoke Relax Relax Soap Pick Up Soap Player.playTo('run',50,15,true);// 애니메이션 위치 player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // FPS 모니터를 시작합니다(보조 기능은 필요하지 않음). Alloy.monitorFPS(scene); 장면, 그리고 콜백 루프를 전달하여 // 애니메이션을 실행하는 마지막 단계 scene.start(); 효과는 아래 달리는 소년과 같습니다. 아직 gif 애니메이션을 만들 수 있는 문을 열지 않은 점 죄송합니다...관련 코드는 github https://github.com/aurora-폴라리스/canvas3에 업로드할 수 있습니다.
처음이라 잘 이해가 안 되는 부분이 많아서 시간이 나면 정리하겠습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.