Forums | NoesisGUI

Welcome to our official discussion site. You’ll find topics on features, bugs, development, and general support here
https://www.noesisengine.com/forums/

Animation reloading bug

https://www.noesisengine.com/forums/viewtopic.php?t=2074

Page 1 of 1

Animation reloading bug

Posted: 11 Aug 2020, 16:25
by BoJack
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?

Re: Animation reloading bug

Posted: 11 Aug 2020, 16:37
by jsantos
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

Posted: 11 Aug 2020, 17:57
by BoJack
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>

Re: Animation reloading bug

Posted: 11 Aug 2020, 21:17
by sfernandez
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:
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

Posted: 12 Aug 2020, 09:34
by BoJack
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!

Re: Animation reloading bug

Posted: 20 Aug 2020, 12:24
by sfernandez
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.
All times are UTC+02:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/