动画概述

概述Silverlight 6（共 7）对本文的评价是有帮助 - 评价此主题 在 Silverlight 中，动画可以通过添加移动和交互性来增强图形的创建效果。 通过对背景色进行动画处理或应用动画 Transform，您可以创造出生动的屏幕过渡效果或提供有帮助的视觉提示。 本主题包括下列各节。 动画简介 使 UIElement 逐渐进入视野并从视野中逐渐消失 开始、停止、暂停和继续动画播放 控制动画的
Silverlight 6（共 7）对本文的评价是有帮助 - 评价此主题

在 Silverlight 中，动画可以通过添加移动和交互性来增强图形的创建效果。 通过对背景色进行动画处理或应用动画 Transform，您可以创造出生动的屏幕过渡效果或提供有帮助的视觉提示。

本主题包括下列各节。

@H_419_38@动画简介 使 UIElement 逐渐进入视野并从视野中逐渐消失 开始、停止、暂停和继续动画播放 控制动画的开始时间 在程序代码中创建动画 动画类型 对属性应用动画 对变换进行动画处理 动画结束后会发生什么情况 缓动函数 自定义动画 相关主题

 动画简介

---

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

说明：
在 Silverlight 中，您只能对值类型为 Double、Color或 Point 的属性执行简单的动画处理。 此外，还可以使用 ObjectAnimationUsingKeyFrames 对其他类型的属性进行动画处理，但是这需要使用离散内插（从一个值跳到另一个值），而多数人认为这不是真正的动画。

下一节演示如何创建一个简单的动画，使 Rectangle（一种 UIElement）逐渐进入视野并从视野中逐渐消失。

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

---

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

运行此示例

示例的第一部分创建一个 Rectangle 元素，并将其显示在 StackPanel 中。

XAML

<StackPanel>  <Rectangle MouseleftbuttonDown="Mouse_Clicked"    x:name="MyAnimatedRectangle"    WIDth="100" Height="100" Fill="Blue" /></StackPanel>

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

@H_419_38@

创建 DoubleAnimation

创建 Storyboard

开始 Storyboard 以响应事件

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

创建 DoubleAnimation

由于 Opacity 属性的类型是 Double，因此需要一个生成 Double 值的动画。 DoubleAnimation 就是这样一种动画；它可以创建两个 Double 值之间的过渡。 若要指定 DoubleAnimation 的起始值，可设置其 From 属性。 若要指定其终止值，可设置其 To 属性。

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

XAML

DoubleAnimation From="1.0" To="0.0"  />

为该动画指定 Duration。 动画的 Duration 属性指定了从其起始值过渡为目标值所需的时间。 下面的示例将动画的持续时间设置为一秒钟。

DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" />

上面的示例创建了不透明度值从 1.0 向 0.0 过渡的动画，此过渡使目标元素从完全不透明逐渐转变为完全不可见。 若要使元素在消失后再逐渐回到视野中，请将 AutoReverse 属性设置为 true。 若要使动画无限期地重复，请将其 RepeatBehavior 属性设置为 Forever。

DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"   autoReverse="True" RepeatBehavior="Forever"/>

创建演示图板

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

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

Storyboard>  <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"     autoReverse="True" RepeatBehavior="Forever" /></Storyboard>

本示例中的 Storyboard 仅包含一个动画，不过您可以添加多个动画。

使用 TargetName 附加属性指定要进行动画处理的对象。 在下面的代码中，为 DoubleAnimation 指定了一个目标名称 myAnimatedRectangle，这是要进行动画处理的对象的名称。

DoubleAnimation    Storyboard.Targetname="MyAnimatedRectangle"    From="1.0" To="0.0" Duration="0:0:1"     autoReverse="True" RepeatBehavior="Forever" /></Storyboard>

使用 TargetProperty 附加属性指定要进行动画处理的属性。 在下面的代码中，动画被配置为面向 Opacity 属性。

DoubleAnimation    Storyboard.Targetname="MyAnimatedRectangle"     Storyboard.TargetProperty="Opacity"    From="1.0" To="0.0" Duration="0:0:1"     autoReverse="True" RepeatBehavior="Forever" /></Storyboard>

