38、animation

1、Animations overview :

动画是通过计算开始和结束的值，在给定的时间内周期修改属性的值。这些值可以包括各种

各样的类型,包括 Color、Double、Point、等等，取决于将要操作的属性。

这个示例是在3秒内把 Canvas.Left 从 0 增长到 300，并且动画被设置为循环。

 <Grid.Resources>
                <Storyboard x:Name="Scenario1Storyboard">                   
                    <DoubleAnimation
                            Storyboard.TargetName="Scenario1Rectangle"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            Duration="0:0:3"
                            To="300"
                            RepeatBehavior="Forever"/>
                </Storyboard>
</Grid.Resources>
 <Canvas Width="400" Height="100">
                <Rectangle Name="Scenario1Rectangle" Width="100" Height="100" Fill="Indigo" />
 </Canvas>

2、Types of animations :

    不同类型的动画使用不同类型的值，并且使用不同的方式计算中间值。

    下面示例中的第一个方块使用 ColorAnimation 和 DoubleAnimation 计算 Color 和 Double 类型的值，从而

使用默认的线性插值来在开始值和结束值之间创建一个平滑动画。

      下面第二个方块使用 keyframes 代替 ColorAnimation 和 DoubleAnimation。关键帧在特定的时间内显示特定的中间值,也可显示如何计算这些时间之间的值。

  <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
            <Grid.Resources>
                <Storyboard x:Name="Scenario2ContinuousStoryboard">
                    <!-- //这个动画在3秒内使下面的第一个方块填充绿色的颜色 。注意到 为了使动画运行，
                         // EnableDependentAnimation 标识必须设置为 true ，因为 填充颜色动画不能独立操作
                       -->
                    <ColorAnimation
                            EnableDependentAnimation="true"
                            Storyboard.TargetName="Scenario2ContinuousRectangle"
                            Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                            Duration="0:0:3"
                            To="Green"
                            />

                  <DoubleAnimation
                            Storyboard.TargetName="Scenario2ContinuousRectangle"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            Duration="0:0:3"
                            To="300"
                            />
                </Storyboard>

                <Storyboard x:Name="Scenario2KeyFrameStoryboard">
        
                    <!-- //使用关键帧动画控制插值方法 .注意到 为了使
                         //动画运行， EnableDependentAnimation 标识必须设置为 true ，
                         //因为 填充颜色动画不能独立操作    -->
                    <ColorAnimationUsingKeyFrames
                            EnableDependentAnimation="true"
                            Storyboard.TargetName="Scenario2KeyFrameRectangle"
                            Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                            Duration="0:0:3"
                            >
                        <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red" />
                        <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Orange" />
                        <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Blue" />
                        <EasingColorKeyFrame KeyTime="0:0:3" Value="Green" />
                    </ColorAnimationUsingKeyFrames>

                   <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetName="Scenario2KeyFrameRectangle"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            Duration="0:0:3"
                            >
                         
                        <!--//前三段动画为离散改变值-->
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="50" />
                        <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="100" />
                        <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="200" />

                        <!--//最后一段为平滑改变值-->
                        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="300" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <StackPanel>
                <Canvas Width="400" Height="100">
                    <Rectangle Name="Scenario2ContinuousRectangle" Width="100" Height="100" Fill="Indigo" />
                </Canvas>
                <Canvas Width="400" Height="100" Margin="0,20,0,0">
                    <Rectangle Name="Scenario2KeyFrameRectangle" Width="100" Height="100" Fill="Indigo" />
                </Canvas>
            </StackPanel>
        </Grid>