2021-11-08

WPF动画高级教程

开发工具与关键技术： WPF
作者：罗培发 
撰写时间：2021.11.8
                       WPF动画高级教程
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代码如下：

一、动画创建：
第一部分：创建 DoubleAnimation
 使元素淡入和淡出的一种方法是对其属性进行动画处理 Opacity 。 由于 Opacity 属性的 类型为 Double ，因此需要一个生成双精度值的动画。 DoubleAnimation是一种动画。 DoubleAnimation创建两个双精度值之间的转换。 若要指定其起始值，请设置其 From 属性。 若要指定其结束值，请设置其 To 属性。
<!--定义动画：TargetName指定操作控件，TargetProperty指定操作控件的具体属性，
From指定开始值，To指定结束值，Duration指定所需时间-->
<DoubleAnimation Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Width" From="100" To="200"
Duration="0:0:1"/>
第 2 部分：创建演示图板（故事版）
若要将动画应用于对象，请创建 Storyboard 并使用 TargetName 和 TargetProperty 附加属性指定要进行动画处理的对象和属性。
故事板
.Storyboard（故事板）是动画的基本单元
.Storboard控制动画的播放，暂停，停止等操作
.需要指定TargtName和TargetProperty属性
.动画类型声明过之后，需要使用EventTrigger（事件触发器）触发
第 3 部分 (XAML)：
将演示图板与触发器关联（事件触发器） 若要应用和启动中，最简单的方法 Storyboard XAML 是使用事件触发器。 本部分演示如 何将 Storyboard 与 XAML 中的触发器相关联。
第4 部分：
完整的示例 下面的示例演示如何创建在 XAML 中淡入和淡出视图的矩形。
<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"
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>