コンポジション アニメーションを使用した XAML 要素のアニメーション化

  • [アーティクル]

この記事では、コンポジション アニメーションのパフォーマンスと XAML プロパティの設定のしやすさを利用して XAML UIElement にアニメーションを付けることができる新しいプロパティについて説明します。

Windows 10 Version 1809 以前では、UWP アプリでのアニメーション作成には、次の 2 つの選択肢がありました。

ビジュアル レイヤーを使用すると、XAML コンストラクトを使用する場合よりも優れたパフォーマンスが得られます。 しかし、ElementCompositionPreview を使用して、その要素の基になるコンポジション Visual オブジェクトを取得してから、コンポジション アニメーションでその Visual にアニメーションを付けるのは、使用のための処理が複雑になります。

Windows 10 Version 1809 以降では、コンポジション アニメーションを使用して UIElement のプロパティに直接アニメーションを付けることができるようになり、元になるコンポジション Visual を取得する必要がなくなりました。

Note

UIElement でこれらのプロパティを使用するには、UWP プロジェクトのターゲット バージョンが 1809 以降である必要があります。 プロジェクト バージョンの構成の詳細については、バージョン アダプティブ アプリに関する記事を参照してください。

例

WinUI 2 ギャラリー
WinUI ギャラリー

WinUI 2 Gallery アプリがインストールされている場合は、ここをクリックしてアプリを開き、アニメーション相互運用機能の動作を確認してください。

新しいレンダリング プロパティによる古いレンダリング プロパティの置換

次のテーブルで、UIElement のレンダリングを変更するために使用できるプロパティを示します。これは、CompositionAnimation でもアニメーションを付けることができます。

プロパティ タイプ 説明
不透明度 倍精度浮動小数点型 オブジェクトの不透明度の度合い
翻訳 Vector3 要素の X/Y/Z 位置をシフトします
TransformMatrix Matrix4x4 要素に適用する変換行列
スケール Vector3 CenterPoint を中心として要素をスケーリングします
回転 Float RotationAxis および CenterPoint を中心として要素を回転させます
RotationAxis Vector3 回転の軸
CenterPoint Vector3 スケーリングと回転の中心点

TransformMatrix プロパティ値は、TransformMatrix、Scale、Rotation、Translation の順序で Scale、Rotation、Translation プロパティと組み合わされます。

これらのプロパティは要素のレイアウトに影響を与えないので、これらのプロパティを変更しても、新しい Measure/Arrange パスは発生しません。

これらのプロパティの目的と動作は、コンポジション Visual クラスの似た名前のプロパティと同様です (Visual にはない Translation を除く)。

例: Scale プロパティの設定

次の例では、Button に Scale プロパティを設定する方法を示します。

<Button Scale="2,2,1" Content="I am a large button" />

var button = new Button();
button.Content = "I am a large button";
button.Scale = new Vector3(2.0f,2.0f,1.0f);

新しいプロパティと古いプロパティの間の相互排他性

Note

Opacity プロパティでは、このセクションで説明する相互排他性は適用されません。 XAML アニメーションとコンポジション アニメーションのどちらを使用しても、同じ Opacity プロパティを使用します。

CompositionAnimation でアニメーションを付けることができるプロパティでは、いくつかの既存の UIElement プロパティが置き換えられます。

新しいプロパティのいずれかを設定 (またはアニメーション化) する場合、古いプロパティは使用できません。 逆に、古いプロパティのいずれかを設定 (またはアニメーション化) する場合、新しいプロパティは使用できません。

また、ElementCompositionPreview を使用して、次のメソッドで Visual を自分で取得および管理する場合も、新しいプロパティを使用できません。

重要

2 つのプロパティ セットを混ぜて使用しようとすると、API 呼び出しが失敗し、エラーメッセージが生成されます。

1 つのプロパティ セットから切り替えることは、それらをクリアすることによって行えますが、単純化の観点からお勧めしません。 プロパティが DependencyProperty でサポートされている場合 (例: UIElement.Projection は UIElement.ProjectionProperty でサポートされています)、ClearValue を呼び出すと、そのプロパティは "未使用" の状態に復元されます。 それ以外の場合 (Scale プロパティなど)、そのプロパティは既定値に設定されます。

CompositionAnimation を使用した UIElement プロパティのアニメーション化

表にリストされているレンダリング プロパティには、CompositionAnimation を使用してアニメーションを付けることができます。 これらのプロパティは、ExpressionAnimation で参照することもできます。

StartAnimation メソッドと StopAnimation メソッドを UIElement で使用すると、UIElement プロパティにアニメーションが付けられます。

例: Vector3KeyFrameAnimation を使用した Scale プロパティのアニメーション化

次の例で、Button のスケールにアニメーションを付ける方法を示します。

var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();

animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
animation.Duration = TimeSpan.FromSeconds(1);
animation.Target = "Scale";

button.StartAnimation(animation);

例: ExpressionAnimation を使用した Scale プロパティのアニメーション化

あるページに 2 つのボタンがあります。 2 番目のボタンは、最初のボタンの 2 倍の大きさに (スケールを使用して) アニメーション化されます。

<Button x:Name="sourceButton" Content="Source"/>
<Button x:Name="destinationButton" Content="Destination"/>

var compositor = Window.Current.Compositor;
var animation = compositor.CreateExpressionAnimation("sourceButton.Scale*2");
animation.SetExpressionReferenceParameter("sourceButton", sourceButton);
animation.Target = "Scale";
destinationButton.StartAnimation(animation);