01 、Windows 应用商店动画

      MSDN Silverlight 示例: http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm

       并非你创建的所有自定义动画都会默认运行（可能对你的应用有性能影响的动画称为从属动画）。如果你的动画导致布局更改或可能影响性能，则需要在代码中明确启用该动画。

      在应用中添加一点动画效果，可能会对用户体验有显著的提升。在 win8 中的一些控件自动带有动画效果，比如 GridView、FlipView、ProgressRing、ToolTip 等等。

  

1、过渡动画

    1） 在 win8 的 api 中提供了一些淡入淡出的动画过渡。

     例如：按钮轻快地滑入视图,在此代码中，我们将 EntranceThemeTransition 对象添加到按钮的过渡集中。可以在动画对象上设置一些属性，以调节它滑动的距离以及从什么方向滑动。

<Button Content="过渡按钮">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button> 

或者把它定义成样式，供其它按钮使用：

 <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>

在 ItemsControl 中使用 EntranceThemeTransition, 这样，容器的所有子对象都会参与过渡：

<!-- 子元素自动出现动画效果 -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- 应用 entrance 主题动画 -->
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>

<!--设置容器的模板为 WrapGrid 控件，宽度 400 像素-->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
       <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

    2）使用 RepositionThemeTransition 主题动画，当容器的一个或多个子对象更改位置时，也可以重新流动。

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- 添加 RepositionThemeTransition ，当删除项时，会有动画效果-->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>            
    
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

   相应的 C# 代码：

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {      
        rectangleItems.Items.RemoveAt(0);
    }                              
}

     3）将多个过渡动画运用到单个对象或对象容器，例如，同时运用 RepositionThemeTransition 和 EntranceThemeTransition：

<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>

   4）有多重过渡动画可以运用到 UI 元素上, 这些 API 的名称都包含“ThemeTransition” ：

API	描述
AddDeleteThemeTransition	为控件添加或删除子对象或内容的情形提供动画的过渡表现方式。通常，控件是项目容器。
ContentThemeTransition	为控件的内容更改时的情形提供动画的过渡表现方式。可以在应用 AddDeleteThemeTransition 后再应用它。
EntranceThemeTransition	为控件第一次显示的情形提供动画的过渡表现方式。
ReorderThemeTransition	为列表-视图控件项目更改顺序的情形提供动画的过渡表现方式。通常它作为拖放操作的结果出现。不同的控件和主题可能具有不同的动画特征。
RepositionThemeTransition	为控件更改位置的情形提供动画的过渡表现方式。

2、主题动画

     你可能想要对动画效果的计时和顺序进行稍多的控制, 同时对动画的表现方式仍使用一致的 Windows 主题。

     例如，使用  FadeOutThemeAnimation 将一个矩形淡出视图 :

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation Storyboard.TargetName="myRectangle"  />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300" />
</StackPanel>

//当用户点击该矩形时，动画开始执行
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

       你必须使用 Storyboard 来包含动画，而且必须使用事件处理程序来启动 Storyboard。你可以使用 Begin、Stop、Pause 以及 Resume Storyboard 方法来分别执行开始、停止、暂停以及恢复 Storyboard 动画。还可以更改动画的默认表现方式。例如，你可以通过增加 FadeOutThemeAnimation 上的 Duration 来放缓淡出。

      你可以为 UI 元素应用对个主题动画。API 中的 ThemeAnimation ：

API	描述
DropTargetItemThemeAnimation	应用到潜在的拖放目标元素的预配置动画。
FadeInThemeAnimation	控件第一次出现时应用到控件的预配置不透明度动画。
FadeOutThemeAnimation	控件从 UI 中删除或隐藏时应用到控件的预配置不透明度动画。
PopInThemeAnimation	控件的弹入组件显示时应用到它们的预配置动画。此动画结合了不透明度和转换。
PopOutThemeAnimation	控件的弹入组件关闭或删除时应用到它们的预配置动画。此动画结合了不透明度和转换。
RepositionThemeAnimation	对象重新放置时应用的预配置动画。
SplitCloseThemeAnimation	使用拆分动画显示目标 UI 的预配置动画。
PointerDownThemeAnimation	用于用户点击或单击项目或元素操作的预配置动画。
PointerUpThemeAnimation	在点击一个项目或元素后（指针不再悬停在上面）运行的用户操作预配置动画。
SplitOpenThemeAnimation	使用拆分动画显示目标 UI 的预配置动画。

