WinRT animation doesn't show intermediate values

Question

In WinRT, many animations simply do not show any of the intermediate values, or only show them if you move your mouse or some other system event occurs, strangely. At the end of the animations, the values are set correctly, but during execution (the 2 second duration of the animation in my case), the intermediate values are never displayed.

After 2 seconds the window disappears but you don't see it flipping when you press X. SOMETIMES if you move your mouse during the animation, you can see it, but that usually only happens when the XAML graph is more complex.

Here's the XAML:

<Grid Background="#525252">
        <Grid x:Name="AnimatedDialog"
              HorizontalAlignment="Center"
              VerticalAlignment="Center">
            <Grid.Projection>
                <PlaneProjection />
            </Grid.Projection>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Border Grid.RowSpan="2"
                    Grid.ColumnSpan="2"
                    Background="White"
                    BorderBrush="#2E2E2E"
                    BorderThickness="1" />

            <Border Background="#2E2E2E" />
            <TextBlock Grid.Row="0"
                       Grid.Column="0"
                       Margin="10,5"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Center"
                       FontFamily="Segoe UI"
                       FontSize="20"
                       FontWeight="SemiBold"
                       Text="{Binding Title,
                                      ElementName=Root,
                                      FallbackValue='This is the title'}" />
            <Border Grid.Row="0"
                    Grid.Column="1"
                    Width="40"
                    Height="40"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Background="#BD0000"
                    BorderThickness="0"
                    Padding="0"
                    PointerReleased="CloseBorder_OnPointerReleased" />
            <TextBlock Grid.Row="0"
                       Grid.Column="1"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontFamily="Segoe UI Symbol"
                       FontSize="22"
                       Foreground="White"
                       IsHitTestVisible="False"
                       Text="❌" />

            <TextBlock Grid.Row="1"
                       Grid.Column="0"
                       Grid.ColumnSpan="2"
                       Width="550"
                       Height="360"
                       Margin="10"
                       FontSize="22"
                       Foreground="Black"
                       IsHitTestVisible="False"
                       Text="Bacon ipsum dolor amet boudin ground round drumstick porchetta prosciutto spare ribs short ribs bresaola leberkas hamburger sirloin shank tri-tip turkey strip steak. Rump boudin shank, ham hock bresaola shankle shoulder. Alcatra landjaeger kevin tail hamburger turducken flank pork. Meatloaf turducken leberkas, pig sausage pancetta ground round. Beef kevin swine tongue ham hock bacon shoulder leberkas kielbasa rump capicola ribeye chicken shankle venison. Biltong ball tip prosciutto, t-bone cow pork ribeye pancetta strip steak jowl ham drumstick landjaeger short ribs andouille. Turducken tail shankle bacon, pork turkey filet mignon ham pig."
                       TextWrapping="WrapWholeWords" />
        </Grid>
    </Grid>

And code behind:

        private void CloseBorder_OnPointerReleased(object sender, PointerRoutedEventArgs e)
        {
            // Spin AnimatedDialog to close.

            var storyboard = new Storyboard();

            var projection = AnimatedDialog.Projection as PlaneProjection;
            projection.CenterOfRotationY = 0.5;

            var flipAnim = new DoubleAnimation();

            Storyboard.SetTarget(flipAnim, projection);
            Storyboard.SetTargetProperty(flipAnim, "RotationX");

            // 2 second flip
            flipAnim.Duration = new Duration(new TimeSpan(0, 0, 2));
            flipAnim.EasingFunction = new QuadraticEase {EasingMode = EasingMode.EaseIn};
            flipAnim.From = 0;
            flipAnim.To = 90;

            storyboard.Children.Add(flipAnim);

            storyboard.Completed += StoryboardOnCompleted;

            storyboard.Begin();
        }

        private void StoryboardOnCompleted(object sender, object o)
        {
            Debug.WriteLine("Completed storyboard.");
        }

Laith Laith · Accepted Answer · 2014-11-20T12:21:01

For some reason, it works when you use a value close to zero, but not actually zero.

        private void CloseBorder_OnPointerReleased(object sender, PointerRoutedEventArgs e)
        {
            // Spin AnimatedDialog to close.

            var storyboard = new Storyboard();

            var projection = AnimatedDialog.Projection as PlaneProjection;
            projection.CenterOfRotationY = 0.5;
            projection.RotationX = .0000000001;  // <--- this line changed

            var flipAnim = new DoubleAnimation();

            Storyboard.SetTarget(flipAnim, projection);
            Storyboard.SetTargetProperty(flipAnim, "RotationX");

            // 2 second flip
            flipAnim.Duration = new Duration(new TimeSpan(0, 0, 2));
            flipAnim.EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseIn };
            flipAnim.From = projection.RotationX;  // <--- this line changed
            flipAnim.To = 90;

            storyboard.Children.Add(flipAnim);

            storyboard.Completed += StoryboardOnCompleted;

            storyboard.Begin();
        }

        private void StoryboardOnCompleted(object sender, object o)
        {
            Debug.WriteLine("Completed storyboard.");
        }

WinRT animation doesn't show intermediate values

2 Answers