将演示图板与事件相关联

此时您已经指定了动画的目标对象以及动画的行为方式；接下来您需要指定何时开始播放动画。 可以使用事件执行此 *** 作。

1.将演示图板作为一种资源。将 Storyboard 放入一个资源块内，以便您能够轻松地自代码引用该 Storyboard，以执行开始、停止、暂停和继续等 *** 作。 下面的标记显示 StackPanel 对象资源块中声明的 Storyboard。 请注意，您可以在任意资源块中声明 Storyboard，只要该资源块与您希望进行动画处理的对象位于同一个作用域中。

XAML

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" RepeatBehavior="Forever" />    </Storyboard>  </StackPanel.Resources>  <Rectangle    x:name="MyAnimatedRectangle"    WIDth="100" Height="100" Fill="Blue" /></StackPanel>

2.将事件附加到某一元素。您可以使用多种事件来启动动画，包括鼠标相关事件，如在用户单击某一对象时引发的 MouseLeftButtonDown，或是在首次加载对象时引发的 Loaded 事件。 有关事件的更多信息，请参见 Silverlight 的事件概述。 在本示例中，MouseLeftButtonDown 事件附加到 Rectangle，这样用户单击矩形时将引发该事件。

Rectangle MouseleftbuttonDown="Mouse_Clicked"  x:name="MyAnimatedRectangle"  WIDth="100" Height="100" Fill="Blue" />

3.从事件处理程序控制动画。Storyboard 提供多种方法，这些方法允许您控制 Storyboard 动画的播放，包括 Begin、Stop、Pause 和 Resume。 本示例使用Begin 方法，该方法在用户单击矩形并引发 MouseLeftButtonDown 事件时启动动画。

C# VB

// When the user clicks the Rectangle,the animation// begins.private voID Mouse_Clicked(object sender,MouseEventArgs e){    myStoryboard.Begin();}

完整的示例

下面的示例演示了完整的 XAML 标记，这些标记用于创建在加载时逐渐进入视野并从视野中逐渐消失的矩形。

运行此示例

XAML

UserControlx:Class="animation_ovw_intro.Page"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"WIDth="400"Height="300"><StackPanel><StackPanel.Resources><!-- Animates the rectangle's opacity. --><Storyboardx:name="myStoryboard"><DoubleAnimationStoryboard.Targetname="MyAnimatedRectangle"Storyboard.TargetProperty="Opacity"From="1.0"To="0.0"Duration="0:0:1"autoReverse="True"RepeatBehavior="Forever"/></Storyboard></StackPanel.Resources><TextBlockmargin="10">Click on the rectangle to start the animation.</TextBlock><RectangleMouseleftbuttonDown="Mouse_Clicked"x:name="MyAnimatedRectangle"WIDth="100"Height="100"Fill="Blue"/></StackPanel></UserControl>

// begins.privatevoID Mouse_Clicked(object sender,MouseEventArgs e){    myStoryboard.Begin();}

开始、停止、暂停和继续动画播放

---

@H_419_1278@上面的示例演示如何使用 Begin 方法启动动画；不过，Storyboard 还提供 Resume 方法，这些方法可用于控制动画。 下面的示例提供一系列按钮，这些按钮允许用户控制 Ellipse 在整个屏幕中的动画播放。

运行此示例

UserControlx:Class="interactive_animation.Page"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"WIDth="400"Height="300"><TextBlockmargin="10"textwrapPing="Wrap">This sample uses the Begin,Pause,Resume,and Stop methods to control an animation.</Canvas><Canvas.Resources><Storyboardx:name="myStoryboard"><!-- Animate the center point of the ellipse. --><PointAnimationStoryboard.TargetProperty="Center"Storyboard.Targetname="MyAnimatedEllipseGeometry"Duration="0:0:5"From="20,200"To="400,100"RepeatBehavior="Forever"/></PathFill="Blue"><Path.Data><!-- Describes an ellipse. --><EllipseGeometryx:name="MyAnimatedEllipseGeometry"Center="20,20"RadiusX="15"RadiusY="15"/></Path.Data></Path><StackPanelOrIEntation="Horizontal"Canvas.left="10"Canvas.top="265"><!-- button that begins animation. --><buttonClick="Animation_Begin"WIDth="65"Height="30"margin="2"Content="Begin"/><!-- button that pauses Animation. --><buttonClick="Animation_Pause"WIDth="65"Height="30"margin="2"Content="Pause"/><!-- button that resumes Animation. --><buttonClick="Animation_Resume"WIDth="65"Height="30"margin="2"Content="Resume"/><!-- button that stops Animation. StopPing the animation returns the        ellipse to its original location. --><buttonClick="Animation_Stop"WIDth="65"Height="30"margin="2"Content="Stop"/></Canvas></UserControl>