3、创建你自己的动画：

     为了创建动画，要动画显示的属性必须是“依赖属性”。依赖属性是 Windows 运行时 XAML 实现的关键特征。大多数

常见 UI 元素的可写属性通常为依赖属性。依赖属性概述。

示例中，为 Opacity 属性创建了动画：

<StackPanel>
    <StackPanel.Resources>
        <!-- Animates the rectangle's opacity. -->
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0.0" Duration="0:0:1"
              AutoReverse="True" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped"
      x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue" />
</StackPanel>
 

相应的 C# ：

private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
} 

此动画与前面所示的使用 FadeOutThemeAnimation的淡出动画示例类似。你可以自己重复所有主题动画的动画表现方式。但最好在适当的位置使用主题动画，原因是：

• 预打包的主题和过渡动画使用较少的代码来实现。

• 它们比自定义的动画执行得更好。

• 它们的设计与 UI 设计指南保持一致。

有关如何使用属性的间接目标的属性路径来实现动画的详细信息，请参阅 属性路径语法或 Storyboard.TargetProperty。

4、启动动画

      并非所有自定义动画都会默认运行。可能对你的应用有性能影响的动画（尤其是布局效果动画）称为关联动画，你必须在运行前启用。若要启用你的动画，请在动画对象上将 EnableDependentAnimation 设置为 True。下个示例演示了如何使用此属性。此示例还演示了除了双精度类型值外，如何使其他属性值类型实现动画，如一个点如何开始、暂停、停止和恢复动画。

<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">
            <!-- 操作这个椭圆的中心坐标 -->
            <PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center"
              Storyboard.TargetName="MyAnimatedEllipseGeometry"
              Duration="0:0:5"
              From="20,200"
              To="400,100"
              RepeatBehavior="Forever" />
        </Storyboard>
    </Canvas.Resources>
    <Path Fill="Blue">
        <Path.Data>
            <!-- 显示一个椭圆. -->
            <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
             Center="20,20" RadiusX="15" RadiusY="15" />
        </Path.Data>
    </Path>
    <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
        <!-- 动画开始按钮. -->
        <Button Click="Animation_Begin" Width="65" Height="30" 
            Margin="2" Content="Begin" />
        <!-- 动画暂停按钮. -->
        <Button Click="Animation_Pause" Width="65" Height="30" 
            Margin="2" Content="Pause" />
        <!-- 动画恢复按钮. -->
        <Button Click="Animation_Resume" 
           Width="65" Height="30" Margin="2" Content="Resume" />
        <!--动画停止按钮,椭圆回到开始的位置 -->
        <Button Click="Animation_Stop" Width="65" Height="30" 
            Margin="2" Content="Stop" />
    </StackPanel>
</Canvas> 

相应的 C# ：

private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

5、使用关键帧动画创建动画

      上面我们演示了两个值之间创建的自定义动画  (from/to/by) 。关键帧动画使你可以使用两个以上的目标值并控制动画的

插入方法。通过指定多个值来创建动画，你可以作出更复杂的动画。通过指定动画的插入，特别是通过使用 KeySpline 属性，你可以控制动画的加速。

例: 使用关键帧动画来创建矩形高度的动画

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="Height">
           
                <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />

                <!--样条动画 ( Spline animations )是用来创建加速度。这个 SplineDoubleKeyFrame 创建一个动画,一开始减缓
然后加速。 这个矩形像是掉下来-->
                <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300" KeyTime="0:0:0.8" />

                <!-- 这样条动画创建“反弹”效果,在结束时矩形缩短其长度,然后迅速减缓和停止。 -->
                <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
                 KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" PointerPressed="Rectangle_Tapped" Fill="Blue"
Width="200" Height="30" />
</StackPanel>

相应的 C# :

private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

 

XAML 包括 3 个关键帧。每个关键帧指定一个值在某个时间点实现动画。整个动画持续 1.5 秒。

