UWP:更好的动画方式？

Question

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

Answer 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>