Section 6.2. Controlling Animations


6.2. Controlling Animations

Animation elements inherit several attributes from Timeline that control the speed and behavior of the animation. One of the more useful attributes is SpeedRatio, which controls the speed at which the animation moves. The attribute AutoReverse is also noteworthy. AutoReverse controls the behavior of the Timeline when it reaches the end of its Duration. Setting this value to TRue will cause the animation to reverse itself when it reaches the end of its iteration. Setting it to false will cause the animation to begin againif RepeatBehavior indicates that it should continueeither for a specified number of iterations through the animation, for a specified period of time, or forever.

Example 6-6 shows the same animation from Example 6-4, but RepeatBehavior is now declared as 2x and AutoReverse has been added and set to true. This animation will repeat twice, reversing itself each time. Although the animation declaration makes it appear that the Button will have a yellow background at the end of the animation, the background will actually be blue because we have set AutoReverse to true.

Example 6-6. Modifying the behavior of an Animation using AutoReverse and RepeatDuration

 <Page      xmlns="http://schemas.microsoft.com/winfx/avalon/2005"      xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">      <Page.Storyboards>          <SetterTimeline              TargetName="myButton"              Path="(Button.Background).(SolidColorBrush.Color)">              <ColorAnimation                  From="Blue"                  To="Yellow"                  Duration="0:0:5"                  AutoReverse="true"                  RepeatBehavior="2x" />          </SetterTimeline>     </Page.Storyboards>     <StackPanel >         <Button             Name="myButton"             Width="120"             Background="White">A Button         </Button>     </StackPanel> </Page> 

You can mix and match animations within a SetterTimeline to create more interesting effects. For example, to yield the code in Example 6-7, modify Example 6-4 by adding a second animation that animates the width of the Button using a DoubleAnimation. Then, coordinate the Duration of the DoubleAnimation with the Duration of the ColorAnimation and, for both animations, set the AutoReverse to true and the RepeatBehavior to Forever. This creates a Button that begins with a width of 100 and a background color of blue and then slowly expands to a width of 200 and changes its background color to yellow. Both animations then reverse themselves and repeat.

Example 6-7. Coordinating multiple animations for a Button

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">         <Page.Storyboards>         <SetterTimeline             TargetName="myButton"             Path="(Button.Background).(SolidColorBrush.Color)">             <ColorAnimation                 From="Blue"                 To="Yellow"                 Duration="0:0:5"                 RepeatBehavior="Forever"                 AutoReverse="true"/>         </SetterTimeline>         <SetterTimeline             TargetName="myButton"             Path="(Button.Width)">             <DoubleAnimation                 From="100"                 To="200"                 Duration="0:0:5"                 RepeatBehavior="Forever"                 AutoReverse="true"/>         </SetterTimeline>     </Page.Storyboards>     <StackPanel >         <Button             Name="myButton"             Width="120"             Background="White">A Button</Button>     </StackPanel> </Page> 

XAML also includes elements that can transform the position of other elements. RotateTransform, SkewTransform, translateTransform, and ScaleTransform provide basic 2-D transformation capabilities that can easily be used within animations to change the position and size of other elements.

Example 6-8 shows the code to rotate a rectangle in a circle around a specified point. The unnamed Rectangle is placed in the background with an Opacity of 0.25 to illustrate its starting position. The RotateTransform does not actually rotate the rectangle, because the Angle of the rotation is set to 0 degrees. It exists only to provide a way for the SetterTimeline to direct the DoubleAnimation to animate its Angle attribute from 0 degrees to 360 degrees over the course of four seconds (as indicated by the Duration attribute on the DoubleAnimation). Figures 6-5 through 6-7 show a few of the frames from this animation.

Example 6-8. Animating the RotateTransform of a Rectangle

 <Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005"    xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" >    <Page.Storyboards>          <SetterTimeline              TargetName="MyRectangle "              Path="(Rectangle.RenderTransform).(RotateTransform.Angle) ">              <DoubleAnimation                  From="0 "                  To="360 "                  RepeatBehavior="Forever "                  Duration="0:0:4 " />          </SetterTimeline>    </Page.Storyboards>    <StackPanel>        <Canvas            Width="400 "            Height="550 ">            <Rectangle                Canvas.Top="100 "                Canvas.Left="100 "                Fill="Blue "                Width="100 "                Height="100 "                Stroke="black "                StrokeThickness="5 "                Opacity="0.25 " />           <Rectangle               Name="MyRectangle "               Canvas.Top="100 "               Canvas.Left="100 "               Fill="blue "               Width="100 "               Height="100 "               Stroke="black "               StrokeThickness="5 ">               <Rectangle.RenderTransform>                   <RotateTransform                       Angle="0 "                       Center="50,50 " />               </Rectangle.RenderTransform>           </Rectangle>        </Canvas>     </StackPanel> </Page> 

Figure 6-5. Animated Rectangle transform


As with animations involving attributes of elements, you can mix and match the animations to create interesting effects. Using a ParallelTimeline to manage multiple SetterTimeline elements allows different aspects of the Rectangle to be animated. A ParallelTimeline allows child timelines to overlap and use their Begin attribute, if specified, to determine when they begin animating. Without using ParallelTimeline, each animation would become active in the order it was added, and the Begin attribute would be evaluated relative to the end time of the previous animation. (This is useful for performing animations in a specific sequence rather than as a combination of effects.) A ColorAnimation has been added to change the color from blue to yellow with the same Duration as the DoubleAnimation. Evaluating Example 6-9 in XamlPad will produce a rotating rectangle with a changing fill color. It may not be very useful, but it sure is fun to watch.

Figure 6-6. Animated rectangle at 40 degrees


Figure 6-7. Animated rectangle at 60 degrees


Example 6-9. Animating multiple attributes of an element with ParallelTimeline

 <Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005"    xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">    <Page.Storyboards>       <ParallelTimeline >          <SetterTimeline              TargetName="MyRectangle "              Path="(Rectangle.Fill).(SolidColorBrush.Color) ">              <ColorAnimation                 From="Blue "                 To="Yellow "                 Duration="0:0:4 "                 RepeatBehavior="Forever "                 AutoReverse="true " />          </SetterTimeline>          <SetterTimeline              TargetName="MyRectangle "              Path="(Rectangle.RenderTransform).(RotateTransform.Angle) ">              <DoubleAnimation                  From="0 "                  To="360 "                  RepeatBehavior="Forever "                  Duration="0:0:4 " />          </SetterTimeline>       </ParallelTimeline >    </Page.Storyboards>    <StackPanel>        <Canvas            Width="400 "            Height="550 ">            <Rectangle                Canvas.Top="100 "                Canvas.Left="100 "                Fill="Blue "                Width="100 "                Height="100 "                Stroke="black "                StrokeThickness="5 "                Opacity="0.25 " />           <Rectangle               Name="MyRectangle "               Canvas.Top="100 "               Canvas.Left="100 "               Fill="blue "               Width="100 "               Height="100 "               Stroke="black "               StrokeThickness="5 ">               <Rectangle.RenderTransform>                   <RotateTransform                       Angle="0 "                       Center="50,50 " />               </Rectangle.RenderTransform>           </Rectangle>        </Canvas>     </StackPanel> </Page> 

Adding DoubleAnimation elements that target the Height and Width of the rectangle can make it seem to disappear and reappear as the animation progresses. The flexibility of Avalon's animation system means that you are generally limited only by your imagination.




XAML in a Nutshell
XAML in a Nutshell (In a Nutshell (OReilly))
ISBN: 0596526733
EAN: 2147483647
Year: 2007
Pages: 217

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net