动画（Animation）

WPF动画使用三种方法：

（1）线性插值：在开始值和结束值之间以逐步增加的方式改变属性的动画(线性插值过

程)。

（2）关键帧：从一个值突然变成另一值的动画(关键帧动画)。所有关键帧动画都使用

"类型名 + AnimationUsingKeyFrames " 的形式进行命名，比如

StringAnimationUsingKeyFrames和ObjectAnimationUsingKeyFrames。

（3）路径。

在System.Windows.Media.Animation名称空间中将发现以下内容：

7个 "类型名+Animation类"  这些类使用插值动画。

22个 "类型名+AnimationUsingKeyFrames" 这些类使用关键帧动画。

3个 "类型名+AnimationUsingPath"类这类使用基于路径的动画。

注意：

某些数据类型有关键帧动画类，但没有插值动画类。例如，可使用关键帧为字符串应用动画，不能使用插值为字符串应用动画。然而，所有数据类型都支持关键帧动画，除非他们根本不支持动画。

所有具有(使用插值)常规动画类的数据类型，也都有相应的关键帧动画的动画类型，如线性插值的DoubleAnimation对应DoubleAnimationUsingKeyFrames。另外还有一种基于路径的动画。

Animation类提供一种简单的“渐变”动画，我们为一个Animation指定开始值和一

个结束值，并指定由开始值到达结束值所需的时间，便可形成一个简单的动画。比

如我们指定长方形的宽度由100变化到200，所需时间为1秒，很容易想像这样的动

画是什么样的，而它对应的Xaml代码如下：一、动画创建

第 1 部分：创建 DoubleAnimation

使元素淡入和淡出的一种方法是对其属性进行动画处理 Opacity 。 由于 Opacity 属性的类型为 Double ，因此需要一个生成双精度值的动画。 DoubleAnimation是一种动画。

DoubleAnimation创建两个双精度值之间的转换。 若要指定其起始值，请设置其 From 属性。 若要指定其结束值，请设置其 To 属性。

1 2 3

<!--定义动画：TargetName指定操作控件，TargetProperty指定操作控件的具体属性， From指定开始值，To指定结束值，Duration指定所需时间--> <DoubleAnimation  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:1"/>

第 2 部分：创建演示图板（故事版）

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

 

第 3 部分 (XAML)：将演示图板与触发器关联（事件触发器）

若要应用和启动中，最简单的方法 Storyboard XAML 是使用事件触发器。 本部分演示如何将 Storyboard 与 XAML 中的触发器相关联。

第4 部分：完整的示例下面的示例演示如何创建在 XAML 中淡入和淡出视图的矩形。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<Window x:Class="WpfApplication.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:local="clr-namespace:WpfApplication"         Title="MainWindow" Height="768" Width="1366" >     <StackPanel Margin="10">         <!--矩形-->         <Rectangle                 Name="MyRectangle"                 Width="100"                 Height="100"                 Fill="Blue">             <Rectangle.Triggers>                 <!-- 动画矩形的不透明度 -->                 <EventTrigger RoutedEvent="Rectangle.Loaded">                     <BeginStoryboard>                         <Storyboard>                             <!--Duration :起始值到目标值需要时间5秒。 AutoReverse="True":使元素消失后变为视野                                 RepeatBehavior="Forever": 使动画无限重复->                             <DoubleAnimation Storyboard.TargetName="MyRectangle"

23 24 25 26 27 28 29 30 31 32 33

Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />                         </Storyboard>                     </BeginStoryboard>                 </EventTrigger>             </Rectangle.Triggers>         </Rectangle>     </StackPanel> </Window>