WPF Storyboard works well, except for the first time it runs. Why?

Question

Hi, I'm doing a Surface Application. And there I have something like a bulletin board where little cards with news on it are pinned on. On click they shall fly out of the board and scale bigger. My storyboard works well, except for the first time it runs. It's not a smooth animation then but it scales to its final size immediately and it's the same with the orientation-property. Just the center-property seems to behave correctly.

This is an example for one of my Storyboards doing that:

            Storyboard stb = new Storyboard();
            PointAnimation moveCenter = new PointAnimation();
            DoubleAnimationUsingKeyFrames changeWidth = new DoubleAnimationUsingKeyFrames();
            DoubleAnimationUsingKeyFrames changeHeight = new DoubleAnimationUsingKeyFrames();
            DoubleAnimationUsingKeyFrames changeOrientation = new DoubleAnimationUsingKeyFrames();

            moveCenter.From = News1.ActualCenter;
            moveCenter.To = new Point(250, 400);
            moveCenter.Duration = new Duration(TimeSpan.FromSeconds(1.0));
            moveCenter.FillBehavior = FillBehavior.Stop;
            stb.Children.Add(moveCenter);
            Storyboard.SetTarget(moveCenter, News1);
            Storyboard.SetTargetProperty(moveCenter, new PropertyPath(ScatterViewItem.CenterProperty));

            changeWidth.Duration = TimeSpan.FromSeconds(1);
            changeWidth.KeyFrames.Add(new EasingDoubleKeyFrame(266, KeyTime.FromTimeSpan(new System.TimeSpan(0, 0, 1))));
            changeWidth.FillBehavior = FillBehavior.Stop;
            stb.Children.Add(changeWidth);
            Storyboard.SetTarget(changeWidth, News1);
            Storyboard.SetTargetProperty(changeWidth, new PropertyPath(FrameworkElement.WidthProperty));

            changeHeight.Duration = TimeSpan.FromSeconds(1);
            changeHeight.KeyFrames.Add(new EasingDoubleKeyFrame(400, KeyTime.FromTimeSpan(new System.TimeSpan(0, 0, 1))));
            changeHeight.FillBehavior = FillBehavior.Stop;
            stb.Children.Add(changeHeight);
            Storyboard.SetTarget(changeHeight, News1);
            Storyboard.SetTargetProperty(changeHeight, new PropertyPath(FrameworkElement.HeightProperty));

            changeOrientation.Duration = TimeSpan.FromSeconds(1);
            changeOrientation.KeyFrames.Add(new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(new System.TimeSpan(0, 0, 1))));
            changeOrientation.FillBehavior = FillBehavior.Stop;
            stb.Children.Add(changeOrientation);
            Storyboard.SetTarget(changeOrientation, News1);
            Storyboard.SetTargetProperty(changeOrientation, new PropertyPath(ScatterViewItem.OrientationProperty));

            stb.Begin(this);

            News1.Center = new Point(250, 400);
            News1.Orientation = 0;
            News1.Width = 266;
            News1.Height = 400;
            Pin1.Visibility = Visibility.Collapsed;
            news1IsOutside = true;
            Scroll1.IsEnabled = true;

What's wrong with it?

Answer 1

The Problem

The essence of the problem is that you are calling stb.Begin() and then immediately changing News1.Width, etc. Unfortunately stb.Begin() is not guaranteed to start the animations immediately: At times it does so in a dispatcher callback.

What is happening to you is that the first time your storyboard executes, stb.Begin() schedules a dispatcher callback to start the animations and immediately returns. The next four lines of your code update the values:

News1.Center = new Point(250, 400);      
News1.Orientation = 0;      
News1.Width = 266;      
News1.Height = 400;

When the animations actually start in the dispatcher callback they see the new values and use those as their starting values. This causes the object appears to jump to the new value immediately.

For example, changeWidth declares a keyframe that animates the value to 266:

changeWidth.KeyFrames.Add(new EasingDoubleKeyFrame(266, ...

And later the initial width is set to 266:

News1.Width = 266;

So if the storyboard is delayed starting, the width will animate from 266 to 266. In other words, it will not change. If you later use another animation to change News1.Width to something other than 266 and then run the changeWidth animation, it will work.

Your moveCenter animation works reliably because it actually sets its From value to the current value:

moveCenter.From = News1.ActualCenter;    
moveCenter.To = new Point(250, 400);

Thus the animation always starts at the old center, even if the News1.Center = new Point(250,400) once the animation has started.

The Solution

Just as you set "From" on your PointAnimation, you can also set an initial value in your other animations. This is done by adding a key frame at time=0 specifying the current width:

changeWidth.Duration = TimeSpan.FromSeconds(1);
changeWidth.KeyFrames.Add(new DiscreteDoubleKeyframe(News1.Width, KeyTime.Paced));
changeWidth.KeyFrames.Add(new EasingDoubleKeyFrame(266, KeyTime.Paced));

This code uses the fact that KeyTime.Paced automatically results in 0% and 100% if there are two key frames. In fact, setting the first frame as KeyFrame.Paced will always be equivalent to KeyTime.FromTimeSpan(TimeSpan.Zero).