Export (0) Print
Expand All

Add animation that will play after a change in state

This page applies to Silverlight 2 projects only

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.

  1. Press F6 to change to the Animation Workspace. This moves the Interaction panel beneath the artboard to provide more room to display the timeline.

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

  3. Under Objects and Timeline, click the Show Timeline Dd185497.927789b4-13c3-4722-9a18-d24675423e23(en-us,Expression.10).png button.

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

    When Base is selected under States, the Show Timeline Dd185497.927789b4-13c3-4722-9a18-d24675423e23(en-us,Expression.10).png button 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.10).png
  5. To add more animation, move the playhead Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.10).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.10).png to the 1-second mark, select the LayoutRoot object under Objects and Timeline, 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.10).png
  6. Preview your animation by clicking the Play Dd185497.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.10).png button.

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

    Dd185497.alert_tip(en-us,Expression.10).gifTip:

    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 in system controls.

Next steps

Community Additions

ADD
Show:
© 2014 Microsoft