XAML とコンポジションの相互運用性

WinUI 3 XAML 要素は、Windowsコンポジション ビジュアル レイヤーによってサポートされます。 WinUI 3 では、CompositionAnimationを使用して、UIElement インスタンスでUIElement.StartAnimationオブジェクトを直接実行できます。 これは、 ElementCompositionPreview.GetElementVisualを使用して基になるビジュアルを最初に抽出する必要がある UWP とは異なります。

この相互運用機能を使用すると、Spring アニメーション、式アニメーション、およびその他のコンポジション アニメーションの種類を WinUI 3 要素に適用できます。

コンポジターを取得する

CompositionTarget.GetCompositorForCurrentThread()を使用して、現在の XAML UI スレッドのCompositorを取得します。

using Microsoft.UI.Composition;
using Microsoft.UI.Xaml.Media;

Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

UI スレッドからこのメソッドを呼び出します。 Compositorでは、アニメーション、ブラシ、効果を作成できます。

UIElement でスプリング アニメーションを実行する

SpringVector3NaturalMotionAnimation プロパティを対象とするScaleを作成し、UIElement.StartAnimationを呼び出して実行します。

using System.Numerics;
using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;

private readonly Compositor _compositor = CompositionTarget.GetCompositorForCurrentThread();
private SpringVector3NaturalMotionAnimation? _springAnimation;

private SpringVector3NaturalMotionAnimation CreateOrUpdateSpringAnimation(float finalValue)
{
    _springAnimation ??= _compositor.CreateSpringVector3Animation();
    _springAnimation.Target = "Scale";
    _springAnimation.FinalValue = new Vector3(finalValue, finalValue, 1.0f);

    return _springAnimation;
}

private void Element_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    var springAnimation = CreateOrUpdateSpringAnimation(1.5f);
    (sender as UIElement)?.StartAnimation(springAnimation);
}

private void Element_PointerExited(object sender, PointerRoutedEventArgs e)
{
    var springAnimation = CreateOrUpdateSpringAnimation(1.0f);
    (sender as UIElement)?.StartAnimation(springAnimation);
}

SpringVector3NaturalMotionAnimationはばね物理学を使用します。 この要素はわずかにオーバーシュートしてから所定の位置に落ち着くため、自然な印象が生まれます。

ばねの動作を調整する

DampingRatioとPeriodを設定して、ばねの動作を制御します。

_springAnimation.DampingRatio = 0.6f;
_springAnimation.Period = TimeSpan.FromMilliseconds(50);

式を使ったアニメーションを使用する

式アニメーションでは、数式を使用して、別の値に基づいてプロパティを継続的に制御します。 WinUI 3 では、 UIElementで式アニメーションを直接開始できます。

using System.Numerics;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media;

var compositor = CompositionTarget.GetCompositorForCurrentThread();
var source = compositor.CreatePropertySet();
source.InsertVector3("Offset", new Vector3(40.0f, 0.0f, 0.0f));

var expressionAnimation = compositor.CreateExpressionAnimation("source.Offset");
expressionAnimation.SetReferenceParameter("source", source);
expressionAnimation.Target = "Translation";

myElement.StartAnimation(expressionAnimation);

式アニメーションの詳細については、「 リレーションベースのアニメーション」を参照してください。

WinUI 3 と UWP の違い

UWP では、コンポジション アニメーションを実行する前に、要素から Visual を抽出する必要がありました。

// UWP pattern
var visual = ElementCompositionPreview.GetElementVisual(myElement);
visual.StartAnimation("Scale", springAnimation);

WinUI 3 では、StartAnimationでUIElementを直接呼び出すことができます。

// WinUI 3 pattern
myElement.StartAnimation(springAnimation);

WinUI 3 ギャラリーを開く

WinUI 3 ギャラリー アプリには、WinUI 3 のコントロールと機能の対話型の例が含まれています。

関連資料

• 自然なアニメーション
• スプリングアニメーション
• 関係ベースのアニメーション
• ビジュアル レイヤーの概要