09 August, 2010

Silverlight Visual State Manager epiphanyish

Sometimes you use something without a deeper understanding. Or you just fumble arround until you get the desired effect. Then you deside to research the darn thing because it just doesn't do what you want it to do. Just now I got a flash of understanding about how the Visual State Manager works (at least in Blend):
  1. You create a base state
    • The begin state it shows when the control loads
  2. You create the end state(s)
    • How the control looks in the new state
  3. Then you add a state transition with some time
    • This makes the an animation that goes from the base/begin state to the end state.
    • The system calculates from the begin state and the end state what the values in between should be
    • Blend shows an animation in the timeline without keyframes
    • It is possible to change the begin time and end time of the animation
    • You can add easing functions to liven it up
    • If, for example, you change the end rotation value, this value will overrule the end state value
If you want to customize the animation futher, for example you want the object to go in a jagged path from the base to the end state, you need keyframes. I haven't found a way to add keyframes or change the animation to an Animation Using Keyframes except using de code editor. What my problem is with this is that i have to copy the end state values into the transition which seems, well, double work and it is error prone because you have to manually keep those values synchronized.

My first intuition was that you have a base/begin state and an end state, and in the transition you add keyframes which fall in between the begin and end state. The system should calculate from the begin state to the first keyframe value and from the last keyframe value to the end state for the last leg of the animation.

In summary:
  1. begin state to end state
  2. add a transition for time
  3. change the begin and end state begin and end times in the transition
  4. add transition effects
  5. Change the begin value and end value of the transition
for straightish animations, after that, make a storyboard your self an copy that into the transition

No comments:

Post a Comment