UWP：更好的动画图像方式？答案

【问题标题】：UWP: Better way to animate images?UWP：更好的动画图像方式？
【发布时间】：2021-05-01 14:45:47
【问题描述】：

我正在开发一个 UWP 应用程序，我需要为应用程序上显示的图像制作动画。动画是随机的，图像可以从左到右，从上到下，对角线。图像经过然后消失。我目前正在使用后面的代码并操作偏移量，然后淡出。我计划使用 switch 语句并基于 1-6 之间的随机数，我计划随机使用上述任何方向。实现这一目标的最佳方法是什么？这是正确的方法还是我应该使用故事板？

【问题讨论】：

如果答案已经解决了您的问题，请mark它被接受

标签： uwp uwp-xaml

【解决方案1】：

UWP：更好的图像动画方式？

更好的方法是在代码隐藏中制作Storyboard，并随机制作TranslateTransform.X和TranslateTransform.Y动画。请注意，更好的方法是将图像放在画布中。

例如

private void BTAnimation()
{
    Storyboard storyboard = new Storyboard();
    DoubleAnimation translateYAnimation = new DoubleAnimation();
    translateYAnimation.From = 0;
    translateYAnimation.To = ActualHeight;
    translateYAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.5));

    Storyboard.SetTarget(translateYAnimation, MyImage);

    Storyboard.SetTargetProperty(translateYAnimation, "(UIElement.RenderTransform).(TranslateTransform.Y)");
    storyboard.Children.Add(translateYAnimation);
    DoubleAnimation OpacityAnimation = new DoubleAnimation();
    OpacityAnimation.From = 1;
    OpacityAnimation.To = 0;
    OpacityAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.5));

    Storyboard.SetTarget(OpacityAnimation, MyImage);
    Storyboard.SetTargetProperty(OpacityAnimation, "Opacity");
    storyboard.Children.Add(OpacityAnimation);


    storyboard.Begin();
}
private void LRAnimation()
{
    Storyboard storyboard = new Storyboard();
    DoubleAnimation translateYAnimation = new DoubleAnimation();
    translateYAnimation.From = 0;
    translateYAnimation.To = ActualWidth;
    translateYAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.5));

    Storyboard.SetTarget(translateYAnimation, MyImage);
    Storyboard.SetTargetProperty(translateYAnimation, "(UIElement.RenderTransform).(TranslateTransform.X)");
    storyboard.Children.Add(translateYAnimation);

    DoubleAnimation OpacityAnimation = new DoubleAnimation();
    OpacityAnimation.From = 1;
    OpacityAnimation.To = 0;
    OpacityAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.5));

    Storyboard.SetTarget(OpacityAnimation, MyImage);
    Storyboard.SetTargetProperty(OpacityAnimation, "Opacity");
    storyboard.Children.Add(OpacityAnimation);


    storyboard.Begin();

}

Xaml

<Canvas x:Name="RootCanvas">
    <Image
        x:Name="MyImage"
        Width="100"
        Height="100"
        AutomationProperties.AccessibilityView="Raw"
        Loaded="OnHeartLoaded"
        RenderTransformOrigin="0.5,0.5"
        Source="/Assets/logo.jpg"
        Stretch="Fill">
        <Image.RenderTransform>
            <TranslateTransform />
        </Image.RenderTransform>
    </Image>
</Canvas>

【讨论】：