Silverlight 参考：动画 -- MSN

动画简介

动画是快速播放一系列图像（其中每个图像与下一个图像略微不同）给人造成的一种幻觉。大脑感觉这组图像是一个变化的场景。在电影中，摄像机每秒钟拍摄许多照片（帧），便可使人形成这种幻觉。用投影仪播放这些帧时，观众便可以看电影了。在 Silverlight 中，通过对对象的个别属性应用动画，可以对对象进行动画处理。例如，若要使 Opacity 属性进行动画处理。可以对 Silverlight 中许多对象的属性进行动画处理。

说明：在 Silverlight 中，您只能对值类型为对其他类型的属性进行动画处理，但是这需要使用离散内插（从一个值跳到另一个值），而多数人认为这不是真正的动画。

使 UIElement 逐渐进入视野并从视野中逐渐消失

此示例演示如何使用 Silverlight 动画通过对属性值进行动画处理，使将逐渐进入视野并逐渐从视野中消失。若要查看您将演练的动画的预览，请单击下面的链接来运行示例，然后单击矩形开始运行动画。

若要创建动画并将其应用于矩形的 Opacity 属性，请执行以下操作：

创建 DoubleAnimation
创建 Storyboard
开始 Storyboard 以响应事件

以下各节将详细讨论这些步骤。有关完整的示例，请参见完整示例一节。

创建 DoubleAnimation

由于 To 属性。

不透明度值 1.0 使对象完全不透明，不透明度值 0.0 使对象完全不可见。若要使动画的不透明度值从 1.0 过渡为 0.0，可以将其 0.0。

<DoubleAnimation From="1.0" To="0.0" />
为该动画指定 Duration 属性指定了从其起始值过渡为目标值所需的时间。下面的示例将动画的持续时间设置为一秒钟。

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" />
上面的示例创建了不透明度值从 1.0 向 0.0 过渡的动画，此过渡使目标元素从完全不透明逐渐转变为完全不可见。若要使元素在消失后再逐渐回到视野中，请将 />
..

创建演示图板

若要向对象应用动画，请创建 TargetProperty 附加属性指定要进行动画处理的对象和属性。

创建 Storyboard 并将动画添加为其子项.

使用 myAnimatedRectangle，这是要进行动画处理的对象的名称。

使用 Opacity 属性。

代码

在程序代码块中定义动画：

代码

private void Create_And_Run_Animation(object sender, EventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    Color myColor = Color.FromArgb(255, 255, 0, 0);
    SolidColorBrush myBrush = new SolidColorBrush();
    myBrush.Color = myColor;
    myRectangle.Fill = myBrush;

    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);

    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));

    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
    DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

    myDoubleAnimation1.Duration = duration;
    myDoubleAnimation2.Duration = duration;

    Storyboard sb = new Storyboard();
    sb.Duration = duration;

    sb.Children.Add(myDoubleAnimation1);
    sb.Children.Add(myDoubleAnimation2);

    Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle);

    // Set the attached properties of Canvas.Left and Canvas.Top
    // to be the target properties of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
    Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));

    myDoubleAnimation1.To = 200;
    myDoubleAnimation2.To = 200;

    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb);

    // Begin the animation.
    sb.Begin();
}

说明：

不要试图在页面的构造函数中调用 Begin。这将导致动画失败，且无任何提示。

动画类型

上面的示例使用了 PointAnimation 等）的动画。

Silverlight 提供两大类动画类型，From/To/By 动画和关键帧动画。下表说明这些动画类别及其命名约定。

类别	说明	命名约定
From/To/By 动画	在起始值和结束值之间进行动画处理：若要指定起始值，请设置动画的 From 属性。若要指定结束值，请设置动画的 To 属性。若要指定相对于起始值的结束值，请设置动画的 By 属性（而不是 To 属性）。此概述中的示例使用这些动画，因为这些动画最容易实现。	typeAnimation
关键帧动画	在使用关键帧对象指定的一系列值之间播放动画。关键帧动画的功能比 From/To/By 动画的功能更强大，因为您可以指定任意多个目标值，甚至可以控制它们的插值方法。关键帧动画中详细描述了关键帧动画。	typeAnimationUsingKeyFrames

类别

说明

命名约定

From/To/By 动画

在起始值和结束值之间进行动画处理：

若要指定起始值，请设置动画的 From 属性。
若要指定结束值，请设置动画的 To 属性。
若要指定相对于起始值的结束值，请设置动画的 By 属性（而不是 To 属性）。

此概述中的示例使用这些动画，因为这些动画最容易实现。

typeAnimation

关键帧动画

在使用关键帧对象指定的一系列值之间播放动画。关键帧动画的功能比 From/To/By 动画的功能更强大，因为您可以指定任意多个目标值，甚至可以控制它们的插值方法。关键帧动画中详细描述了关键帧动画。

typeAnimationUsingKeyFrames

下表显示了一些常用动画类型以及与这些类型一起使用的一些属性。

