One of the areas that Visual Studio doesn’t touch at all is the creation of animations which are entirely in the realm of Blend although you can hand-crank the XAML if you’re feeling up to the challenge.

Blend’s really powerful when it comes to animations but I still find from time to time that I’ve left myself in “animation mode” when I didn’t mean to so it takes a little bit of getting used to.

Animations are done in the Objects and Timeline panel and I usually lay it out at the bottom of the screen when I’m working with it ( remember Workspaces );

on the artboard I’ve got a nice, blue star shape and if I wanted to animate something about it (e.g. its rotation) then I need to construct a new storyboard;

give it a name on the dialog that pops up and then the whole environment changes into “animation mode”. The Objects/Timeline panel displays a timeline for that animation;

and any property changes that you’re making are assumed to be part of the animation, not regular property changes. That’s the bit that I often forget about although it is fairly obvious;

and to toggle it on/off you click on that red circle. If it is toggled off then the timeline stays open unless you close the storyboard;

when it collapses itself back down until you open it again from the drop-down;

and it’s back to “recording mode” once again.

In recording mode, you drag the recording head around the timeline and then drop keyframes by changing the value of some property in the Properties panel. For instance, if I want to rotate my star over a 4 second period;

then I just change the property value and a little marker shows up on the timeline. It’s useful to know that you can get to the actual property changed by expanding out the little tree on the left;

and that lets you get to properties like the repeat count.

If I test my animation with the play button then I see that it’s a little boring as it’s a linear interoplation from the starting rotation value ( 0 ) to 360 over 4 seconds.

I could change that by adding keyframes – perhaps I want to do the first 180 degrees of rotation in 1 second so I just go to 1 second and add that frame.

I can also control how the interpolation is being done over on the Easing properties of the Properties Panel. I could use to go with my own KeySpline like this one which starts off quickly and then degrades;

or I can use a number of Easing functions such as Elastic and I can provide function-specific parameters to those functions and control whether they apply at beginning/end/both of the animation;

Starting with a different artboard;

which is just 3 TextBlocks with BlurEffects applied to them, I might want to have the centre piece of text “zoom out” in some way which the others blur so I can animate a few properties as in;

It’s handy to zoom the timeline for this kind of thing;

and also change the snap resolution on the playhead so you can move it around with smaller increments ( or turn it off );

and then I animated;

• BlurEffect on the two outer TextBlocks to make its radius go from 0 to 5 over 0.25 seconds
• Scale transform on the inner ViewBox to make it grow to be twice as big
• Translate transform on the inner ViewBox to make it move down a little
• Projection on the inner ViewBox to make it rotate negatively around the Y axis.

but I wanted my rotation to occur after the text has grown and moved so I made sure to insert a keyframe on that animation of the RotationY property so that it effectively only starts to change at 0.25s when the other animations have already run.

Now, if I was using this animation for a particular “effect” then I’d more than likely want to be able to reverse it after it had run because I don’t want that lettering “TWO” always highlighted so I’d want to auto reverse the whole set of animations.

This is easy;

and so I can have the Storyboard reverse itself automatically or get it to repeat a few times or forever.

It’s more likely though that I’d want to run the initial storyboard when the mouse goes over my “TWO” TextBlock and I’d want to run the reverse storyboard when it leaves.

That means 2 Storyboards where one is the inverse of the other. Easy enough to do – I’d just duplicate my storyboard;

and then reverse the copy;

and then I just need to trigger these when the mouse hits the right place using Behaviors;

and the other one doing a similar thing for MouseLeave giving me a “working” UI displayed here in the glory of IE9;

the other place where animations crop up is in the real of states/transitions but I’ll try and post something separately about that…