関係ベース アニメーション

この記事では、コンポジション式アニメーションを使用して関係ベースのアニメーションを作成する方法の簡単な概要について説明します。

動的な関係ベースのエクスペリエンス

アプリでモーション エクスペリエンスを構築するとき、モーションが時間ベースではなく、別のオブジェクトのプロパティに依存する場合があります。 KeyFrameAnimations では、これらの種類のモーション エクスペリエンスを非常に簡単に表現することはできません。 これらの特定のインスタンスでは、モーションを個別に定義する必要がなくなりました。 代わりに、モーションは、他のオブジェクト プロパティとの関係に基づいて動的に適応できます。 たとえば、オブジェクトの水平方向の位置に基づいて不透明度をアニメーション化できます。 その他の例としては、スティッキー ヘッダーや視差などのモーション エクスペリエンスがあります。

これらの種類のモーション エクスペリエンスを使用すると、単数形と独立感を感じるのではなく、より接続された感じの UI を作成できます。 ユーザーに対して、これは動的 UI エクスペリエンスの印象を与えます。

ExpressionAnimations の使用

リレーションベースのモーション エクスペリエンスを作成するには、ExpressionAnimation タイプを使用します。 ExpressionAnimations (または略して式) は、数学的リレーションシップ (アニメーション化プロパティの値をフレームごとに計算するためにシステムが使用するリレーションシップ) を表現できる新しい種類のアニメーションです。 言い換えて言えば、式は単にフレームごとのアニメーション化プロパティの目的の値を定義する数式です。 式は、次のようなさまざまなシナリオで使用できる非常に汎用性の高いコンポーネントです。

• 相対サイズ、オフセット アニメーション。
• 固定ヘッダー、ScrollViewer を使用した視差。 ( を参照してください既存の ScrollViewer エクスペリエンスを強化する)。
• InertiaModifiers と InteractionTracker を使用したスナップ ポイント。 ( を参照してください慣性修飾子を使用してスナップ点を作成します)。)

ExpressionAnimations を使用する場合は、前もって説明する価値のある点がいくつかあります。

• 終了しない – KeyFrameAnimation 兄弟とは異なり、式には有限の期間はありません。 式は数学的な関係であるため、常に "実行中" のアニメーションです。 選択した場合は、これらのアニメーションを停止するオプションがあります。
• 実行されているが、常に評価されるわけではありません。パフォーマンスは、常に実行されているアニメーションに関する問題です。 ただし、心配する必要はありません。システムは十分にスマートであるため、式は入力またはパラメーターのいずれかが変更された場合にのみ再評価されます。
• 適切なオブジェクト型への解決 – 式は数学的リレーションシップであるため、式を定義する数式が、アニメーションの対象となるプロパティと同じ型に解決されるようにすることが重要です。 たとえば、Offset をアニメーション化する場合、式は Vector3 型に解決されます。

式のコンポーネント

式の数学的関係を構築する場合、いくつかの主要なコンポーネントがあります。

• パラメーター – 定数値または他のコンポジション オブジェクトへの参照を表す値。
• 数学演算子 – パラメーターを結合して数式を形成する一般的な算術演算子 plus(+)、minus(-)、multiply(*)、divide(/) です。 また、より大きい (>)、equal(==)、三項演算子 (condition ? ifTrue : ifFalse) などの条件演算子も含まれます。
• 数学関数 – System.Numerics に基づく数学関数/ショートカット。 サポートされている関数の完全な一覧については、 ExpressionAnimationを参照してください。

式では、ExpressionAnimation システム内でのみ個別の意味を持つ特殊な語句であるキーワードのセットもサポートされています。 これらは、 ExpressionAnimation ドキュメントに記載されています (数学関数の完全な一覧と共に)。

ExpressionBuilder を使用した式の作成

UWP アプリで Expression を作成するには、2 つの方法があります。

1. 公式のパブリック API を使用し、文字列として式を作成する。
2. Windows コミュニティ ツールキットに含まれる ExpressionBuilder ツールを使用して、タイプ セーフなオブジェクト モデルで式を作成する。

このドキュメントでは、ExpressionBuilder を使用して式を定義します。

パラメーター

パラメーターは、式の中心を構成します。 パラメーターには次の 2 種類があります。

• 定数: 型指定された System.Numeric 変数を表すパラメーターです。 これらのパラメーターは、アニメーションの開始時に 1 回割り当てられる値を取得します。
• 参照: これらは CompositionObjects への参照を表すパラメーターです。これらのパラメーターは、アニメーションの開始後に値を継続的に更新します。

一般に、参照は、式の出力を動的に変更する方法の主な側面です。 これらの参照が変更されると、結果として式の出力が変更されます。 文字列を使用して式を作成する場合、またはテンプレート シナリオで式を使用する場合 (Expression を使用して複数の CompositionObject を対象とする場合)、パラメーターの名前と値を設定する必要があります。 詳細については、「例」のセクションを参照してください。

KeyFrameAnimations の操作

式は、KeyFrameAnimations でも使用できます。 これらのインスタンスでは、式を使用して、特定の時点で KeyFrame の値を定義する必要があります。これらの型の KeyFrame は ExpressionKeyFrames と呼ばれます。

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

ただし、ExpressionAnimations とは異なり、ExpressionKeyFrame は KeyFrameAnimation が開始されたときに 1 回だけ評価されます。 ExpressionAnimation を KeyFrame の値として渡すのではなく、文字列 (ExpressionBuilder を使用している場合は ExpressionNode) を渡すことに注意してください。

例

ここでは、式の使用例、特に Windows UI サンプル ギャラリーの PropertySet サンプルについて説明します。 青いボールの軌道運動動作を管理する式を見ていきます。

エクスペリエンス全体に関して、次の 3 つのコンポーネントがプレイされています。

1. 赤いボールの Y オフセットをアニメーション化する KeyFrameAnimation。
2. 別の KeyFrameAnimation によってアニメーション化されたオービットを駆動するのに役立つ Rotation プロパティを持つ PropertySet。
3. 完全な軌道を維持するために、赤いボール オフセットと Rotation プロパティを参照する青いボールのオフセットを駆動する ExpressionAnimation。

#3 で定義されている ExpressionAnimation に注目します。 また、ExpressionBuilder クラスを使用してこの式を構築します。 文字列を使用してこのエクスペリエンスをビルドするために使用するコードのコピーが最後に一覧表示されます。

この式では、PropertySet から参照する必要がある 2 つのプロパティがあります。1 つは中心点オフセット、もう 1 つは回転です。

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

次に、実際の周回回転を考慮する Vector3 コンポーネントを定義する必要があります。

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Note

EF は、ExpressionFunctions を定義する "using" 表記の短縮形です。

using EF = Microsoft.Toolkit.Uwp.UI.Animations.Expressions.ExpressionFunctions;

最後に、これらのコンポーネントを結合し、Red Ball の位置を参照して数学的関係を定義します。

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

仮定の状況では、この同じ式を使用したいが、他の 2 つのビジュアル (2 セットの周回円を意味する) を使用する場合はどうなるか。 CompositionAnimations では、アニメーションを再利用し、複数の CompositionObject をターゲットにすることができます。 追加のオービット ケースにこの式を使用する場合に変更する必要があるのは、ビジュアルへの参照だけです。 これをテンプレートと呼びます。

この場合は、前に作成した式を変更します。 CompositionObject への参照を "取得" するのではなく、名前を持つ参照を作成し、異なる値を割り当てます。

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

パブリック API を使用して文字列を使用して式を定義した場合のコードを次に示します。

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);