属性类型	对应的基本 (From/To/By) 动画	对应的关键帧动画	用法示例
Color	ColorAnimation	ColorAnimationUsingKeyFrames	对 Color 进行动画处理。
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	对 FrameworkElement）进行动画处理。
Point	PointAnimation	PointAnimationUsingKeyFrames	对 Center 位置进行动画处理。
Object	无	ObjectAnimationUsingKeyFrames	对 GradientBrush 之间进行转换。

动画是时间线

所有动画均继承自 Duration 和重复次数，甚至可以为时间线指定时间走得多快。

因为动画是

RepeatBehavior

是三个常用的计时属性。

Duration 属性

时间线（以及继承自时间线的动画）表示一个时间段。该时间段的长度由时间线的 TimeSpan 值指定）来决定。当时间线达到其持续时间的终点时，表示时间线完成了一次重复。

动画使用其 Duration 值，它将使用默认值（1 秒）。

下面的语法显示了 Duration 属性 (Property) 的 XAML 属性 (Attribute) 语法的简化版本。

小时 : 分钟 : 秒

下表显示了一些 Duration 设置及其结果值。

设置	所得值
0:0:5.5	5.5 秒。
0:30:5.5	30 分 5.5 秒。
1:30:5.5	1 小时 30 分 5.5 秒。

有关 Duration 属性参考页。

AutoReverse 属性

false。

RepeatBehavior 属性

1.0，即播放一次时间线，不进行重复。

对属性应用动画

前面几节描述动画的不同类型及其计时属性。本节演示如何对要进行动画处理的属性应用动画。容器时间线。

以对象和属性为目标

x:Name 属性为该对象提供一个名称（如上例所示），否则必须间接以属性作为目标。下面的示例演示如何间接以属性作为目标。

代码

请注意，正在进行动画处理的属性值 (SolidColorBrush 对象。此间接目标是使用下面的特殊语法完成的。

Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"

或者，可以显式创建 Color 属性为目标。下面的示例演示如何创建与前面的示例相同的动画，但是使用直接属性目标。

代码

对变换进行动画处理

一些更有趣的动画（如旋转、扭曲和重新缩放对象）是通过对 Transform 对象的属性进行动画处理实现的。

下面的示例将 Rectangle 旋转到位。

代码

动画结束后会发生什么情况

Stop，该矩形的不透明度将在动画结束后还原为初始值 1。

缓动函数

通过缓动函数，您可以将自定义算术公式应用于动画。例如，您可能希望某一对象逼真地弹回或其行为像弹簧一样。您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果，但可能需要执行大量的工作，并且与使用算术公式相比动画的精确性将降低。

除了通过从 EasingFunctionBase 继承来创建您自己的自定义缓动函数外，您还可以使用运行时提供的若干缓动函数之一来创建常见效果。

BackEase：在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。
BounceEase：创建弹回效果。
CircleEase：创建使用循环函数加速和/或减速的动画。
3 加速和/或减速的动画。
ElasticEase：创建表示弹簧在停止前来回振荡的动画。
ExponentialEase：创建使用指数公式加速和/或减速的动画。
Power 属性）加速和/或减速的动画。
2 加速和/或减速的动画。
4 加速和/或减速的动画。
5 加速和/或减速的动画。
SineEase：创建使用正弦公式加速和/或减速的动画。

可使用下面的示例查看这些缓动函数的行为。

若要将缓动函数应用于某一动画，请使用该动画的 EasingFunction 属性指定要应用于该动画的缓动函数。下面的示例将 DoubleAnimation 以创建弹回效果。

代码

该缓动函数已应用于某一 From/To/By 动画。还可以将缓动函数应用于关键帧动画。下面的示例演示如何将关键帧用于和它们相关联的缓动函数，以便创建一个矩形动画，该动画向上缩回、速度放慢、然后向下展开（就像下落），再弹回到某一停止点。

代码

您可以使用 EasingMode：

EaseIn：内插遵循与缓动函数相关联的算术公式。
EaseOut：内插遵循 100% 内插减去与缓动函数相关联的公式输出。
EaseOut 用于动画的后半部分。

下图演示了 EasingMode 的不同值，其中 f(x) 表示动画进度，t 表示时间。

说明：

您可以使用 Power 的值指定为 3。

除了使用在运行时中包括的缓动函数外，您还可以通过从 EaseInCore 方法，针对缓动函数的行为方式添加您自己的数学逻辑。

代码

<UserControl x:Class="CustomEasingFunction.MainPage"
xmlns:CustomEase="clr-namespace:CustomEasingFunction"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel>
    <TextBlock Margin="10" TextWrapping="Wrap">Click on the rectangle to start the animation</TextBlock>
<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="300" Duration="00:00:3"
            Storyboard.TargetName="myRectangle"
            Storyboard.TargetProperty="Height">
                <DoubleAnimation.EasingFunction>

                   
                   <CustomEase:CustomSeventhPowerEasingFunction EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

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

</StackPanel>
</StackPanel>