C# VB

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

控制动画的开始时间

---

Storyboard 以及所有其他动画对象（DoubleAnimation、DoubleAnimationUsingKeyFrames、ColorAnimation 等）从 Timeline 类继承（请参见本主题后面的动画是时间线）。 Timeline 类授予很多有用的属性给这些动画对象，其中包括 BeginTime 属性。 顾名思义，使用 BeginTime 属性可以指定动画对象活动开始点的时间。 例如，可以对 Storyboard 的 BeginTime 指定两秒时间。 @H_403_1767@当使用 Begin 方法开始 Storyboard 时，Storyboard 将等待两秒钟，然后再开始。 此外，可以指定Storyboard 内的动画对象的 BeginTime。 例如，如果您有一个 BeginTime 为两秒钟的 Storyboard，此 Storyboard 包含两个 DoubleAnimation 对象（一个未指定BeginTime，另一个的 BeginTime 为三秒钟），则第一个 DoubleAnimation 将在对 Storyboard 调用 Begin 方法之后的两秒钟启动，第二个 DoubleAnimation 将在调用该方法之后的五秒钟启动（Storyboard 的两秒钟延迟加上 DoubleAnimation 的三秒钟延迟）。 下面的示例显示如何执行此项 *** 作。

运行此示例

StackPanel.Resources><!-- Storyboard starts 2 seconds after its Begin             method is called. --><StoryboardBeginTime="0:0:2"x:name="myStoryboard"><!-- Animates the rectangle's wIDth. No                  BeginTime specifIEd so by default begins                  as soon as it's parent (the Storyboard)                 begins. --><DoubleAnimationStoryboard.Targetname="MyAnimatedRectangle"Storyboard.TargetProperty="WIDth"To="300"Duration="0:0:1"/><!-- Animates the rectangle's opacity. A BeginTime                 of 3 seconds specifIEd so begins three seconds                 after the Storyboard begins (total of 5 seconds)--><DoubleAnimationBeginTime="0:0:3"Storyboard.Targetname="MyAnimatedRectangle"Storyboard.TargetProperty="Opacity"To="0"Duration="0:0:1"/></Rectanglex:name="MyAnimatedRectangle"Loaded="Start_Animation"WIDth="100"Height="100"Fill="Blue"/></StackPanel>

// Start the animation when the object loads.privatevoID Start_Animation(object sender,EventArgs e){    myStoryboard.Begin();}

可以考虑将 Storyboard 作为其他动画对象（例如 DoubleAnimation）以及其他 Storyboard 对象的容器。 即可以在 Storyboard 对象中嵌套该对象并分别为每个Storyboard 指定 BeginTime 值。 使用嵌套的演示图板可帮助您安排精心设计的动画序列。 每个子 Storyboard 都会在其父 Storyboard 开始前等待，然后在再次开始前开始倒计时。

在程序代码中创建动画

---

@L_403_145@

除了使用 XAML，也可以完全在程序代码（如 C# 或 Visual Basic）中创建动画。 下面的示例演示如何创建一个动画，在其中用动画播放 Rectangle 的 Canvas.Top 和Canvas.Left 附加属性。

运行此示例

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);    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,21)">"(Canvas.top)"));    myDoubleAnimation1.To = 200;    myDoubleAnimation2.To = 200;    // Make the Storyboard a resource.    LayoutRoot.Resources.Add("unique_ID",sb);    // Begin the animation.    sb.Begin();}

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

动画类型

---

