Optimize WPF storyboard animation

Question

I have simple animation to move image inside a page and reflect it from the bounds like DVD logo animation. But this animation consume about 20% of my videocard power (I have 1660TI and i7 10th gen). If I start it on weaker hardware it has a lot of lags. How can I optimize it? My XAML:

<Page.Triggers>

    <EventTrigger RoutedEvent="Loaded">
        <EventTrigger.Actions>
            
            <BeginStoryboard>
                <Storyboard TargetName="ImagePassCard" >
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)"
                                     AutoReverse="True"
                                     From="0" To="{Binding ElementName=CanvasMain, Path=ActualWidth, Converter={StaticResource SubtractValueConverter}, ConverterParameter=400}" 
                                     Duration="0:0:10"
                                     RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>

            <BeginStoryboard>
                <Storyboard TargetName="ImagePassCard">
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
                                     AutoReverse="True"
                                     From="0" To="{Binding ElementName=CanvasMain, Path=ActualHeight, Converter={StaticResource SubtractValueConverter}, ConverterParameter=250}"
                                     Duration="0:0:15"
                                     RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>

        </EventTrigger.Actions>
    </EventTrigger>

</Page.Triggers>


<Canvas x:Name="CanvasMain">

    <Image x:Name="ImagePassCard" 
           Source="{Binding Source={x:Static res:Resources.PassCard}, Converter={StaticResource BitmapToImageConverter}}"
           Height="250"
           Width="400"/>

</Canvas>

I tried move a vector XAML image and this bitmap - it's same result.

Answer 1

Well i am not exactly sure that this solve your performance issue, but you could try to modify the TranslateTransform X and Y values rather than the Canvas.Left attached value.

Something like this:

<Image x:Name="ImagePassCard" 
       Source="{Binding Source={x:Static res:Resources.PassCard}, Converter={StaticResource BitmapToImageConverter}}"
       Height="250"
       Width="400">
       <Image.RenderTransform>
            <TransformGroup>
                <TranslateTransform x:Name="AnimatedTranslateTransform" X="0" Y="0" />
             </TransformGroup>
        </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="<YourEvent>">
                    <BeginStoryboard>
                        <Storyboard>
                           <DoubleAnimation Storyboard.TargetProperty="AnimatedTranslateTransform"
                                            Storyboard.TargetProperty="X"
                                            AutoReverse="True"
                                            From="0" To="{Binding ElementName=CanvasMain, Path=ActualWidth, Converter={StaticResource SubtractValueConverter}, ConverterParameter=400}" 
                                            Duration="0:0:10"
                                            RepeatBehavior="Forever"/>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
  </Image>