如何触发隐式合成动画

Question

根据我唯一的文档 find，我尝试了以下 XAML：

<Image Name="testImage" Source="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" Width="800">
    <animations:Implicit.Animations>
        <animations:ScalarAnimation Target="Translation.Y" ImplicitTarget="Offset" Duration="0:0:4"/>
        <animations:ScalerAnimation Target="Opacity" Duration="0:0:4" />
    </animations:Implicit.Animations>
</Image>

以下代码有效，不透明度动画并需要 4 秒淡出：

private void myButton_Tapped(object sender, TappedRoutedEventArgs e)
{
    testImage.Opacity = 0.2;
}

但我不知道如何触发平移动画（或旋转或缩放）。我试过这个：

private void myButton_Tapped(object sender, TappedRoutedEventArgs e)
{
    var translate = new TranslateTransform();
    translate.Y = 400;
    testImage.RenderTransform = translate;
}

而且这希望隐式会覆盖持续时间但没有运气：

private void myButton_Tapped(object sender, TappedRoutedEventArgs e)
{
    testImage.Offset(0, 400, 0).Start();
}

这些更改已应用，但没有 4 秒动画。

Answer 1

TranslateTransform 是一个 RenderTransform，与您要实现的 Composition 变换无关，Offset 隐式动画覆盖 XAML设置。

要使其正常工作，您需要获取 ElementVisual，然后直接更改 Offset：

private void myButton_Tapped( object sender, TappedRoutedEventArgs e )
{
    var imageVisual = ElementCompositionPreview.GetElementVisual( testImage );
    imageVisual.Offset = new Vector3( 0, 400, 0 );
}

如何触发隐式合成动画

How To Trigger Implicit Composition Animations

c#

uwp

windows-community-toolkit