Animation reloading bug
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?
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?
Re: Animation reloading bug
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.
Re: Animation reloading bug
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:
Code: Select all
<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>
-
-
sfernandez
Site Admin
- Posts: 2056
- Joined:
Re: Animation reloading bug
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:
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:
Code: Select all
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="LoadedAnim" Storyboard="{StaticResource Anims}"/>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Unloaded">
<StopStoryboard BeginStoryboardName="LoadedAnim"/>
</EventTrigger>
</Canvas.Triggers>
Re: Animation reloading bug
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!
Maybe this should be added to your converter json2xaml to prevent similar issue?
Anyhow, it's good for me, you can close the topic!
-
-
sfernandez
Site Admin
- Posts: 2056
- Joined:
Re: Animation reloading bug
We'll think about it, the tool is still under development and needs lots of improvements yet.Maybe this should be added to your converter json2xaml to prevent similar issue?
Marking this as solved.
Who is online
Users browsing this forum: No registered users and 0 guests