Add animation to your app

Animations can enhance your app by adding effects, movement, and interactivity. For example, animating the transition time between the FaceDown and FaceUp states creates an engaging screen change and helps provide a visual cue to users.

A fluid UI is one of the cornerstones of Windows Store apps. According to the Windows Store app guidelines, visual elements in a UI should move in a smooth manner, allowing the user to track and observe changes rather than be confused and startled. To assist you in creating a fluid UI, Blend for Visual Studio 2012 provides Windows 8 theme animations.

In this procedure shows you how to use two Windows 8 theme animations in Blend. The two animations, FadeInThemeAnimation and FadeOutThemeAnimation, add transitions to different game card states.

To create a visual state group

1. In the States panel, click Add state group . To rename VisualStateGroup, double-click it, and then type CardStates.

2. Click CardStates and then click Add state  three times to add three new visual states.

3. Double-click VisualState and then type FaceDown.

4. Double-click VisualState1 and then type FaceUp.

5. Double-click VisualState2 and type Matched. Press Enter.

   Important

   Type state names exactly as noted. The Card objects (in MemoryViewModel) can read only specific names.

   Tip

   You can also rename visual states by typing the new state name in the Code editor under <VisualStateManger.VisualStateGroups>.

To add a theme animation to Image

1. On the Edit menu, click Select None or press Ctrl+Shift+A to clear any previous selection.

2. In the States panel, click FaceDown.

3. In the Properties panel, in the Theme Animations category, click Add theme animation  .

4. In the Add theme animations list, select FadeOutThemeAnimation.

   

5. In the Select Element dialog box, click Image, and then click OK.

   

6. Repeat steps 1-5 to add FadeOutThemeAnimation to the FrostedRect and FrameRect elements.

To copy FaceDown state to the FaceUp state

• In the States panel, right-click FaceDown, then click Copy State To, and then click FaceUp. This step copies all three FadeOutThemeAnimation animations that you created for the FaceDown state to the FaceUp state.

  In Code view, the FaceUp code looks like the following:

  <VisualState x:Name=”FaceUp”>
        <Storyboard>    
           <FadeOutThemeAnimation TargetName="image"/>
              <FadeOutThemeAnimation TargetName="FrostedRect"/>
           <FadeOutThemeAnimation TargetName="FrameRect"/>
        </Storyboard>
  </VisualState> 
  

To delete animations targeting the image and FrameRect objects

• In the States panel, click FaceUp. In the Properties panel, in the Theme Animations category, delete the FadeOutThemeAnimation entries targeting image and FrameRect by clicking Delete theme animation  to the right of the theme animation.

  

  Important

  When you select an animation in the Theme Animations category, the TargetName field displays the name of the target object.

To copy FaceUp state to Matched state and then change the animation to target the FrostedRect object

• In the States panel, right-click FaceUp, then click Copy State To, and then click Matched.

  

To modify the animation to target FrameRect

1. In the States panel, click Matched. In the Objects and Timeline panel, click FrostedRect.

2. In the Properties panel, in the Appearance category, in the Opacity text box, type 100. Press Enter.

To add a theme animation to the FrameRect Matched state

1. In the States panel, click Matched.

2. In the Properties panel, in the Theme Animations category, click Artboard element picker .

3. On the artboard, click FrameRect.

   Tip

   If the Theme Animations category does not display in the Properties panel, click Select None (Ctrl+Shift+A) in the Edit menu and then click Matched again in the States panel.

Transitions

Transitions are simple animations indicating a user interface (UI) state change or object manipulation. This section shows you how to add transitions between states.

To add a transition

1. In the States panel, click FaceDown, then click Add transition .

2. In the Add transition list, click FaceDown .

3. In the Transition duration number editor, type 0.3. Press Enter.

   In Code view, the FaceUp code looks like the following:

   <VisualStateGroup.Transitions>
       <VisualTransition GeneratedDuration="0:0:0.3" To="FaceDown"/>
   </VisualStateGroup.Transitions> 
   

The next step: Change the card template.