BoJack
Topic Author
Posts: 11
Joined: 28 Apr 2020, 12:16

Animation reloading bug

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?

Tags:
 
User avatar
jsantos
Site Admin
Posts: 2900
Joined: 20 Jan 2012, 17:18
Contact:

Re: Animation reloading bug

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
Topic Author
Posts: 11
Joined: 28 Apr 2020, 12:16

Re: Animation reloading bug

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>
 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Animation reloading bug

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
Topic Author
Posts: 11
Joined: 28 Apr 2020, 12:16

Re: Animation reloading bug

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!
 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Animation reloading bug

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.

Who is online

Users browsing this forum: No registered users and 1 guest