In-State Animation In A Nutshell
I’ll be covering this in videos and tutorials in depth, but I’ve come to realize that in-state animation is so straight forward that it can be explained in a quick blog entry. In fact, the really hard part is explaining what it is viz: the Visual State Manager uses animation (story boards) move from one state (e.g., MouseOver) to another state (e.g., MouseDown). In-state Animation allows you to add animation whilst (I’m going to the UK soon) you are in a state.
An example: When teaching templates I show how to have a button “swell” when you mouse over, and then I show how to have that swelling be non-instantaneous (by setting the transition time to non zero). You can see all that in this tutorial or in this video. If however, you’d like your button not only to swell, but then to pulse gently while you hold the mouse over it, you need a bit of in-state animation. Fortunately, this is incredibly easy to do.
Start With The Tutorial Code
To keep this as simple as possible, I’m going to start with the code from the tutorial which I’ll open in Blend. There is quite a bit of code here, but I don’t care about any of it except modifying the template for the Button – specifically the Mouse-Over behavior.
Thus I’ll click on the Resources tab, turn the triangle to reveal what is in App.xaml and double-click on RoundButton, putting Blend into Template Editing.
In the Objects and Timeline tab I can see the contents of the Round Button (the Ellipse and the Text). I’ll click on MouseOver which is the state I want to change, and I see that both sub-parts are already being changed (they swell). In properties / Transform I can see that the Ellipse and the Text are increased to 1.2 (120%) of their normal size. Great, ready to go.
To begin the in-state animation, I click on the Show Timeline button:
This immediately causes the timeline to slide out from behind the Objects and Timeline window. There are two ovals at time 0 indicating that what I’m looking at in the properties window is the state of the ButtonEllipse and ButtonText the instant the button is fully in MosueOver state (that is, once the transition completes).
I’ll click on 1 second which will light that line yellow and now I'm ready to set the properties that I want at 1 second; specifically that the ButtonEllipse and the ButtonText will shrink to 0.8 (80% of their initial size). A connection appears between 0 and 1 second indicating that the time between will be filled for me with the intermediate values, and sure enough if I click on one of the ticks between, I can see in the transforms window an intermediate value.
Setting The Repeat Behavior
The next step is key. Click on the State in the Objects and Timeline, which will bring up the Common Properties window in the Properties area…
… so that you can click on AutoReverse, and Repeat Behavior of Forever.
Note that in my preview of Blend it sticks on 1x but the Xaml is property updated.
That’s it!
Click on the Page.xaml breadcrumb to exit the template editor, and then press F5 to compile and run. Your button should pulse when you mouse over.
Nothing to it
For fun, try having the text grow while the button shrinks. Or you could have the text spin while the button pulses. There is no end of annoying things you can do once you know how.
Enjoy.