uwp xaml - UWP: Better way to animate images?

Question

I am working on a UWP app where I need to animate images displayed on the app. The animations are random , images can go left to right, top to bottom , diagonally. The images pass by and then fade. I am currently using the code behind and manipulating the offset, then, fade. I plan to use a switch statement and based on random number between 1-6 I plan to use any of the above mentioned directions randomly. What would be the best way to achieve this ? Is this the right approach or should I use storyboarding?

question from:https://stackoverflow.com/questions/65924694/uwp-better-way-to-animate-images

Answer 1

UWP: Better way to animate images?

The better way is make Storyboard in the code-behind, and do TranslateTransform.X and TranslateTransform.Y animation randomly. Please note the better way is place your image in the Canvas.

For example

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>