プロパティ駆動のアニメーションを作成する¶

キーアニメーションを制御するために時間の代わりにプロパティタイプを使用したい場合は、Property Driven Animation Player を使用します。

例えば、プロパティ駆動のアニメーションを使用すると、キーフレームアニメーションを使用してプロパティタイプでゲージの針の位置を制御できます。

../../_images/property-driven-animation.gif

プロパティ駆動のアニメーションを作成するには:

キーフレームアニメーションを選択するか、作成します。

例えば、2Dゲージの針を回転させるために使用できるキーフレームアニメーションを作成するには：
1. Animation Clip Editor で Create Animation をクリックします。
2. Properties で、設定します:
  - Target Property から Render Transformation (Node2D.RenderTransformation) へ
  - Property Field から Rotation Z へ
3. Animation Clip Editor で、Move tool を使用してキャンバス領域内のアニメーションを選択します。
4. Keyframe tool を選択し、アニメーションを2回クリックして2つのキーフレームを作成します。
  
  この例では、2つのキーフレームのみを必要とする線形アニメーションを作成します。より複雑なアニメーションを作成するには、さらに多くのキーフレームを追加してください。
5. Move tool を選択し、最初のキーフレームを選択して設定します:
  - Time を 0 に
    
    プロパティ駆動のアニメーションでは、Property Driven Animation Player で選択した Time Controller Property Type でアニメーションの時間を制御します。これは、この手順の最後のステップで行います。
  - コントローラープロパティの値が0のときに、アニメーションターゲットプロパティまたはプロパティフィールドに設定したい値に Value を設定します。
    
    プロパティ駆動のアニメーションでは、Value プロパティを使用してこのアニメーションで設定されたプロパティの値を制御します。この例では、Node2D.RenderTransformation プロパティ、Rotation Z プロパティフィールドの値を制御します。
    
    たとえば、Value を-140に設定します。
    
    値を-140に設定すると、アニメーションはゲージの針を元の位置から140度反時計回りに回転させます。
6. アニメーション内の2番目のキーフレームを選択し、設定します:
  - アニメーションを制御したいプロパティの最高可能値に Time します。
    
    たとえば、Time を240に設定します。
  - コントローラープロパティがその最大値にあるときに、アニメーションターゲットプロパティまたはプロパティフィールドに設定したい値に Value を設定します。
    
    たとえば、Value を100に設定します。
    
    値を100に設定すると、アニメーションはゲージの針を元の位置から時計回りに100度回転させます。
プロパティ駆動アニメーションで制御したいノードに、制御したいアニメーションのプロパティを追加します。

例えば、プロパティタイプを作成し、それを使用してスピードニードルの回転を制御するには、次のようにします。
1. Library で、Alt を押しながら右クリック Property Types を選択し、Property Type を選択します。
2. New Property Type ウィンドウセットで：
  - Name から Gauges.Speed へ
  - Display Name から Speed へ
  - Data Type から Float へ
  - Lower Bound を 0 に
  - Upper Bound をスピードゲージの最高値に設定します。
    
    たとえば、240 に設定します。
  - Slider Step を 1 に
3. Node Tree で、プロパティ駆動のアニメーションで制御したいノードを選択します。
  
  例えば、回転させたいスピードニードルを表示する Image ノードを選択します。
  ヒント
  
  Kanzi ではデフォルトで、すべての2Dノードの原点はノードの左上隅にあります。ノードを回転させたい原点を設定するには、Properties に Render Transformation Origin プロパティを追加し、そのプロパティフィールドを設定します。
  - X を x 軸上で原点を設定したいノード幅のパーセンテージにします。
  - Y を y 軸上で設定したいノードの高さの割合にします。
4. Properties に、アニメーションを制御したいプロパティを追加します。
  
  例えば、作成した Speed プロパティを追加します。
  
  アニメーションを制御したいプロパティを、Property Driven Animation Player を使用するノードに追加する必要があります。
Node Components Alt を押しながら右クリック Animation で、Property Driven Animation Player を選択します。
Property Driven Animation Player で作成したものに設定します:
- このプロパティ駆動のアニメーションに使用したい Target Animation Timeline を Animation Data、Animation Clip、または Timeline Sequence に設定します。
  
  例えば、この手順の最初のステップで作成したアニメーションを選択します。
- Time Controller Property Type を、時間の代わりにアニメーションで使用したいプロパティタイプに設定します。
  
  例えば、あなたが作成した Speed プロパティタイプを選択します。

Time Controller Property Type で設定したプロパティの値を変更すると、Property Driven Animation Player がアニメーションで設定されたプロパティとプロパティフィールドの値を変更します。この例では、Property Driven Animation Player が Render Transformation プロパティ Rotation プロパティフィールドを変更して、SpeedNeedle ノードを回転させます。

Property Driven Animation Player をAPIで使用する¶

Property Driven Animation Player を作成し、そのタイムラインとタイムコントローラープロパティを設定するには：

// Create property driven animation player.
PropertyDrivenAnimationPlayerSharedPtr player = PropertyDrivenAnimationPlayer::create(domain, "player");
// Set timeline.
player->setTimeline(timeline);
// Set type name of time controller property.
player->setTimeControllerPropertyType(timePropertyType.getName());

ノードに Property Driven Animation Player をアタッチするには：

node->addNodeComponent(player);

詳細については、PropertyDrivenAnimationPlayer クラスを参照してください。

プロパティ駆動のアニメーションを作成する¶

Property Driven Animation Player をAPIで使用する¶

関連項目¶