CocosCreator3.8 研究ノート(その23) CocosCreatorアニメーションシステム - アニメーションエディタ関連機能パネル説明

国慶節の休暇中は何もすることがなく、家でテクノロジーの勉強をしています~


前回の記事では、アニメーション編集、アニメーション コンポーネント、および基本的な使用プロセスを紹介しました。興味のある方は、「CocosCreator アニメーション システム - アニメーション編集とアニメーション コンポーネントの概要」を参照してください。

今回はアニメーションエディタに関する機能パネルの説明を中心に紹介します。


1. ツールバーエリア

ツールバー領域には主に、アニメーションの再生、一時停止、停止、アニメーションの保存、編集の終了など、一般的に使用される機能がいくつか含まれています。

ここに画像の説明を挿入します


2. ノードリスト

ノードリストは主にコンポーネントのノードを表示し、アニメーションコンポーネントに複数のノードが含まれる場合、最上位の階層がルートノードとして階層マネージャーのノードツリーと1対1に対応して表示されます。

をクリックすると、

ここに画像の説明を挿入します

ボタンを使用してアニメーション データのないノードを表示/非表示にするか、入力ボックスにノード名を直接入力してノードをすばやく見つけます。


ここに画像の説明を挿入します


現在、ノードを右クリックして、ノード データをコピー、貼り付け、移行、およびクリアできます。

ここに画像の説明を挿入します


3. プロパティリストエリア

この領域は主に、現在のアニメーション クリップで現在選択されているノードのアニメーション属性を表示、追加、設定するために使用されます。

右上隅の+ボタンをクリックしてアニメーション属性を追加します。アニメーション属性には、ノード独自の属性とコンポーネント属性 (ユーザー定義のスクリプト コンポーネントの属性を含む) が含まれます。

コンポーネントに含まれるプロパティの前には、コンポーネントの名前が付けられます (例: ) cc.Label

ここに画像の説明を挿入します


アニメーション アトリビュートを右クリックして、現在のアトリビュート トラックを削除するか、キーフレームをクリアするか、現在のアトリビュート トラックをコピーして貼り付けるかを選択します。

ここに画像の説明を挿入します


4.アニメーションタイムラインとキーフレームエリア

(1)、アニメーションタイムライン

アニメーション タイムラインは主に、現在のノードによって追加されたすべてのアニメーション プロパティの表示、キーフレーム (ダイヤモンド) の設定、およびプレビューの表示に使用されます。

ここに画像の説明を挿入します


(2) 時間制御線

時間制御線 (青い縦線) は、現在のアニメーションの時間ノードを示します。現在選択されている時間は、次の方法で変更できます。

  • 時間制御線を直接ドラッグします。

  • キーフレームをダブルクリックします

  • メニュー ツールバーで関連するモバイル コントロール ボタンを使用する

  • ショートカットキーkを使用する

  • アニメーション タイムラインの上の領域をクリックします。

タイム コントロール ラインを移動すると、シーン エディタ内のノードもアニメーションの軌跡に従って移動します。


ここに画像の説明を挿入します


(3) 時間軸のスケール単位の表示

タイム スケール単位のドロップダウン ボタンを使用して、アニメーション タイムラインのスケール表示モードを切り替えることができます。

ここに画像の説明を挿入します


タイムスケール単位を使用するには、次の 3 つの方法があります。

  • 時間(混合)

    時間: 混合 (デフォルト): アニメーションのタイムラインのスケールを秒単位で表示し、フレームを組み合わせて表示します。入力ボックスの前の値はを表し、その後ろの値はフレームを表します。たとえば、0-120 秒と 12 フレームを表します。

ここに画像の説明を挿入します


  • フレーム

    アニメーション タイムラインのスケールをフレーム単位で表示します。

  • 時間

    アニメーションのタイムラインのスケールを秒単位で表示します。

一般に、1 秒を何フレームに分割するかを示すためにフレーム レート (サンプル) が使用されます。


(4)、アニメーションのタイムラインのスケーリングと移動

アニメーションタイムラインおよびアニメーション属性キーフレームプレビューの任意の領域でマウスホイールを回転させると、タイムラインの横方向の表示比率を拡大または縮小できます。

アニメーション タイムラインおよびアニメーション属性キーフレーム プレビューの任意の位置でマウスの右ボタンを押し、タイムライン表示領域を左右にドラッグすると、非表示のコンテンツが左右に表示されます。


5. アニメーション属性キーフレーム領域

この領域は主に、現在選択されているノードの各アニメーション アトリビュートの特定のキーフレーム設定を表示するために使用され、キーフレーム編集のメイン領域でもあります。

右側のアニメーション プロパティを右クリックしてキーフレームを追加できます。

同時に、この領域ではフレームの選択やキーフレームをクリックして、移動、コピー、貼り付けなどの操作を実行することもできます。

ここに画像の説明を挿入します


クリックしてキーフレームを選択すると、キーフレームが青から白に変わり、現在のキーフレームの関連情報がエリアの上に表示されます。キーフレームをダブルクリックすると、時間制御線も現在のキーフレームの位置に移動します。

ここに画像の説明を挿入します


6. 現在のアニメーション クリップの関連プロパティを設定します。

アニメーション エディタで直接設定できる現在のアニメーション クリップのプロパティには、ループ モード( WrapMode )、フレーム レート (Sample)再生速度 (Speed) および継続時間 (Duration)が含まれます。


(1)、ループモード(WrapMode)

現在のアニメーション クリップ再生のループ モードを設定するために使用されます。現在は次のものが含まれます。

  • デフォルト: 効果はノーマルと同じです
  • 1 回だけプレイ (通常): 順方向シングルプレイ
  • ループ:ループ順再生
  • 前後ループ再生(PingPong):順方向にループ再生した後、逆方向に再生します。
  • Reverse: 逆シングル再生
  • 逆ループ再生(LoopReverse):逆方向にループ再生します。

ここに画像の説明を挿入します


(2)、フレームレート(サンプル)

現在のアニメーション データの 1 秒あたりのフレーム レート、つまり 1 秒を何フレームに分割するかを定義します。デフォルトは 60 です。

これは、アニメーション エディターの下部にあるサンプリング フレーム レート オプションで調整できます。

ここに画像の説明を挿入します


  • 再生速度(スピード)

    現在のアニメーションの再生速度を設定するために使用されます。デフォルトは 1 です。値が小さいほど、再生速度は遅くなります。

ここに画像の説明を挿入します


  • 継続時間: 前の数値は、アニメーションの再生速度が 1 の場合のアニメーションの継続時間を示します。これは、最後のキー フレームの位置に基づいて決定されます。

    その後の括弧内の数字は実際の走行時間を示しており、速度を調整すると変化します。


おすすめ

転載: blog.csdn.net/lizhong2008/article/details/133431792