Animation reloading bug

BoJack · 11 Aug 2020, 16:25

Hi,
I've made some animations with after effect and json2xaml.

The animation launch (routedevent) onload and put RepeatBehavior="Forever". There is one animation in each tab. The problem is, that when i switch between tab and go back to an animation which was already launch, it became very glitchy (hard to explain), here is a video showing the problem: https://www.youtube.com/watch?v=HRUUYiGENlg

Any idea how to fully reload the animation?

11 Aug 2020, 16:37

Could you please isolate the problem in XamlToy? I need to understand if this is a problem in the runtime or in the exporter from Adobe.

BoJack · 11 Aug 2020, 17:57

Hi i didn't manage to put the xamlcode on the xaml forum xamltoy, so here's the xamltoy code i've made you can c/c on xamltoy:

<Grid
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TabControl>
  <TabItem Name="NoAnim" Header="No anim">
    <TextBlock>Switch between the tabs at different time of the animation to make the animation glitch</TextBlock>
  </TabItem>
  <TabItem Name="Anim" Header="Anim">
    <Grid>
    <Viewbox>
            <Canvas
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="2000" Height="2000">

                <Canvas.Resources>
                    <Storyboard x:Key="Anims" RepeatBehavior="Forever" Duration="0:0:10">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" Storyboard.TargetName="Layer6">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.22" Value="1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.63" Value="0.98"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.27" Value="0.98"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.58" Value="0.9"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" Storyboard.TargetName="Layer6">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.22" Value="1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.63" Value="0.98"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.27" Value="0.98"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.58" Value="0.9"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.Children[1].X" Storyboard.TargetName="Layer6">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.22" Value="1024"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.63" Value="1004"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.27" Value="1004"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.58" Value="1100"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="1024"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.Children[1].Y" Storyboard.TargetName="Layer6">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.22" Value="2414"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.63" Value="2266"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.27" Value="2266"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.58" Value="2182"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="2414"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Layer5">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:4.75" Value="1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:5.22" Value="0"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.Children[1].X" Storyboard.TargetName="Layer5">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.27" Value="955.21"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:2.27" Value="559.21"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:2.95" Value="559.21"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:4.08" Value="1031.21"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:4.43" Value="1031.21"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:4.93" Value="899.21"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="955.21"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.Children[1].Y" Storyboard.TargetName="Layer5">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.27" Value="822.84"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:2.27" Value="866.84"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:2.95" Value="866.84"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:4.08" Value="806.84"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:4.43" Value="806.84"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:4.93" Value="826.84"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="822.84"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(noesis:Path.TrimStart)" Storyboard.TargetName="Path17">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:2.23" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(noesis:Path.TrimEnd)" Storyboard.TargetName="Path17">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.32" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(noesis:Path.TrimStart)" Storyboard.TargetName="Path18">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:2.23" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:3.82" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(noesis:Path.TrimEnd)" Storyboard.TargetName="Path18">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.82" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:5.57" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(noesis:Path.TrimStart)" Storyboard.TargetName="Path19">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.8" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:5.58" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(noesis:Path.TrimEnd)" Storyboard.TargetName="Path19">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:5.58" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:6.65" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Layer1">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.92" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:4.2" Value="1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:4.52" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </Canvas.Resources>

                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource Anims}"/>
                    </EventTrigger>
                </Canvas.Triggers>

                <Canvas x:Name="Layer9">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="1000" Y="1000"/>
                    </Canvas.RenderTransform>
                    <Path Data="F1M478.12,-612.75L-486.75,-612.5 -815,658.12 806.75,658.25 478.12,-612.75">
                        <Path.Fill>
                            <RadialGradientBrush MappingMode="Absolute" Center="-12,-136" RadiusX="738.48" RadiusY="738.48" GradientOrigin="-12,-136" Opacity="0.8">
                                <GradientStop Offset="0" Color="#FF0E8690"/>
                                <GradientStop Offset="1" Color="#FF00666A"/>
                            </RadialGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path StrokeThickness="10" StrokeMiterLimit="4" Data="M478.12,-612.75L-486.75,-612.5 -815,658.12 806.75,658.25 478.12,-612.75">
                        <Path.Stroke>
                            <SolidColorBrush Color="#1AEAF1" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                </Canvas>
                <Canvas x:Name="Layer8">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="1000" Y="1000"/>
                    </Canvas.RenderTransform>
                    <Path StrokeThickness="10" StrokeMiterLimit="4" Data="M-616.38,658.12L-368.38,-613.12">
                        <Path.Stroke>
                            <SolidColorBrush Color="#1AEAF1" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                    <Path StrokeThickness="10" StrokeMiterLimit="4" Data="M359.12,-612.5L605.25,658.5">
                        <Path.Stroke>
                            <SolidColorBrush Color="#1AEAF1" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                    <Path StrokeThickness="10" StrokeMiterLimit="4" Data="M-532,233.25L521.25,233.38">
                        <Path.Stroke>
                            <SolidColorBrush Color="#1AEAF1" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                    <Path StrokeThickness="10" StrokeMiterLimit="4" Data="M-404.38,-421L394.88,-420.88">
                        <Path.Stroke>
                            <SolidColorBrush Color="#1AEAF1" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                    <Path StrokeThickness="10" StrokeMiterLimit="4" Data="M-1.88,232.25L-2.12,-419.12">
                        <Path.Stroke>
                            <SolidColorBrush Color="#1AEAF1" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                </Canvas>
                <Canvas x:Name="Layer7">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="1001" Y="1000"/>
                    </Canvas.RenderTransform>
                    <Path Data="F1M-644.75,-209.5L-631,-138.5 628.5,-138.75 637.62,-210.38 -644.75,-209.5">
                        <Path.Fill>
                            <SolidColorBrush Color="#118D96" Opacity="0.6"/>
                        </Path.Fill>
                    </Path>
                    <Path StrokeThickness="5" StrokeMiterLimit="4" Data="M-644.75,-209.5L-631,-138.5 628.5,-138.75 637.62,-210.38 -644.75,-209.5">
                        <Path.Stroke>
                            <SolidColorBrush Color="#37C1C7" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                </Canvas>
                <Canvas x:Name="Layer6">
                    <Canvas.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <TranslateTransform X="1024" Y="2414"/>
                        </TransformGroup>
                    </Canvas.RenderTransform>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <TranslateTransform X="90" Y="-718"/>
                        </Canvas.RenderTransform>
                        <Path Fill="#E8E8E8" Data="F1M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z"/>
                        <Path StrokeThickness="5" StrokeMiterLimit="4" Data="M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z">
                            <Path.Stroke>
                                <SolidColorBrush Color="#4DB837" Opacity="0.8"/>
                            </Path.Stroke>
                        </Path>
                    </Canvas>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="0.49" ScaleY="0.49"/>
                                <TranslateTransform X="91" Y="-718"/>
                            </TransformGroup>
                        </Canvas.RenderTransform>
                        <Path Fill="#4DB837" Data="F1M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z"/>
                        <Path StrokeThickness="5" StrokeMiterLimit="4" Data="M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z">
                            <Path.Stroke>
                                <SolidColorBrush Color="#4DB838" Opacity="0.8"/>
                            </Path.Stroke>
                        </Path>
                    </Canvas>
                </Canvas>
                <Canvas x:Name="Layer5">
                    <Canvas.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="0.66" ScaleY="0.66"/>
                            <TranslateTransform X="955.21" Y="822.84"/>
                        </TransformGroup>
                    </Canvas.RenderTransform>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <TranslateTransform X="90" Y="-718"/>
                        </Canvas.RenderTransform>
                        <Path Fill="#E8E8E8" Data="F1M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z"/>
                        <Path StrokeThickness="5" StrokeMiterLimit="4" Data="M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z">
                            <Path.Stroke>
                                <SolidColorBrush Color="#B83838" Opacity="0.8"/>
                            </Path.Stroke>
                        </Path>
                    </Canvas>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="0.49" ScaleY="0.49"/>
                                <TranslateTransform X="91" Y="-718"/>
                            </TransformGroup>
                        </Canvas.RenderTransform>
                        <Path Fill="#B83838" Data="F1M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z"/>
                        <Path StrokeThickness="5" StrokeMiterLimit="4" Data="M0,-48a80,48,0,0,0,0,96a80,48,0,0,0,0,-96Z">
                            <Path.Stroke>
                                <SolidColorBrush Color="#B83737" Opacity="0.8"/>
                            </Path.Stroke>
                        </Path>
                    </Canvas>
                </Canvas>
                <Canvas x:Name="Layer4">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="1000" Y="1000"/>
                    </Canvas.RenderTransform>
                    <Path x:Name="Path17" StrokeThickness="8" StrokeMiterLimit="4" noesis:Path.TrimEnd="0" Data="M88,636C60,-376 -342,-586,-342,-586">
                        <Path.Stroke>
                            <SolidColorBrush Color="#FBFF00" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                </Canvas>
                <Canvas x:Name="Layer3">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="1000" Y="1000"/>
                    </Canvas.RenderTransform>
                    <Path x:Name="Path18" StrokeThickness="8" StrokeMiterLimit="4" noesis:Path.TrimEnd="0" Data="M-342,-586C-342,-586 126,-4,174,494">
                        <Path.Stroke>
                            <SolidColorBrush Color="#FF0089" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                </Canvas>
                <Canvas x:Name="Layer2">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="1000" Y="1000"/>
                    </Canvas.RenderTransform>
                    <Path x:Name="Path19" StrokeThickness="8" StrokeMiterLimit="4" noesis:Path.TrimEnd="0" Data="M178,492C180,-144 -252,-548,-305.04,-580.93 -311.18,-584.74 -328,-672,-411,-678">
                        <Path.Stroke>
                            <SolidColorBrush Color="#FBFF00" Opacity="0.8"/>
                        </Path.Stroke>
                    </Path>
                </Canvas>
                <Canvas x:Name="Layer1" Opacity="0">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="994" Y="994"/>
                    </Canvas.RenderTransform>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <TranslateTransform X="181.75" Y="-686"/>
                        </Canvas.RenderTransform>
                        <Path Fill="#B83838" Data="F1M9.25,-22.75a9.25,9.25,0,0,0,-9.25,-9.25a9.25,9.25,0,0,0,-9.25,9.25v45.5a9.25,9.25,0,0,0,9.25,9.25a9.25,9.25,0,0,0,9.25,-9.25v-45.5Z"/>
                        <Path StrokeThickness="0" StrokeMiterLimit="4" Data="M9.25,-22.75a9.25,9.25,0,0,0,-9.25,-9.25a9.25,9.25,0,0,0,-9.25,9.25v45.5a9.25,9.25,0,0,0,9.25,9.25a9.25,9.25,0,0,0,9.25,-9.25v-45.5Z">
                            <Path.Stroke>
                                <SolidColorBrush Color="#FF0089" Opacity="0.8"/>
                            </Path.Stroke>
                        </Path>
                    </Canvas>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <TranslateTransform X="182" Y="-635.75"/>
                        </Canvas.RenderTransform>
                        <Path Fill="#B83838" Data="F1M9.5,0a7.75,7.75,0,0,0,-7.75,-7.75h-3.5a7.75,7.75,0,0,0,-7.75,7.75a7.75,7.75,0,0,0,7.75,7.75h3.5a7.75,7.75,0,0,0,7.75,-7.75Z"/>
                        <Path StrokeThickness="0" StrokeMiterLimit="4" Data="M9.5,0a7.75,7.75,0,0,0,-7.75,-7.75h-3.5a7.75,7.75,0,0,0,-7.75,7.75a7.75,7.75,0,0,0,7.75,7.75h3.5a7.75,7.75,0,0,0,7.75,-7.75Z">
                            <Path.Stroke>
                                <SolidColorBrush Color="#FF0089" Opacity="0.8"/>
                            </Path.Stroke>
                        </Path>
                    </Canvas>
                </Canvas>

            </Canvas>
        </Viewbox>
    </Grid>
  </TabItem>
  </TabControl>
</Grid>

11 Aug 2020, 21:17

Forever animations keep executing until target objects are destroyed, so just switching tabs won't stop them.
What you see is the current state of the animated properties, plus the storyboard starting to animate the properties again, because of the Loaded event being launched when tab is shown.

You can use StopStoryboard action to stop the animation when switching tabs:

<Canvas.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard x:Name="LoadedAnim" Storyboard="{StaticResource Anims}"/>
  </EventTrigger>
  <EventTrigger RoutedEvent="FrameworkElement.Unloaded">
    <StopStoryboard BeginStoryboardName="LoadedAnim"/>
  </EventTrigger>
</Canvas.Triggers>

BoJack · 12 Aug 2020, 09:34

Thank you, it works for me!
Maybe this should be added to your converter json2xaml to prevent similar issue?

Anyhow, it's good for me, you can close the topic!

20 Aug 2020, 12:24

Maybe this should be added to your converter json2xaml to prevent similar issue?

We'll think about it, the tool is still under development and needs lots of improvements yet.

Marking this as solved.

Animation reloading bug Topic is solved

Animation reloading bug

Re: Animation reloading bug

Re: Animation reloading bug

Re: Animation reloading bug

Re: Animation reloading bug

Re: Animation reloading bug

Who is online