プロパティ値の補間

プロパティのターゲット値を動的に設定し、現在の値を時間をかけてターゲット値に補間したい場合は、Property Target Interpolator を使用します。

例えば、Property Target Interpolator を使用して、ゲージ針の回転を現在の位置に関係なく目標値に補間します。

Property Target Interpolator は、決してオーバーシュートしないスプリングダンパーシステムの動作をエミュレートします。スプリングがオブジェクトを動かす力を設定するには Acceleration プロパティを使用し、減衰係数を設定するには Drag プロパティを使用します。Acceleration プロパティの値が大きいほど、プロパティは新しい値に速く到達します。Drag プロパティの値が大きいほど、最大補間速度は低くなります。

../../_images/interpolator-accelerator-and-drag.gif

Property Target Interpolator を使用する方法をチュートリアルで学びましょう。チュートリアル: プロパティ値を補間する をご覧ください。

プロパティの値を補間する

プロパティの値を補間するには:

  1. Node Tree で、補間したいプロパティを含むノードを選択します。

    例:

    1. Quick Start ウィンドウで Examples をクリックします。Data source チュートリアルの横にある ダウンロード をクリックします。

    2. Data source チュートリアルの横にある Open をクリックし、Completed project を選択します。

    3. Node Tree で、RootPage > Gauges > SpeedNeedle ノードを選択します。

      Property Target Interpolator を使用すると、データソースでスピードの値が変化したときに、SpeedNeedle ノードを以前の位置から現在の位置まで徐々に移動させることができます。

      このプロジェクトの作成方法については、チュートリアル: ゲージを作成する と チュートリアル: データソースからアプリケーションデータを取得する を参照してください。

    ../../_images/end-of-step-3.png ../../_images/speedneedle.png
  2. Node Components Alt を押しながら右クリック Animation で、Property Target Interpolator を選択します。

    ../../_images/triggers-add-property-target-interpolator.png
  3. Create Property Target Interpolator ダイアログセットで:

    • 補間したいプロパティに Interpolated Property Type します。

      例えば、Transform 2D > Render Transformation プロパティを選択します。データ型がfloatでないプロパティを補間したい場合は、floatプロパティタイプを作成し、補間したいプロパティを作成したfloatプロパティにバインドします。例えば、3Dノードの回転を補間したい場合にこのアプローチを使用します。3Dノードの回転を補間する を参照してください。

    • Interpolated Property Type で選択したプロパティのプロパティフィールドに Interpolated Field を入力します。

      例えば、Rotation Z プロパティフィールドを選択します。

    ../../_images/create-property-target-interpolator1.png
  4. 補間動作を設定するには、作成した Property Target Interpolator で Acceleration および Drag プロパティを設定します。

    Property Target Interpolator は、決してオーバーシュートしないスプリングダンパーシステムの動作をエミュレートします。スプリングがオブジェクトを動かす力を設定するには Acceleration プロパティを使用し、減衰係数を設定するには Drag プロパティを使用します。Acceleration プロパティの値が大きいほど、プロパティは新しい値に速く到達します。Drag プロパティの値が大きいほど、最大補間速度は低くなります。

    例えば、Acceleration を 7 に、Drag を 10 に設定します。

    ../../_images/property-target-interpolator-settings.png

    Interpolated Property Type で設定したプロパティの値を変更すると、Property Target Interpolator は現在の値をターゲット値に時間をかけて補間します。この例では、Property Target Interpolator が Speed プロパティの値を補間して、Speed の針の位置を変更します。補間を変更するには、Property Target Interpolator で Acceleration および Drag プロパティの値を調整します。

3Dノードの回転を補間する

