Kanzi Engine APIを使用してアニメーションとタイムラインを作成する¶
Kanzi アニメーションシステムは、アニメーションとタイムラインで構成されています。アニメーションは、特定のタイプの値が時間とともにどのように変化するかを定義し、タイムラインはアニメーションをアニメートしたいオブジェクトのプロパティにマッピングします。
Kanzi Engine APIを使用して、アニメーションやタイムラインを作成できます。
From-toアニメーションは、プロパティの値をどの値からどの値に変更するかを定義します。これらの値のいずれかを省略して、現在の値からアニメーションするか、プロパティの現在の値にアニメーションすることができます。From-toアニメーションは、アニメーションの変化率を定義するイージングカーブを使用します。Kanzi に付属するイージングカーブの1つを使用するか、自分で定義することができます。
Kanzi Engine APIを使用してfrom-toアニメーションを作成するには、Kanzi Engine APIを使用して、from-toアニメーションを作成する を参照してください。
キーフレームアニメーションで使用されるキーフレームは、プロパティ値と、アニメーションがその値に達する時点とを定義します。Kanzi では、線形、ステップ、およびベジエスプラインのキーフレームを作成できます。
Kanzi Engine APIを使用してキーフレームアニメーションを作成するには、Kanzi Engine APIを使用してキーフレームアニメーションを作成する を参照してください。
プロパティタイムラインは、オブジェクトのプロパティにアニメーションを適用します。例えば、Image ノードのレイアウトサイズを変更するには、プロパティタイムラインを使用してノードの Layout Width および Layout Height プロパティをアニメートします。
Kanzi Engine APIを使用してプロパティタイムラインを作成するには、Kanzi Engine APIを使用してプロパティタイムラインを作成する を参照してください。
プロパティフィールドタイムラインは、オブジェクトのプロパティの1つ以上のフィールドにアニメーションを適用します。例えば、Text Block ノード内のテキストの色を変更するために、各色チャンネルに別々のアニメーションを使用することができます。
Kanzi Engine APIを使用してプロパティフィールドタイムラインを作成するには、Kanzi Engine APIを使用してプロパティフィールドタイムラインを作成する を参照してください。
パラレルタイムラインは、Kanzi 同時に再生されるタイムラインをグループ化することができます。パラレルタイムラインは、最後のチャイルドタイムライン内のアニメーションが終了したときに終了します。このタイムラインを使用して、タイムラインのコレクションを整理し、タイムラインの構成を作成します。
Kanzi Engine APIを使用して並列タイムラインを作成するには、Kanzi Engine APIを使用して並列タイムラインを作成する を参照してください。
タイムライン再生プロパティを使用すると、Kanzi がタイムラインコンテンツをどのように再生するかを定義できます。たとえば、アニメーションの速度、繰り返し回数、再生方向を設定できます。Kanzi Engine APIを使用したタイムラインの設定 を参照してください。
Kanzi Engine APIを使用して、from-toアニメーションを作成する¶
From-toアニメーションは、プロパティの値をどの値からどの値に変更するかを定義します。これらの値のいずれかを省略して、現在の値からアニメーションするか、プロパティの現在の値にアニメーションすることができます。From-toアニメーションは、アニメーションの変化率を定義するイージングカーブを使用します。Kanzi に付属するイージングカーブの1つを使用するか、自分で定義することができます。
FROM-TOアニメーションを作成するには、以下のようにします。
// Create a from-to animation that uses the linear easing function and is two seconds long.
// As a starting value, the animation takes the current value of the property in the node you want to animate.
// The animation sets the final value of the property in the node you animate to 200.
// You set which node this animation animates in the timeline.
FloatLinearFromToAnimationSharedPtr linearAnimation = FloatLinearFromToAnimation::create(domain, chrono::seconds(2), nullopt, 200.0f);
ノード内のプロパティ値をfrom-toアニメーションでアニメーション化するには：
// Create a property timeline and apply the linearAnimation from-to animation to the Layout Width property
// to animate the width of the current node.
PropertyAnimationTimelineSharedPtr propertyTimeline = PropertyAnimationTimeline::create(domain, ".", Node::WidthProperty, linearAnimation);
ノード内のプロパティフィールド値をfrom-toアニメーションでアニメーション化するには：
// Create a property field animation timeline and apply it to the Render Transformation property of the current node.
PropertyFieldAnimationTimelineSharedPtr propertyFieldTimeline = PropertyFieldAnimationTimeline::create(domain, ".", Node2D::RenderTransformationProperty);
// Scale the current node on the x axis by animating the Scale X property field of the Render Transformation property
// with the linearAnimation from-to animation.
propertyFieldTimeline->addEntry(PropertyFieldScaleX, linearAnimation);
バックイージングカーブとイーズアウトイージングモードを使用するフロートのfrom-toアニメーションを作成するには:
// Define the FloatBackFromToAnimation to use float values and Back easing function.
typedef FromToAnimation<float, BackEasingFunction> FloatBackFromToAnimation;
typedef shared_ptr<FloatBackFromToAnimation> FloatBackFromToAnimationSharedPtr;
// Create a from-to animation that uses the back easing function and is 5000 milliseconds long.
// The animation sets the starting value of the property in the node you want to animate to 100,
// and the final value of that property to 300.
FloatBackFromToAnimationSharedPtr backAnimation = FloatBackFromToAnimation::create(domain, chrono::milliseconds(5000), nullopt, 300.0f);
// Set the easing mode of the backAnimation from-to animation to Ease out.
backAnimation->setEasingMode(AnimationEaseOut);
タイムラインの種類に関係なくアニメーションを再生するには:
// Create the playback context and the timeline playback for the node defined in the item2d.
SceneGraphTimelinePlaybackContext context(*item2d);
// Create the playback for the timeline defined in the propertyFieldTimeline.
TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context);
// Start the animation.
domain->getRootTimelineClock()->addTimelinePlayback(playback);
詳細については、FromToAnimation クラスを参照してください。
Kanzi Engine APIを使用してキーフレームアニメーションを作成する¶
キーフレームアニメーションで使用されるキーフレームは、プロパティ値と、アニメーションがその値に達する時点とを定義します。Kanzi では、線形、ステップ、およびベジエスプラインのキーフレームを作成できます。
キーフレームアニメーションを作成するには、以下のようにします。
// Create a float keyframe animation.
FloatKeyframeAnimationSharedPtr keyframeAnimation = FloatKeyframeAnimation::create(domain);
// Create and add keyframes to the keyframe animation. This keyframe animation contains two linear keyframes.
// Create a linear keyframe at second 0 with the value 0.
keyframeAnimation->addLinearKeyframe(chrono::seconds::zero(), 0.0f);
// Create a linear keyframe at second 1 with the value 100.
keyframeAnimation->addLinearKeyframe(chrono::seconds(1), 100.0f);
キーフレームアニメーションを使用してノード内のプロパティ値をアニメーション化するには:
// Create a property timeline and apply the keyframeAnimation keyframe animation to the Layout Width property
// to animate the width of the current node.
PropertyAnimationTimelineSharedPtr propertyTimeline = PropertyAnimationTimeline::create(domain, ".", Node2D::WidthProperty, keyframeAnimation);
キーフレームアニメーションを使用してノード内のプロパティフィールド値をアニメーション化するには：
// Create a property field animation timeline and apply it to the Render Transformation property of the current node.
PropertyFieldAnimationTimelineSharedPtr propertyFieldTimeline = PropertyFieldAnimationTimeline::create(domain, ".", Node2D::RenderTransformationProperty);
// Rotate the current node by animating the Rotation Z property field of the Render Transformation property
// with the keyframeAnimation keyframe animation.
propertyFieldTimeline->addEntry(PropertyFieldRotationZ, keyframeAnimation);
オブジェクトを横向きの8の字型のパスに沿って移動させるために、ベジエキーフレームを使用するキーフレームアニメーションを作成するには:
// Create two float keyframe animations: one to animate the object on the x axis,
// the other to animate the object on the y axis.
// Create float keyframe animation keyframeAnimationX that uses linear keyframes
// to animate the movement of the object on the x axis.
FloatKeyframeAnimationSharedPtr keyframeAnimationX = FloatKeyframeAnimation::create(domain);
// Create a linear keyframe at second 0 with the value 0.
keyframeAnimationX->addLinearKeyframe(chrono::seconds::zero(), 0.0f);
// Create a linear keyframe at second 4 with the value 4.
// At this keyframe the object reaches the furthest point on the x axis.
keyframeAnimationX->addLinearKeyframe(chrono::seconds(4), 4.0f);
// Create a linear keyframe at second 8 with the value 0.
// At this keyframe the object returns to the same position it had at the first keyframe.
keyframeAnimationX->addLinearKeyframe(chrono::seconds(8), 0.0f);
// Create float keyframe animation keyframeAnimationY that uses Bezier keyframes
// to animate the movement of the object on the y axis.
FloatKeyframeAnimationSharedPtr keyframeAnimationY = FloatKeyframeAnimation::create(domain);
// Create a linear keyframe at second 0 with the value 0. When you use Bezier keyframes,
// you can use any type of keyframe for the first keyframe, because you need this keyframe
// only to provide the information for the starting position.
keyframeAnimationY->addLinearKeyframe(chrono::seconds::zero(), 0.0f);
// Create a Bezier keyframe at second 4 with the value 0 and two control points.
// You use the control points to set the position of the keyframe.
keyframeAnimationY->addBezierKeyframe(chrono::seconds(4), 0.0f, Vector2(0.5f, 4.0f), Vector2(0.5f, -4.0f));
// Create a Bezier keyframe at second 8 with the value 0 and two control points.
// This keyframe uses the same control points, but because the keyframeAnimationX
// animation moves the object on the x axis back to its starting position, this keyframe
// is a mirror image of the previous keyframe.
keyframeAnimationY->addBezierKeyframe(chrono::seconds(8), 0.0f, Vector2(0.5f, 4.0f), Vector2(0.5f, -4.0f));
// Create a property field animation timeline and apply it to the Render Transformation property of the current node.
PropertyFieldAnimationTimelineSharedPtr timeline = PropertyFieldAnimationTimeline::create(domain, ".", Node3D::RenderTransformationProperty);
// Move the current node on the x axis by animating the Translation X property field of the Render Transformation property
// with the keyframeAnimationX keyframe animation.
timeline->addEntry(PropertyFieldTranslationX, keyframeAnimationX);
// Move the current node on the y axis by animating the Translation Y property field of the Render Transformation property
// with the keyframeAnimationY keyframe animation.
timeline->addEntry(PropertyFieldTranslationY, keyframeAnimationY);
タイムラインの種類に関係なくアニメーションを再生するには:
// Create the playback context and the timeline playback for the node defined in the item2d.
SceneGraphTimelinePlaybackContext context(*item2d);
// Create the playback for the timeline defined in the propertyFieldTimeline.
TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context);
// Start the animation.
domain->getRootTimelineClock()->addTimelinePlayback(playback);
詳細については、KeyframeAnimation クラスを参照してください。
Kanzi Engine APIを使用してプロパティタイムラインを作成する¶
プロパティタイムラインは、オブジェクトのプロパティにアニメーションを適用します。例えば、Image ノードのレイアウトサイズを変更するには、プロパティタイムラインを使用してノードの Layout Width および Layout Height プロパティをアニメートします。
プロパティタイムラインを作成するには、以下の手順に従います。
// Create a property timeline and apply the linearAnimation animation to the Layout Width property
// to animate the width of the current node.
PropertyAnimationTimelineSharedPtr propertyTimeline = PropertyAnimationTimeline::create(domain, ".", Node::WidthProperty, linearAnimation);
タイムラインの種類に関係なくアニメーションを再生するには:
// Create the playback context and the timeline playback for the node defined in the item2d.
SceneGraphTimelinePlaybackContext context(*item2d);
// Create the playback for the timeline defined in the propertyFieldTimeline.
TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context);
// Start the animation.
domain->getRootTimelineClock()->addTimelinePlayback(playback);
詳細については、PropertyAnimationTimeline クラスを参照してください。
Kanzi Engine APIを使用してプロパティフィールドタイムラインを作成する¶
プロパティフィールドタイムラインは、オブジェクトのプロパティの1つ以上のフィールドにアニメーションを適用します。例えば、Text Block ノード内のテキストの色を変更するために、各色チャンネルに別々のアニメーションを使用することができます。
プロパティフィールドタイムラインを作成するには、以下のようにします。
// Create a property field timeline and apply it to the Render Transformation property of the current node.
PropertyFieldAnimationTimelineSharedPtr propertyFieldTimeline = PropertyFieldAnimationTimeline::create(domain, ".", Node2D::RenderTransformationProperty);
// Scale the current node on the x axis by animating the Scale X property field of the Render Transformation property
// with the linearAnimation animation.
propertyFieldTimeline->addEntry(PropertyFieldScaleX, linearAnimation);
タイムラインの種類に関係なくアニメーションを再生するには:
// Create the playback context and the timeline playback for the node defined in the item2d.
SceneGraphTimelinePlaybackContext context(*item2d);
// Create the playback for the timeline defined in the propertyFieldTimeline.
TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context);
// Start the animation.
domain->getRootTimelineClock()->addTimelinePlayback(playback);
詳細については、PropertyFieldAnimationTimeline クラスを参照してください。
Kanzi Engine APIを使用して並列タイムラインを作成する¶
パラレルタイムラインは、Kanzi 同時に再生されるタイムラインをグループ化することができます。パラレルタイムラインは、最後のチャイルドタイムライン内のアニメーションが終了したときに終了します。このタイムラインを使用して、タイムラインのコレクションを整理し、タイムラインの構成を作成します。
並列タイムラインに子タイムラインを追加すると、子タイムラインの結合が並列タイムラインのコンテンツを形成します。これは、並列タイムラインのすべての再生プロパティがその子タイムラインに適用されることを意味します。
並列タイムラインを作成するには:
// Create a parallel timeline.
ParallelTimelineSharedPtr parallelTimeline = ParallelTimeline::create(domain);
// Add propertyTimeline and propertyFieldTimeline timelines to the parallel timeline. Parallel timeline plays
// both timelines at the same time.
parallelTimeline->addChild(propertyTimeline);
parallelTimeline->addChild(propertyFieldTimeline);
タイムラインの種類に関係なくアニメーションを再生するには:
// Create the playback context and the timeline playback for the node defined in the item2d.
SceneGraphTimelinePlaybackContext context(*item2d);
// Create the playback for the timeline defined in the propertyFieldTimeline.
TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context);
// Start the animation.
domain->getRootTimelineClock()->addTimelinePlayback(playback);
詳細については、ParallelTimeline クラスを参照してください。
Kanzi Engine APIを使用したタイムラインの設定¶
タイムラインは、指定された開始時間から連続して再生される一連のイテレーションで構成されます。各イテレーションは、Kanzi が特定の方法で再生するタイムラインコンテンツの連続した部分です。タイムラインコンテンツは、1つ以上のアニメーションまたはチャイルドタイムラインで構成されることがあります。
タイムライン再生プロパティを使用すると、Kanzi がタイムラインコンテンツをどのように再生するかを定義できます。たとえば、アニメーションの速度、繰り返し回数、再生方向を設定できます。Kanzi は次の順序でタイムラインプロパティを適用します。
クリッピングプロパティは、イテレーションで再生されるタイムラインコンテンツの部分を設定します。
クリップ開始時間は、タイムラインコンテンツが最初からスキップする時間の長さを設定します。
クリップの持続時間は、タイムラインコンテンツの持続時間を設定します。
持続時間スケールは、（クリップされた）タイムラインコンテンツの再生にかかる時間を設定します。
たとえば、デュレーションスケールを 2 に設定すると、タイムラインコンテンツの再生には、タイムラインコンテンツで定義されている長さの 2 倍の時間がかかります。
クリップされ、期間がスケーリングされたタイムラインコンテンツは、イテレーションのコンテンツを表します。
方向の動作は、反復コンテンツが再生される方向を設定します。方向の動作を次のように設定します:
反復コンテンツを通常通り再生するには、通常に設定します。
反転して、イテレーションコンテンツを逆方向に再生します。
PingPongを使用して、イテレーションコンテンツを通常通り最後まで再生し、その後逆方向に最初まで戻します。
繰り返し回数は、繰り返しコンテンツが何回繰り返されるかを設定します。繰り返し回数を0に設定すると、繰り返しが無限に続くか、停止されるまで続きます。
開始時間は、タイムラインの最初のイテレーションが再生を開始する時刻を設定します。開始時間を次のように設定します:
最初のイテレーションをすぐに再生開始するためにゼロに設定します。これは開始時間のデフォルト値です。
正の値を指定すると、最初の繰り返しが開始時間で設定された時間の長さの後に再生を開始します。
負の値を使用して、Kanzi が開始時間で設定された時間の長さだけタイムラインの始まりをクリップするようにします。これにより、タイムラインは過去のある時点で開始したかのように動作します。
タイムラインは、そのグローバル時間がタイムラインの開始時間プロパティを超えた後にのみ、そのコンテンツを適用します。Kanzi がタイムラインを最後まで再生した後、タイムラインは削除されるまでそのコンテンツを無期限に適用します。繰り返し回数が複数回に設定された並列タイムラインがあり、そこに開始時間がゼロでない正の値に設定されたタイムラインを追加した場合、子タイムラインは並列タイムラインの各イテレーションの開始時に、そのグローバル時間が開始時間を超えた後にのみ再生を開始します。
タイムライン再生プロパティのすべての組み合わせが有効であるわけではないことに注意してください。例えば、タイムラインのリピート回数を無限に設定し、そのタイムラインを子タイムラインとして並列タイムラインに追加すると、並列タイムラインのコンテンツの持続時間が無限になります。この場合、無限のコンテンツを逆転させることは意味がないため、並列タイムラインの方向動作を逆に設定することは許可されていません。もし方向動作を逆に設定した場合、Kanzi Engine は内部的にそれを通常に戻し、警告メッセージをログに出力します。
タイムラインの再生を開始するには:
// Create playback context.
SceneGraphTimelinePlaybackContext context(*nodeToAnimate);
// Create playback for timeline.
TimelinePlaybackSharedPtr timelinePlayback = timeline->createPlayback(context);
// Add playback to the clock.
timelineClock->addTimelinePlayback(timelinePlayback);
タイムラインの再生を停止するには:
// Remove playback from the clock.
timelineClock->removeTimelinePlayback(*timelinePlayback);
タイムラインの開始時間を取得するには:
// Get start time of timeline.
chrono::milliseconds startTime = timeline->getStartTime();
タイムラインの開始時間を設定するには:
// Set start time of timeline to 100 milliseconds.
// Playback of timeline will start to perform its first iteration after its global time reaches 100 milliseconds.
timeline->setStartTime(chrono::milliseconds(100));
タイムラインのクリッピングを取得するには:
// Get clip start time of timeline.
chrono::milliseconds clipStartTime = timeline->getClipStartTime();
// Get clip duration of timeline.
optional<chrono::milliseconds> clipDuration = timeline->getClipDuration();
タイムラインのクリッピングを設定するには:
// Set clip start time of timeline to 100 milliseconds.
// Playback of timeline will perform playback of timeline content starting from 100 milliseconds in each iteration.
timeline->setClipStartTime(chrono::milliseconds(100));
// Set clip duration of timeline to 200 milliseconds.
// Playback of timeline will perform playback of timeline content for 200 milliseconds in each iteration.
timeline->setClipDuration(chrono::milliseconds(200));
タイムラインの繰り返し回数を取得するには:
// Get repeat count of timeline.
unsigned int repeatCount = timeline->getRepeatCount();
タイムラインの繰り返し回数を設定するには:
// Set repeat count of Timeline to 10.
// Playback of timeline will perform 10 iterations of timeline content.
timeline->setRepeatCount(10);
// Set repeat count of Timeline to 0.
// Playback of timeline will perform infinite amount of iterations.
timeline->setRepeatCount(0);
タイムラインの持続時間スケールを取得するには、
// Get duration scale of timeline.
float durationScale = timeline->getDurationScale();
タイムラインの持続時間スケールを設定するには、以下のようにします。
// Set scale of timeline to 4.
// Playback of timeline will be 4 times slower compared to default playback speed and each iteration
// will be 4 times longer compared to iteration duration with default scale.
timeline->setDurationScale(4.0f);
タイムライン再生の方向を取得するには：
// Get direction behavior of timeline.
enum Timeline::DirectionBehavior directionBehavior = timeline->getDirectionBehavior();
タイムライン再生の方向を設定するには、以下のようにします。
// Set direction behavior of timeline to pingpong.
// Each odd iteration of timeline will play its content normally
// and each even iteration will play it in reverse manner.
timeline->setDirectionBehavior(Timeline::DirectionBehaviorPingPong);
詳細については、Timeline クラスを参照してください。
関連項目¶
アニメーションシステム (Animation System)