Add animation that will play after a change in state

  • Article

You can add animation to a state that will play after the control transitions to that state. For example, a button changes color when you move the mouse pointer over it, which is a result of the transition to the MouseOver state. If you add animation to the MouseOver state, such as making the button spin around, that animation will run after the button changes color.

To add animation to a state

  1. Change to the Animation Workspace. This moves the Objects and Timeline panel underneath the artboard to provide more room to display the timeline.

  2. Under States, select the state to which you want to add animation.

  3. In the Objects and Timeline panel, click Show Timeline Dd185497.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(en-us,Expression.40).png.

    Dd185497.9985179e-40a4-488b-97e1-94625d2480f4(en-us,Expression.40).png

    Note

    When Base is selected under States, Show Timeline Dd185497.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(en-us,Expression.40).png does not appear because you are not in state-recording mode.

  4. If you made the appearance of the control in this state different from its default appearance (when Base is selected), a keyframe is already set at the 0-second mark.

    Dd185497.54c77792-cbb0-4f6c-a7c4-88d5e8228c42(en-us,Expression.40).png

  5. To add more animation, move the playhead Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.40).png to another time on the timeline, and then make a change to an object on the artboard.

    For example, to make a playing card spin around, move the playhead Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.40).png to the 1-second mark, select the LayoutRoot object in the Objects and Timeline panel, and then, under Transform in the Properties panel, select the Rotate tab, and set the Angle property to 360.

    Dd185497.e67a5de7-5ff8-4eb5-ac18-e42c820451fb(en-us,Expression.40).png

  6. Preview your animation by clicking Play Dd185497.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.40).png.

  7. Press F5 to test your in-state animation.

    Tip

    If you do not want your control to rotate backward to 0 degrees when the state changes again, you can set the transition time to 0 seconds for this state when it transitions to all other states. For a procedure to follow, see Modify the transition time between state changes.

Next steps

  • You can make your in-state animation loop multiple times or forever, or reverse when it reaches the last keyframe. For more information, see Modify a storyboard to repeat or reverse.

  • You can adjust how fast the animation occurs between keyframes to create a more natural animation. For more information, see Change animation interpolation between keyframes.

  • If you are modifying a system control template, you can press F5 to see the changes in your application. If you are working with a user control, you can see the modified animation in action by making your user control respond to mouse clicks. For more information, see Change states in response to user interaction.

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.