Animations - Some Variations

Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty));

					  

The alternative is using a string:

Storyboard.SetTargetProperty(anima, new PropertyPath("Angle"));

You might prefer that syntax because it’s shorter, but it doesn’t guarantee that you haven’t misspelled the property name.

The advantage of using strings for property names is that you can stack property names in a pile. This allows you to animate a property of an object without referencing that object itself. For example, in the Click event handler above you can set the target of the animation to be the Button instead of the RotateTransform:

Storyboard.SetTarget(anima, btn);

The RotateTransform still needs to exist, and you still need to indicate that you’re targeting the Angle property of that object, but look at how you do it:

Storyboard.SetTargetProperty(anima,
        new PropertyPath("(Button.RenderTransform).(RotateTransform.Angle)"));

					  

This syntax—admittedly more common in XAML than in code—indicates that RenderTransform is a property of Button, and Angle is a property of RotateTransform, and the RotateTransform is set on the RenderTransform property. If the RenderTransform property is not set to a RotateTransform object, this will fail.

You can simplify the syntax a bit by removing the qualification of the Angle property:

Storyboard.SetTargetProperty(anima,
        new PropertyPath("(Button.RenderTransform).Angle"));

But this might be a little confusing. It looks like Angle is a property of RenderTransform, and it’s really not. Angle is a property of a RotateTransform that’s set on the RenderTransform property.

Regardless how you specify it, the animated property must be a dependency property.

The Storyboard class and the DoubleAnimation class are actually siblings, as the following class hierarchy shows:

Object
        DependencyObject (abstract)
               Timeline (abstract)
                        DoubleAnimation
                        DoubleAnimationUsingKeyFrames
                        ColorAnimation
                        ColorAnimationUsingKeyFrames
                        PointAnimation
                        PointAnimationUsingKeyFrames
                        ObjectAnimationUsingKeyFrames
                        Storyboard

Storyboard defines a Children property of type TimelineCollection, meaning that a Storyboard can contain not only animation objects but also other StoryboardStoryboard also defines the attached properties that you use to associate an animation with a particular object and dependency property. objects to control a complex collection of animations.

The Timeline class defines the Duration property that the program set to 0.5 seconds:

anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

You can also set the duration on the storyboard to something less than that:

storyboard.Duration = new Duration(TimeSpan.FromSeconds(0.25));

This will cause the animation to be truncated at 0.25 seconds. By default, the duration of a storyboard is the longest duration of its child timelines (in this case 0.5 seconds), and in most cases you don’t want to override that.

Timeline also defines a BeginTime property that you can set on either the Storyboard or DoubleAnimation:

anima.BeginTime = TimeSpan.FromSeconds(1);

Now the animation doesn’t start for a second.

The AutoReverse property is a Boolean with a default value of false. Try setting it to true:

anima.AutoReverse = true;

Now the button spins around 360° clockwise and then spins 360° counterclockwise. The total animation lasts for a second.

The RepeatBehavior property indicates how many times you want the animation to repeat itself:

anima.RepeatBehavior = new RepeatBehavior(3);

Now the button spins around three times for a total duration of 1.5 seconds. You can combine RepeatBehavior with AutoReverse:

anima.RepeatBehavior = new RepeatBehavior(3);
anima.AutoReverse = true;

Now the button spins around once, and then back, and then forward again, and then back, forward for the third time, and then back. Total duration: 3 seconds.

But perhaps that’s not what you want. Perhaps you want the button to spin forward three times and then back three times. Easy enough. Just set RepeatBehavior on the animation:

anima.RepeatBehavior = new RepeatBehavior(3);

And set AutoReverse on the Storyboard:

storyboard.AutoReverse = true;

It’s also possible to set RepeatBehavior in terms of time rather than a number:

anima.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(0.75));

Now the button animation keeps repeating for the duration of the RepeatBehavior time. In this case, it will make 1½ revolutions and be left upside-down (unless AutoReverse is also set to true to bring it back to normal).

The RepeatBehavior property can also be set to the static RepeatBehavior.Forever value, but you probably don’t want to use that in this particular example!

For the next several experiments, remove all the changes you might have made to the original program but change the duration of the animation to 5 seconds to see more clearly what’s going on:

anima.Duration = new Duration(TimeSpan.FromSeconds(5));

You can sequentially click the three buttons and all the animations run independently. That’s expected because all the animations are separate objects. But what happens when you click a button that’s already in the middle of an animation? You’ll discover that it starts over again from zero. You’re basically applying a new animation that replaces the old animation, and the new animation always begins at 0° and proceeds to 360°. That’s how the properties are defined:

anima.From = 0;
anima.To = 360;

Dependency properties such as the Angle property of RotateTransform have a base value, which is the value of the property when an animation is not active. There’s actually a method defined by DependencyObject that lets you obtain this value: GetAnimationBaseValue can be called on any DependencyObject derivative with an argument set to a DependencyProperty, such as RotateTransform.AngleProperty.

If you call GetAnimationBaseValue for that Angle property, you’ll get the value zero. Try commenting out the From property setting, leaving only the To:

// anima.From = 0;
anima.To = 360;

And it works. The animation animates the Angle property from its base value of zero to 360. But if you click the Button multiple times as the button is slowly spinning, something odd happens: It won’t start over from 0 because there is no From property setting. But the velocity of the button slows down because each new animation starts from the current position of the button, so it has less distance to travel to reach 360 but the same amount of time to do it in.

But does it really work? After the animation has concluded, try clicking the button again. Nothing happens! The animation has left the Angle property at a value of 360, so there’s nothing for subsequent animations to do!

Now try this:

anima.From = -360;
anima.To = null;

The To property setting might look a little strange since you probably assumed that From and To are of type double. They’re actually nullable double values, and the default values are null. Setting the value to null is the same as not setting it at all. These settings work much like the original settings. Whenever you click the button, it jumps to the value of –360° and then is animated to its base value, which is 0.

Let’s look at this one again:

// anima.From = 0;
anima.To = 360;

After the animation ends, the Angle property is left at the value of 360. That behavior is the result of the FillBehavior property defined by Timeline. By default, this property is set to the enumeration value FillBehavior.HoldEnd, which causes a property to be left at the animated value after the animation ends. Try this alternative:

// anima.From = 0;
anima.To = 360;
anima.FillBehavior = FillBehavior.Stop;

This setting causes the effect of the animation to be removed from the property. After the animation concludes, the Angle property reverts to its pre-animated value of 0. We can’t actually see that property snap back, because 0° is the same as 360°, but it does. You can see the effect more clearly if you set the To value to 180.

An alternative to the To and From properties is By. Try this:

// anima.From = 0;
// anima.To = 360;
anima.By = 90;
anima.FillBehavior = FillBehavior.HoldEnd;

This setting of FillBehavior is the default value of HoldEnd. Each time you click the button, it advances by 90°. However, if you click it while it’s moving, it will be animated 90° from that position, so it ends up in some odd angle. The By value is useful in some cases to progressively increment a property by a certain amount with each successive application of an animation.