enter image description here

When applying animation before the end of the Storyboard, the text remains stretched and blurred as in the picture. If you press Alt , then everything becomes normal

Animation:

  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="(UIElement.Opacity)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:01.2000000" Value="0.45"/> <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" Value="0.1"/> <EasingDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0.75"/> <EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0.3"/> <EasingDoubleKeyFrame KeyTime="00:00:01.6000000" Value="0.75"/> <EasingDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0.22"/> <EasingDoubleKeyFrame KeyTime="00:00:01.8000000" Value="0.92"/> <EasingDoubleKeyFrame KeyTime="00:00:01.9000000" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:02.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-45"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.023"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewX)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="57"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-76.993"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames>

Element:

 <Grid x:Name="Header" Grid.ColumnSpan="2" Height="91" VerticalAlignment="Top" Background="#116d6d6d" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <CompositeTransform/> </Grid.RenderTransform> <TextBlock x:Name="textBlock1" Text="{Binding VideoElement.Header, UpdateSourceTrigger=PropertyChanged}" FontFamily="{StaticResource BoldFont}" FontSize="45" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Grid>

At the same time, exactly the same animation on exactly the same element on this screen works great.

How can I fix this problem?

    1 answer 1

    To get rid of this effect, it is necessary to start the animation not from 00:00:00 , but move forward a bit. Enough for 1 millisecond, that is, KeyTime="00:00:00.01" , then everything works as it should. As I understand it, this is some kind of bug in the UWP animation system, or the animations behave this way after Freeze()