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

Question

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

Answer 1

UWP: Better way to animate images?

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

例如

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>

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

UWP: Better way to animate images?

uwp

uwp-xaml