ホームページ > ウェブフロントエンド > H5 チュートリアル > キャンバスに実装されたスケルトンアニメーション

キャンバスに実装されたスケルトンアニメーション

不言
リリース: 2018-06-12 16:58:36
オリジナル
3075 人が閲覧しました

この記事は主にキャンバスベースのスケルトンアニメーションのサンプルコードに関する情報を紹介しています。内容は非常に優れているので、参考として共有します。

最近、キャンバス上のスケルトン アニメーションについて知りました。名前からわかるように、これまでのキャンバス上のアニメーションとは異なります。興味がありますか?

スケルトンアニメーションについては、Tencentチームで偶然見たのですが、公式Webサイトにはチュートリアルが非常に少ないため、参考用の小さなデモしかなく、公式にダウンロードされたケースも非常に奇妙に動作します。出てこないかもしれませんが、私の操作が間違っているかもしれませんが、それは問題ではありません。この小さなデモを通して、この非常に高度なスケルトン アニメーションについて学びましょう。私の理解はあまり包括的ではありません。ご容赦ください。

はじめに 前に、AlloyStick について学びましょう

公式の紹介文には、AlloyStick は HTML5 テクノロジーを使用して開発された骨格アニメーション エンジンであり、HTML5 アニメーション開発と HTML5 ゲーム開発に使用できると記載されています。AlloyStick は主に 2 つの部分で構成されています。スケルタル アニメーション エンジンとスケルタル アニメーション エディタを備えたスケルタル アニメーション エディタは、アニメーション キーフレームを設定し、強力な自動トゥイーンとボーン関係を利用して、スムーズに実行できるリアルで鮮やかなスケルタル アニメーションを作成できます。 PC、携帯電話、タブレットなどのデバイス上で。そうですね、言うのは簡単でとても魅力的です

いわゆるスケルタルアニメーションとは、文字通り骨を通して描かれたアニメーションを意味します。

はい、このように見えても、結局のところ、非常に強力な自動トゥイーン機能があり、すべての部分が非常にスムーズに接続されていると考えられます。 PS に似ています。フェザリング

非常に強力な機能なので、独自の利点を持つ人がいるはずです

    アニメーションはよりリアルです、それは確かです
  1. 写真は非常に小さなスペースしか占有しません。この人は頭、手、足の 3 つの部分だけで構成されています
  2. トランジションアニメーションが自動的にトゥイーンされ、動きがより柔軟になります
  3. スケルトン制御可能
  4. ボーンイベントフレーム、アニメーションが進みます特定のアクションまたはフレームを直接待機し、カスタムイベント動作をトリガーします
  5. アクションデータを継承し、複数のキャラクターが一連のアニメーションデータを使用できます
  6. ハウスエンジンと組み合わせることができます
  7. スプライトアニメーションと組み合わせることができますハイブリッド アニメーションを作成するには
  8. 小さなデモを始めましょう

スケルタル アニメーションは、主にスケルトン データ、スキニング データ、アニメーション データの 3 つの部分で構成されます。これら 3 つのデータを使用して、AlloyStick は鮮やかなスケルトン アニメーションをレンダリングできます。もちろん、これら 3 つのデータは手動で生成する必要はなく、エディターで操作するだけで自動的に生成されます。データが生成されたら、次のようにしてスケルトン アニメーションを呼び出して実行できます。最初のステップは、alloysk.js を導入し、リソース resource.js を追加することです。なお、スキニングされたpngはimgタグで導入されており、もちろんjsで読み込むことも可能です。 resource.js には、スキニング データ、ボーン関係データ、およびアニメーション名とパラメータを含むすべてのアクション データが含まれています。 2 番目のステップでは、新しいリソース ファイルに従ってステージ オブジェクト 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(&#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 中国語 Web サイトに注目してください。

関連する推奨事項:

html5 を使用する Canvas は、echarts では実装できない円グラフをカプセル化します


Canvas を使用してマウスを押したまま移動して軌跡を描く方法


以上がキャンバスに実装されたスケルトンアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート