Keyframe animation with WPF in multiple steps

Question

I want to animate the size of a circle in a WPF animation:

Ellipse circle = new Ellipse();
Double finalSize = 5.0;
Double initialSize = 10.0;
DoubleAnimationUsingKeyFrames animSize = new DoubleAnimationUsingKeyFrames();
animSize.KeyFrames.Add(new DiscreteDoubleKeyFrame(initialSize, KeyTime.FromPercent(0.0)));
animSize.KeyFrames.Add(new DiscreteDoubleKeyFrame(finalSize, KeyTime.FromPercent(1.0)));
animSize.SpeedRatio = 1;
circle.BeginAnimation(Canvas.WidthProperty, animSize);
circle.BeginAnimation(Canvas.HeightProperty, animSize);

But all I get is the first and the last frame. First, the circle has the initial size of 10 and a little bit later it switches to 5. There is no transition, no sizes in between.

I can change the SpeedRatio to 10 e.g. - but this changes only the speed of how fast the first frame is switched to the last frame.

What is the secret to get a smooth animation of the size from 10 to 5 with several transition steps?

Answer 1

Use LinearDoubleKeyFrame instead of DiscreteDoubleKeyFrame