上面的示例使用了 DoubleAnimation 对属性进行动画处理。 除了 DoubleAnimation 类型，Silverlight 还提供其他几种动画对象。 由于动画生成属性值，因此对于不同的属性类型，会有不同的动画类型。 若要对采用 Double 值的属性（例如元素的 WIDth 属性）进行动画处理，请使用生成 Double 值（DoubleAnimation）的动画。 若要对采用 Point 值的属性进行动画处理，请使用生成 Point 值（如 PointAnimation 等）的动画。

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

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

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

特性类型

对应的基本 (From/To/By) 动画

对应的关键帧动画

用法示例

Color

ColorAnimation

ColorAnimationUsingKeyFrames

对 SolidColorBrush 或 GradientStop 的 Color 进行动画处理。

Double

DoubleAnimation

DoubleAnimationUsingKeyFrames

对 Rectangle 的 Width 或 Ellipse 的 Height（或任意 FrameworkElement）进行动画处理。

Point

PointAnimation

PointAnimationUsingKeyFrames

对 EllipseGeometry 的 Center 位置进行动画处理。

Object

无

ObjectAnimationUsingKeyFrames

对 Fill 属性进行动画处理，使其在不同的 GradientBrush 之间进行转换。

动画是时间线

所有动画均继承自 Timeline 对象，因此所有动画都是专用类型的时间线。 Timeline 定义时间段。 您可以指定时间线的以下"计时行为"：其 Duration 和重复次数，甚至可以为时间线指定时间走得多快。

因为动画是 Timeline，所以它还表示一个时间段。 在动画的指定时间段（即 Duration）内运行动画时，动画会计算输出值。 在运行或"播放"动画时，动画将更新与其关联的属性。

Duration、AutoReverse 和 RepeatBehavior 是三个常用的计时属性。

Duration 属性

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

动画使用其 Duration 属性来确定其当前值。 如果没有为动画指定 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 值和 XAML 语法的更多信息，请参见 Duration 属性参考页。

autoReverse 属性

AutoReverse 属性指定时间线在到达其 Duration 的终点后是否倒退。 如果将此动画属性设置为 true，则动画在到达其 Duration 的终点后将倒退，即从其终止值向其起始值反向播放。 默认情况下，该属性为 false。

RepeatBehavior 属性

RepeatBehavior 属性指定时间线的播放次数。 默认情况下，时间线的重复次数为 1.0，即播放一次时间线，不进行重复。

对属性应用动画

---

前面几节描述动画的不同类型及其计时属性。 本节演示如何对要进行动画处理的属性应用动画。 Storyboard 对象提供了对属性应用动画的一种方法。 Storyboard是一个为其所包含的动画提供目标信息的容器时间线。

以对象和属性为目标

Storyboard 类提供 TargetProperty 附加属性。 通过在动画上设置这些属性，您将告诉动画对哪些内容进行动画处理。 不过，在动画以对象作为处理目标之前，必须使用 x:name 属性为该对象提供一个名称（如上例所示），否则必须间接以属性作为目标。 下面的示例演示如何间接以属性作为目标。

运行此示例

StackPanelx:name="myStackPanel"Background="Red"Loaded="Start_Animation"><Storyboardx:name="colorStoryboard"><!-- Animate the background color of the canvas from red to green        over 4 seconds. --><colorAnimationBeginTime="00:00:00"Storyboard.Targetname="myStackPanel"Storyboard.TargetProperty="(Panel.Background).(SolIDcolorBrush.color)"From="Red"To="Green"Duration="0:0:4"/></StackPanel.Resources></StackPanel>

请注意，正在进行动画处理的属性值 (Color) 属于未命名甚至未显式声明的 SolidColorBrush 对象。 此间接目标是使用下面的特殊语法完成的。
                                                                          
Storyboard.TargetProperty="(Panel.Background).(SolIDcolorBrush.color)"
                                    
或者，可以显式创建 SolidColorBrush，对其进行命名，然后直接以其 Color 属性为目标。 下面的示例演示如何创建与前面的示例相同的动画，但是使用直接属性目标。
                                                                                               