3Dノードの回転を補間するには:

  1. Library Alt を押しながら右クリック Property Types で、Property Type を選択し、floatプロパティタイプを作成します。

    たとえば、Interpolator という名前のfloatプロパティタイプを作成します。

    ../../_images/create-property-type.png ../../_images/create-interpolator.png
  2. Node Tree で、回転を補間したい3Dノードを選択または作成します。

    例えば、プロジェクト内のスピードメーターの針を選択します。

  3. Node Components Alt を押しながら右クリック Animation で、Property Target Interpolator を選択します。

    ../../_images/triggers-add-property-target-interpolator.png
  4. Create Property Target Interpolator ダイアログで、最初のステップで作成した浮動小数点プロパティタイプに Interpolated Property Type を設定します。

    ../../_images/create-property-target-interpolator-interpolator.png
  5. 補間動作を設定するには、作成した Property Target Interpolator で Acceleration および Drag プロパティを設定します。

    Property Target Interpolator は、決してオーバーシュートしないスプリングダンパーシステムの動作をエミュレートします。スプリングがオブジェクトを動かす力を設定するには Acceleration プロパティを使用し、減衰係数を設定するには Drag プロパティを使用します。Acceleration プロパティの値が大きいほど、プロパティは新しい値に速く到達します。Drag プロパティの値が大きいほど、最大補間速度は低くなります。

    ../../_images/property-target-interpolator-3d-rotation.png
  6. Node Tree で、回転を補間したい3Dノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

    • Property から Render Transformation へ

    • Property Field から Rotation へ

    • Expression へ

      createRotationZ({@./Interpolator})
      

    Save をクリックします。

    ../../_images/interpolating-3d-rotation-binding-1.png
  7. Properties で + Add Binding をクリックし、Binding Editor で設定します。

    • Interpolated Property Type の Property Target Interpolator で設定したプロパティタイプに Property を設定します。

    • 回転を制御したいプロパティに Expression します。

      例:

      • データソースから回転の値を取得する場合、それを回転を制御するために使用したいデータオブジェクトに設定してください。

      • プロジェクト内の別のプロパティから回転の値を取得する場合は、そのプロパティに設定してください。

        注釈

        このプロパティが Property Target Interpolator を含む同じノードにある場合、アプリケーションを実行したときにのみ補間を見ることができ、Preview では見ることができません。

    Save をクリックします。

    ../../_images/interpolating-3d-rotation-binding-2.png

    回転を制御するために使用するプロパティの値を変更すると、Property Target Interpolator は時間をかけて目標値に値を徐々に変更します。補間を変更するには、Property Target Interpolator で Acceleration および Drag プロパティの値を調整します。

補間の完了に関する情報を取得する

Property Target Interpolator が補間するプロパティの補間を完了すると、メッセージを送信します。そのメッセージをインターセプトすることで、補間されたプロパティが最終値に達した時点を知ることができます。

補間の完了に関する情報を取得するには、

  1. 補間したいプロパティのために Property Target Interpolator を作成して設定します。プロパティの値を補間する を参照してください。

  2. Node Tree で、Property Target Interpolator の補間の完了に関する情報を取得したいノードを選択します。

    例えば、SpeedNeedle ノードで Property Target Interpolator を作成したが、RootPage ノードで補間の完了に関する情報を取得したい場合は、RootPage ノードを選択します。

    ../../_images/rootpage-speedneedle.png
  3. Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Property Target Interpolator > Interpolation Completed を選択します。

    Interpolation Completed トリガーは、Property Target Interpolator がプロパティの値の補間を完了したときに送信するメッセージをインターセプトします。

    ../../_images/add-interpolation-completed-trigger.png
  4. Interpolation Completed トリガーで、Message Source プロパティを、補間が完了したことを知りたい Property Target Interpolator を持つノードに設定します。

    例えば、RootPage ノードで Property Target Interpolator が SpeedNeedle 内のプロパティの補間を終了するタイミングを知りたい場合、Message Source を SpeedNeedle ノードに設定します。

    ../../_images/interpolation-completed-trigger-settings-speedneedle-.png
  5. Interpolation Completed トリガーで、実行したいアクションを作成します。

    Property Target Interpolator が補間の完了についてメッセージを送信すると、このトリガーはあなたが選択したアクションを実行します。

    例えば、アニメーションを開始するために Animation Player > Start アクションを追加するか、プロパティの値を設定するために Set Property アクションを追加します。

    ../../_images/node-components-property-target-interpolator-completed-start.png

Property Target Interpolator をAPIで使用する

Property Target Interpolator を作成し、そのターゲットプロパティと補間設定を設定するには:

// Create property target interpolator.
PropertyTargetInterpolatorSharedPtr interpolator = PropertyTargetInterpolator::create(domain, "player");
// Set type name of property which should be interpolated on the node where interpolator will be attached.
interpolator->setInterpolatedPropertyType(Node2D::OpacityProperty.getName());
// Adjust interpolation settings.
interpolator->setAcceleration(2.0f);
interpolator->setDrag(1.0f);

ノードに Property Target Interpolator をアタッチするには:

node->addNodeComponent(interpolator);

プロパティターゲット補間タイムラインを作成し、そのターゲットプロパティと補間設定を設定するには:

PropertyTargetInterpolationTimelineSharedPtr timeline = PropertyTargetInterpolationTimeline::create(domain, ".", Node2D::OpacityProperty, PropertyFieldWhole, 2.0f, 1.0f);

プロパティターゲット補間タイムラインの再生を作成するには、

SceneGraphTimelinePlaybackContext context(*node);
TimelinePlaybackSharedPtr playback = timeline->createPlayback(context);

プロパティターゲット補間タイムラインの再生をクロックに追加するには、

domain->getRootTimelineClock()->addTimelinePlayback(playback);

詳細については、PropertyTargetInterpolator、PropertyTargetInterpolationTimeline、および PropertyTargetInterpolationTimelinePlayback クラスを参照してください。

関連項目

チュートリアル: プロパティ値を補間する

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

イージング関数を使用してプロパティ値を補間する

アニメーション (Animations)