Playing Different Types of Animations in Response to Events
You can use different types of animations to play in response to the following events.
Alpha plays the animation when an alpha value for a view item changes. Typically, alpha animations use AlphaKeyframes using the RelativeTo attribute set to "Current" for the first keyframe and "Final" for the last keyframe.
The following example shows an image that uses an Alpha animation—when you hover over or away from the star, its alpha value changes and triggers the Alpha event.
<Mcml xmlns="https://schemas.microsoft.com/2008/mcml" xmlns:me="Me"> <UI Name="AlphaEvent"> <Rules> <Default Target="[Input.KeyInteractive]" Value="true"/> </Rules> <Content> <Panel> <Layout> <FlowLayout Orientation="Vertical" Spacing="10,10" ItemAlignment="Center"/> </Layout> <Children> <Text Color="DarkGoldenrod" Content="The star uses an alpha animation in response to a change in focus." WordWrap="true"/> <me:Anim_BlueStar /> </Children> </Panel> </Content> </UI> <UI Name="Anim_BlueStar"> <Rules> <Default Target="[Input.KeyInteractive]" Value="true"/> <!-- If the star gets focus, increase its Alpha value to 1. --> <Condition Source="[Input.KeyFocus]" SourceValue="true"> <Actions> <Set Target="[BlueStar.Alpha]" Value="1.0" /> </Actions> </Condition> </Rules> <Content> <Panel> <Layout> <FlowLayout Orientation="Horizontal" Spacing="10,10"/> </Layout> <Children> <Graphic Name="BlueStar" Content="file://BlueStar.PNG" MouseInteractive="true" Alpha="0.2"> <Animations> <Animation Type="Alpha" Loop="0"> <Keyframes> <AlphaKeyframe Time="0.0" RelativeTo="Current" /> <AlphaKeyframe Time="0.5" RelativeTo="Final" /> </Keyframes> </Animation> </Animations> </Graphic> </Children> </Panel> </Content> </UI> </Mcml>ContentChangeShow and ContentChangeHide play the animation when the Content attribute of a Graphic, Text, or ColorFill element or the Source attribute of a Host element changes. For example, the content would be an image in a Graphic view item or a string in a Text view item. These events can be used to create a crossfade transition when content changes; for example, you can use ContentChangeShow on the new content to fade in, and to ContentChangeHide on the old content to fade out.
These animations only play when the content changes, but you can repeat the same animation by invoking the ForceContentChange method on the view item.
The following example shows a UI with a Graphic element that changes from a green star image to a yellow star image (and back again) when clicked. ContentChangeShow is used to animate the new image. ContentChangeHide animates the old image that is being replaced. Each type is displayed separately and combined so you can compare the effects.
<Mcml xmlns="https://schemas.microsoft.com/2008/mcml" xmlns:me="Me"> <UI Name="Anim_ContentChange"> <Content> <Panel> <Layout> <FlowLayout Orientation="Vertical" Spacing="5,0" ItemAlignment="Center" /> </Layout> <Children> <Text Color="White" Content="Click a star to change images." Margins="0,0,0,10" /> <Text Color="White" Content="Animate ContentChangeShow + ContentChangeHide:" /> <me:ContentChangeAnimations /> <Text Color="White" Content="Animate ContentChangeShow only:" /> <me:ContentChangeAnimations_Show /> <Text Color="White" Content="Animate ContentChangeHide only:" /> <me:ContentChangeAnimations_Hide /> </Children> </Panel> </Content> </UI> <UI Name="ContentChangeAnimations"> <Properties> <Image Name="GreenStar" Image="file://GreenStar.png" /> <Image Name="YellowStar" Image="file://YellowStar.png" /> </Properties> <Locals> <BooleanChoice Name="Toggle" Value="true" /> <ClickHandler Name="Clicker" /> </Locals> <Rules> <Condition Source="[Toggle.Value]" SourceValue="true" Target="[Image.Content]" Value="[GreenStar]" /> <Condition Source="[Toggle.Value]" SourceValue="false" Target="[Image.Content]" Value="[YellowStar]" /> <!-- When the image is clicked, swap the images using the Boolean value. --> <Changed Source="[Clicker.Invoked]"> <Actions> <Set Target="[Toggle.Value]" Value="[Toggle.Value]"> <Transformer> <BooleanTransformer Inverse="true" /> </Transformer> </Set> </Actions> </Changed> </Rules> <Content> <Graphic Name="Image"> <Animations> <Animation Type="ContentChangeShow"> <!-- This animates the new image (the one being shown). --> <Keyframes> <PositionKeyframe Time="0.0" Value="-300,0,0" Interpolation="Exp" /> <PositionKeyframe Time="1.0" Value="0,0,0" /> <AlphaKeyframe Time="0.0" Value="0.0" Interpolation="Exp" /> <AlphaKeyframe Time="1.0" Value="1.0" /> </Keyframes> </Animation> <Animation Type="ContentChangeHide"> <!-- This animates the old image (the one being hidden). --> <Keyframes> <PositionKeyframe Time="0.0" Value="0,0,0" Interpolation="Log" /> <PositionKeyframe Time="1.0" Value="300,0,0" /> <AlphaKeyframe Time="0.0" Value="1.0" Interpolation="Log" /> <AlphaKeyframe Time="1.0" Value="0.0" /> </Keyframes> </Animation> </Animations> </Graphic> </Content> </UI> <UI Name="ContentChangeAnimations_Show"> <Properties> <Image Name="GreenStar" Image="file://GreenStar.png" /> <Image Name="YellowStar" Image="file://YellowStar.png" /> </Properties> <Locals> <BooleanChoice Name="Toggle" Value="true" /> <ClickHandler Name="Clicker" /> </Locals> <Rules> <Condition Source="[Toggle.Value]" SourceValue="true" Target="[Image.Content]" Value="[GreenStar]" /> <Condition Source="[Toggle.Value]" SourceValue="false" Target="[Image.Content]" Value="[YellowStar]" /> <Changed Source="[Clicker.Invoked]"> <Actions> <Set Target="[Toggle.Value]" Value="[Toggle.Value]"> <Transformer> <BooleanTransformer Inverse="true" /> </Transformer> </Set> </Actions> </Changed> </Rules> <Content> <Graphic Name="Image"> <Animations> <Animation Type="ContentChangeShow"> <Keyframes> <PositionKeyframe Time="0.0" Value="-300,0,0" Interpolation="Exp" /> <PositionKeyframe Time="1.0" Value="0,0,0" /> <AlphaKeyframe Time="0.0" Value="0.0" Interpolation="Exp" /> <AlphaKeyframe Time="1.0" Value="1.0" /> </Keyframes> </Animation> </Animations> </Graphic> </Content> </UI> <UI Name="ContentChangeAnimations_Hide"> <Properties> <Image Name="GreenStar" Image="file://GreenStar.png" /> <Image Name="YellowStar" Image="file://YellowStar.png" /> </Properties> <Locals> <BooleanChoice Name="Toggle" Value="true" /> <ClickHandler Name="Clicker" /> </Locals> <Rules> <Condition Source="[Toggle.Value]" SourceValue="true" Target="[Image.Content]" Value="[GreenStar]" /> <Condition Source="[Toggle.Value]" SourceValue="false" Target="[Image.Content]" Value="[YellowStar]" /> <Changed Source="[Clicker.Invoked]"> <Actions> <Set Target="[Toggle.Value]" Value="[Toggle.Value]"> <Transformer> <BooleanTransformer Inverse="true" /> </Transformer> </Set> </Actions> </Changed> </Rules> <Content> <Graphic Name="Image"> <Animations> <Animation Type="ContentChangeHide"> <Keyframes> <PositionKeyframe Time="0.0" Value="0,0,0" Interpolation="Log" /> <PositionKeyframe Time="1.0" Value="300,0,0" /> <AlphaKeyframe Time="0.0" Value="1.0" Interpolation="Log" /> <AlphaKeyframe Time="1.0" Value="0.0" /> </Keyframes> </Animation> </Animations> </Graphic> </Content> </UI> </Mcml>GainFocus and LoseFocus play the animation when the UI that contains the view item gains or loses mouse or keyboard focus. When Input.Keyfocus="true", GainFocus plays the animation. When Input.KeyFocus="false", LoseFocus plays the animation. For more information about input focus, see Working with Input Handlers.
The following example shows an image that responds to gaining and losing focus events with animation.
<Mcml xmlns="https://schemas.microsoft.com/2008/mcml" xmlns:me="Me"> <UI Name="Anim_Event"> <Rules> <Default Target="[Input.KeyInteractive]" Value="true" /> </Rules> <Content> <Panel> <Layout> <FlowLayout Orientation="Vertical" Spacing="5,0" ItemAlignment="Center" /> </Layout> <Children> <Text Color="DarkGoldenrod" Content="Hover over a star to put focus on it"/> <me:AnimStar /> <me:AnimStar /> </Children> </Panel> </Content> </UI> <UI Name="AnimStar"> <Rules> <Default Target="[Input.KeyInteractive]" Value="true" /> </Rules> <Content> <Graphic Name="GreenStar" Content="file://GreenStar.PNG" MouseInteractive="true"> <Animations> <Animation Type="GainFocus" Loop="1"> <Keyframes> <PositionKeyframe Time="0.0" Value="-3,0,0" /> <PositionKeyframe Time="0.1" Value=" 3,0,0" /> <PositionKeyframe Time="0.2" Value="-3,0,0" /> <AlphaKeyframe Time="0.0" Value="0.6" /> <AlphaKeyframe Time="0.2" Value="1.0" /> </Keyframes> </Animation> <Animation Type="LoseFocus" Loop="1"> <Keyframes> <AlphaKeyframe Time="0.0" Value="0.3" /> <AlphaKeyframe Time="0.5" Value="0.2" /> <AlphaKeyframe Time="1.0" Value="0.3" /> </Keyframes> </Animation> </Animations> </Graphic> </Content> </UI> </Mcml>Idle plays the animation when a view item is idle; that is, when no other animation event is active. This animation represents the "rest state" of your view item.
Show and Hide play the animation when a view item becomes visible or hidden (the view item's Visible attribute is true or false). You can apply the Show and Hide transitions however you want. However, at the end of a Show animation, the item is located at the position specified by its layout and is visible.
The following example shows an animation that triggers the Show and Hide events when clicked, and has an animation for the Idle state.
<Mcml xmlns="https://schemas.microsoft.com/2008/mcml"> <UI Name="ShowHideStar"> <Locals> <BooleanChoice Name="StarVisible" Value="true" Description="Visible" /> <ClickHandler Name="Clicker" /> </Locals> <Rules> <Binding Source="[StarVisible.Value]" Target="[Image.Visible]" /> <Changed Source="[Clicker.Invoked]"> <Actions> <Set Target="[StarVisible.Value]" Value="[StarVisible.Value]"> <Transformer> <BooleanTransformer Inverse="true" /> </Transformer> </Set> </Actions> </Changed> </Rules> <Content> <Panel> <Layout> <FlowLayout Orientation="Vertical" ItemAlignment="Center" /> </Layout> <Children> <Panel > <Layout> <FlowLayout Orientation="Vertical" ItemAlignment="Center"/> </Layout> <Children> <Text Name="Desc" Color="White" Content="Click this text to show or hide the star." /> </Children> </Panel> <Panel MinimumSize="100,100" MaximumSize="100,100"> <Children> <Graphic Name="Image" Content="file://greenstar.png" > <Animations> <Animation Type="Show"> <Keyframes> <AlphaKeyframe Time="0.0" Value="0.0" /> <AlphaKeyframe Time="1.0" Value="1.0" /> </Keyframes> </Animation> <Animation Type="Hide"> <Keyframes> <AlphaKeyframe Time="0.0" Value="1.0" /> <AlphaKeyframe Time="1.0" Value="0.0" /> </Keyframes> </Animation> <Animation Type="Idle" Loop="-1"> <Keyframes> <PositionKeyframe Time="0.00" Value="0,2,0" /> <PositionKeyframe Time="0.05" Value="-2,0,0" /> <PositionKeyframe Time="0.10" Value="0,-2,0" /> <PositionKeyframe Time="0.15" Value="2,0,0" /> </Keyframes> </Animation> </Animations> </Graphic> </Children> </Panel> </Children> </Panel> </Content> </UI> </Mcml>Move plays the animation when a view item is moved. Typically, Move animations use PositionKeyframes using the RelativeTo attribute set to "Current" for the first keyframe and "Final" for the last keyframe.
Rotate plays the animation when a view item is rotated. Typically, Rotate animations use RotateKeyframes, using the RelativeTo attribute set to "Current" for the first keyframe and "Final" for the last keyframe.
Scale plays the animation when a view item changes scale. Typically, Scale animations use ScaleKeyframes, using the RelativeTo attribute set to "Current" for the first keyframe and "Final" for the last keyframe.
Size plays the animation when a view item changes size. This changes the item's size with an animation rather than applying an abrupt change. Typically, Size animations use SizeKeyframes, using the RelativeTo attribute set to "Current" for the first keyframe and "Final" for the last keyframe.
Sample Explorer
- Animation –- Keyframes > all samples
- Animation - Modifiers > all samples
- Animation - Interpolations > all samples
- Animation - Types > all samples
See Also