StackPanelLoaded="Start_Animation"><colorAnimationBeginTime="00:00:00"Storyboard.Targetname="mySolIDcolorBrush"Storyboard.TargetProperty="color"From="Red"To="Green"Duration="0:0:4"/></StackPanel.Background><SolIDcolorBrushx:name="mySolIDcolorBrush"color="Red"/></StackPanel.Background></StackPanel>
                                                                                                                                 
                       
一些更有趣的动画（如旋转、扭曲和重新缩放对象）是通过对 Transform 对象的属性进行动画处理实现的。
     
下面的示例将 Storyboard 和 DoubleAnimation 与 RotateTransform 一起使用，以便使 Rectangle 旋转到位。
     
运行此示例
                                                                 @H_148_3011@                   
StackPanelmargin="15"><DoubleAnimationStoryboard.Targetname="mytransform"Storyboard.TargetProperty="Angle"From="0"To="360"Duration="0:0:5"RepeatBehavior="Forever"/></RectangleWIDth="50"Height="50"Fill="RoyalBlue"MouseleftbuttonDown="StartAnimation"><Rectangle.Rendertransform><Rotatetransformx:name="mytransform"Angle="45"CenterX="25"CenterY="25"/></Rectangle.Rendertransform></Rectangle></StackPanel>
                                                                                                                  
privatevoID StartAnimation(object sender,MouseEventArgs e){    myStoryboard.Begin();}
                                        
有关变换的更多信息，请参见变换。
                            动画结束后会发生什么情况             
                       
FillBehavior 属性指定时间线结束时的行为方式。 此属性的默认值为 HoldEnd，表示在动画结束后，进行动画处理的对象将保持其最终值。 例如，如果对 Rectangle的 Opacity 属性进行动画处理，使其在 2 秒内从 1 转换为 0，该矩形的默认行为是：在 2 秒后保持不透明度为 0 的状态。 如果将 FillBehavior 设置为 Stop，该矩形的不透明度将在动画结束后还原为初始值 1。
                            缓动函数             
                       
通过缓动函数，您可以将自定义算术公式应用于动画。 例如，您可能希望某一对象逼真地d回或其行为像d簧一样。 您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果，但可能需要执行大量的工作，并且与使用算术公式相比动画的精确性将降低。
     
除了通过从 EasingFunctionBase 继承来创建您自己的自定义缓动函数外，您还可以使用运行时提供的若干缓动函数之一来创建常见效果。
     @H_419_38@ 
BackEase：在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。
        
BounceEase：创建d回效果。
        
CircleEase：创建使用循环函数加速和/或减速的动画。
        
CubicEase：创建使用公式 f(t) = t3 加速和/或减速的动画。
        
ElasticEase：创建表示d簧在停止前来回振荡的动画。
        
ExponentialEase：创建使用指数公式加速和/或减速的动画。
        
PowerEase：创建使用公式 f(t) = tp（其中，p 等于 Power 属性）加速和/或减速的动画。
        
QuadraticEase：创建使用公式 f(t) = t2 加速和/或减速的动画。
        
QuarticEase：创建使用公式 f(t) = t4 加速和/或减速的动画。
        
QuinticEase：创建使用公式 f(t) = t5 加速和/或减速的动画。
        
SineEase：创建使用正弦公式加速和/或减速的动画。
      
可使用下面的示例查看这些缓动函数的行为。
     
运行此示例
     
若要将缓动函数应用于某一动画，请使用该动画的 EasingFunction 属性指定要应用于该动画的缓动函数。 下面的示例将 BounceEase 缓动函数应用于DoubleAnimation 以创建d回效果。
     
     
运行此示例
                                                                                    
StackPanelx:name="LayoutRoot"Background="White"><DoubleAnimationFrom="30"To="200"Duration="00:00:3"Storyboard.Targetname="myRectangle"Storyboard.TargetProperty="Height"><DoubleAnimation.EasingFunction><BounceEaseBounces="2"EasingMode="EaSEOut"Bounciness="2"/></DoubleAnimation.EasingFunction></DoubleAnimation></Rectanglex:name="myRectangle"MouseleftbuttonDown="Mouse_Clicked"Fill="Blue"WIDth="200"Height="30"/></StackPanel>
                                                                                                                  
