Share via


Add animation that will play after a change in state

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.30).png.

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

    Note

    When Base is selected under States, Show Timeline Dd185497.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(en-us,Expression.30).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.30).png

  5. To add more animation, move the playhead Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.30).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.30).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.30).png

  6. Preview your animation by clicking Play Dd185497.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.30).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