• LinearDoubleKeyFrame。LinearTypeKeyFrame 对象（如 LinearDoubleKeyFrame）在值之间创建一个平滑线性的过渡。但在此示例中，我们只使用它来指定在值 30 时间 0 处实现动画。
• SplineDoubleKeyFrame 指定在动画开始后，矩形的高度在时间 0.8 秒处为 300。SplineTypeKeyFrame 对象，按照 KeySpline 属性的值，如 SplineDoubleKeyFrame 在值之间创建了可变的过渡。在此示例中，矩形开始移动很缓慢，然后加速朝时间段终点移动。
• SplineDoubleKeyFrame 指定在动画开始后，矩形的高度在时间 1.5 秒处为 250，它是在最后的 SplineDoubleKeyFrame 结束后的 0.7 秒。与最后的 SplineDoubleKeyFrame不同，此关键帧使动画快速开始，然后在快到达终点时逐渐慢下来。

KeySpline 使用的最奇妙的属性可能就是 SplineDoubleKeyFrame 属性。此属性指定贝塞尔曲线的第一个控制点和第二个控制点，描述动画的加速。

 

6、缓动函数

      缓动动画支持你将自定义数学公式应用到动画。例如，你可能想对某个对象以理想的方式像弹簧一样弹跳。你可以

使用 关键帧  from/to/by 模拟这些效果但是工作量大，而且动画比起使用数学公式准确性要低。

 

缓动函数列表： 

• BackEase：动画开始在指定路径上运动前稍微收缩动画的运行。
• BounceEase：创建回弹效果。
• CircleEase：使用圆函数创建加速或减速的动画。
• CubicEase：使用函数 f(t) = t3 创建加速或减速的动画。
• ElasticEase：创建一个动画，模拟弹簧的来回振荡运动，直到它达到停止状态。
• ExponentialEase：使用指数公式创建加速或减速的动画。
• PowerEase：使用公式 f(t) = tp 创建加速或减速的动画，其中 p 等于幂属性。
• QuadraticEase：使用函数 f(t) = t2 创建加速或减速的动画。
• QuarticEase：使用函数 f(t) = t4 创建加速或减速的动画。
• QuinticEase：使用函数 f(t) = t5 创建加速或减速的动画。
• SineEase：使用正弦公式创建加速或减速的动画。

 

你可以使用此 Silverilght 示例试验不同的缓动函数。

 此示例为 DoubleAnimation 应用了一个 BounceEase 缓动函数以创建回弹效果:

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="Height">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" 
     Fill="Blue" Width="200" Height="30" />

</StackPanel>

private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

在前面的示例中，我们对从/到/按照动画应用了缓动函数。你也可以使用 EasingDoubleKeyFrame、EasingPointKeyFrame 或 EasingColorKeyFrame 将这些缓动函数应用到关键帧动画 下一个示例展示了如何使用带有缓动函数的关键帧来创建矩形动画，此动画向上压缩，降速，然后向下延伸（好像降落一样），然后回弹，直到停止。若要尝试此示例，请单击矩形查看效果。

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
             Storyboard.TargetProperty="Height"
             Storyboard.TargetName="myRectangle">

                 <!-- This keyframe animates the ellipse up to the crest
                      where it slows down and stops. -->
                 <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                     <EasingDoubleKeyFrame.EasingFunction>
                          <CubicEase EasingMode="EaseOut"/>
                     </EasingDoubleKeyFrame.EasingFunction>
                 </EasingDoubleKeyFrame>

                 <!-- This keyframe animates the ellipse back down and makes it bounce. -->
                 <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                     <EasingDoubleKeyFrame.EasingFunction>
                         <BounceEase Bounces="5" EasingMode="EaseOut"/>
                     </EasingDoubleKeyFrame.EasingFunction>
                 </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" PointerPressed="Rectangle_Tapped"
     Fill="Blue" Width="200" Height="200" />
</StackPanel>

相应的 C# :

private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

7、创建 XAML 附加属性的动画

这不是一个常见情形，但你可以将动画值应用到 XAML 附加属性。有关哪些附加属性及其工作原理的详细信息，请参阅附加属性概述。确定附加属性目标需要括号中包含属性名的属性路径语法。你可以通过使用应用不连续整数值的 ObjectAnimationUsingKeyFrames 创建内置附加属性的动画，如 Canvas.ZIndex。不过，Windows 运行时 XAML 实现的现有局限性是无法创建自定义附加属性的动画。