// When the user clicks the rectangle,the animation// begins. privatevoID Mouse_Clicked(object sender,MouseEventArgs e){    myStoryboard.Begin();}
                                        
在上一个示例中，该缓动函数已应用于某一 From/To/By 动画。 还可以将缓动函数应用于关键帧动画（请参见关键帧动画）。 下面的示例演示如何将关键帧用于和它们相关联的缓动函数，以便创建一个矩形动画，该动画向上缩回、速度放慢、然后向下展开（就像下落），再d回到某一停止点。
     
运行此示例
                                                                                    
DoubleAnimationUsingKeyFramesStoryboard.TargetProperty="Height"Storyboard.Targetname="myRectangle"><!-- This keyframe animates the ellipse up to the crest                      where it slows down and stops. --><EasingDoubleKeyFrameValue="30"KeyTime="00:00:02"><EasingDoubleKeyFrame.EasingFunction><CubicEaseEasingMode="EaSEOut"/></EasingDoubleKeyFrame.EasingFunction></EasingDoubleKeyFrame><!-- This keyframe animates the ellipse back down and makes                     it bounce. --><EasingDoubleKeyFrameValue="200"KeyTime="00:00:06"><BounceEaseBounces="5"EasingMode="EaSEOut"/></EasingDoubleKeyFrame></DoubleAnimationUsingKeyFrames></Rectanglex:name="myRectangle"MouseleftbuttonDown="Mouse_Clicked"Fill="Blue"WIDth="200"Height="200"/></StackPanel>
                                                                                                                  
您可以使用 EasingMode 属性更改缓动函数的行为方式，也就是说，更改动画的内插方式。 有三个可能的值可赋予 EasingMode：
     @H_419_38@ 
EaseIn：内插遵循与缓动函数相关联的算术公式。
        
EaseOut：内插遵循 100% 内插减去与缓动函数相关联的公式输出。
        
EaseInOut：内插将 EaseIn 用于动画的前半部分，将 EaseOut 用于动画的后半部分。
      
下图演示了 EasingMode 的不同值，其中 f(x) 表示动画进度，t 表示时间。
     
BackEase
     
BounceEase
     
CircleEase
     
CubicEase
     
ElasticEase
     
ExponentialEase
     
PowerEase
     
QuadraticEase
     
QuarticEase
     
QuinticEase
     
SineEase
     
 
 您可以使用 PowerEase 创建与使用 Power 属性的 CubicEase、QuadraticEase、QuarticEase 和 QuinticEase 的相同的行为。 例如，如果您要使用 PowerEase 来替换 CubicEase，则将 Power 的值指定为 3。
              
除了使用在运行时中包括的缓动函数外，您还可以通过从 EasingFunctionBase 继承来创建自己的自定义缓动函数。 下面的示例演示如何创建简单的自定义缓动函数。 您可以通过覆盖 EaseInCore 方法，针对缓动函数的行为方式添加您自己的数学逻辑。
     
运行此示例
                               C#                                                                           
namespace CustomEasingFunction{    publicclass CustomSeventhPowerEasingFunction : EasingFunctionBase    {        public CustomSeventhPowerEasingFunction() : base()         {         }           // Specify your own logic for the easing function by overrIDing// the EaseInCore method. Note that this logic applIEs to the "EaseIn"// mode of interpolation. protectedoverrIDedouble EaseInCore(double normalizedTime)         {             // applIEs the formula of time to the seventh power.return Math.Pow(normalizedTime,7);        }    }}
                                                               自定义动画             
                       
@H_950_4031@有时，典型动画甚至是自定义缓动函数都难以满足您的需要。 @H_738_4033@例如，如果您需要使用冲突检测的动画，可以创建自定义的基于帧的动画。 @H_569_4035@这样，您的自定义动画即可绕过 Silverlight 动画系统。 @H_746_4037@有关更多信息，请参见 Custom Animations in Silverlight（Silverlight 中的自定义动画）。
                         请参见             
                        任务           如何：创建计时器           参考           Timeline                Storyboard           概念           关键帧动画                以编程方式使用动画           其他资源           布局、输入和打印                                           	          总结       
以上是内存溢出为你收集整理的动画概述全部内容，希望文章能够帮你解决动画概述所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1068218.html