- A+
所属分类：.NET技术
WPF中动画（Animation）的简单使用
动画（Animation）的部分简单属性的介绍
使用动画需要使用以下两个类：
Storyboard：创建动画需要使用故事板（Storyboard）元素，用于装载动画
XXXAnimation：具体的动画类，实现具体的动画效果;
具体的动画实现通过 XXXAnimation 中的属性实现，如下，以 DoubleAnimation 为例。不同参数类型的依赖属性需要对应使用不同的 动画类。
From：动画的起始值
To：动画的结束值。From 和 To 成对使用。
By：可以更改的总数。By 不可以和 From/To 一起使用。
通过查看 XXXAnimation 的基类 Timeline（时间线），还有以下重要属性
AutoReverse ：时间线在完成向前迭代后是否按相反的顺序播放
SpeedRatio：设置在此的时间的推移的速率。
RepeatBehavior：设置此时间线的重复行为。设置重复次数。
Duration：用于此时间线播放，不计数重复的时间长度。
动画：大小变换、旋转和平移、渐变
这里就不作详细的介绍了，直接上代码，代码中有详细的注释说明，都是最简单的用法。
页面XAML代码
前端页面 XAML 代码如下，仅简单的按钮展示
<Window x:Class="AnimationDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:AnimationDemo" Title="MainWindow" Width="800" Height="450" mc:Ignorable="d"> <Grid> <TabControl> <TabItem Header="大小变换"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="80" /> <RowDefinition /> </Grid.RowDefinitions> <Button Content="启动" Width="120" Height="30" Click="start_Click1" /> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button x:Name="Sample1" Width="100" Height="50" /> <Button x:Name="Sample2" Grid.Column="1" Width="100" Height="50" /> <Button x:Name="Sample3" Grid.Column="2" Width="100" Height="50" /> </Grid> </Grid> </TabItem> <TabItem Header="旋转和移动"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="80" /> <RowDefinition /> </Grid.RowDefinitions> <Button Content="启动" Width="120" Height="30" Click="start_Click2" /> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button x:Name="Sample2_1" Width="100" Height="50" /> <Button x:Name="Sample2_2" Grid.Column="1" Width="100" Height="50"> <Button.RenderTransform> <RotateTransform Angle="0" CenterX="0" CenterY="0" /> </Button.RenderTransform> </Button> <Button x:Name="Sample2_3" Grid.Column="2" Width="100" Height="50"> <Button.RenderTransform> <TranslateTransform X="0" Y="0" /> </Button.RenderTransform> </Button> </Grid> </Grid> </TabItem> <TabItem Header="渐变"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="80" /> <RowDefinition /> </Grid.RowDefinitions> <Button Content="启动" Width="120" Height="30" Click="start_Click3" /> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button x:Name="Sample3_1" Width="100" Height="50" Opacity="0" /> <Button x:Name="Sample3_2" Grid.Column="1" Width="100" Height="50" Opacity="0" /> <Button x:Name="Sample3_3" Grid.Column="2" Width="100" Height="50" Opacity="0" /> </Grid> </Grid> </TabItem> </TabControl> </Grid> </Window> 动画实现
动画是在 xaml.cs 中实现的。
代码中首先展示了如何具体操作动画的各个属性，然后将动画效果封装成了一个方法。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace AnimationDemo { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } /// <summary> /// 大小变化 /// </summary> private void start_Click1(object sender, RoutedEventArgs e) { //创建动画使用 故事板（Storyboard） Storyboard storyboard = new Storyboard(); //定义变更大小的动画 //根据属性的类型设置动画的类型。 因为下面设置的属性 Width 是 double 类型的属性，故使用DoubleAnimation DoubleAnimation doubleAnimation = new DoubleAnimation(); //设置动画起始值 //doubleAnimation.From = 0; //设置动画结束值 //doubleAnimation.To = 100; //设置动画在原有的基础上增加一个范围 doubleAnimation.By = 30; doubleAnimation.Duration = TimeSpan.FromSeconds(2); //设置动画无限次播放(不设置的话默认是无限次) doubleAnimation.RepeatBehavior = RepeatBehavior.Forever; //设置动画在指示时间线在完成向前迭代后是否按相反的顺序播放，从而实现反复的效果 doubleAnimation.AutoReverse = true; //绑定到控件 Storyboard.SetTarget(doubleAnimation, Sample1); //绑定到控件的依赖属性 Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Width")); //将动画添加到故事板 storyboard.Children.Add(doubleAnimation); //将动画效果封装成方法 storyboard.Children.Add(CreatDoubleAnimation(Sample2, true, RepeatBehavior.Forever, "Height", 50));//更改Height，循环播放 storyboard.Children.Add(CreatDoubleAnimation(Sample3, true, new RepeatBehavior(2), "Width", 50));//更改Width，播放2次 //启动故事板包含的所有动画 storyboard.Begin(); } /// <summary> /// 封装动画方法 /// </summary> /// <param name="uIElement">动画生效的界面元素</param> /// <param name="autoReverse">是否倒序</param> /// <param name="repeatBehavior">执行次数</param> /// <param name="propertyPath">动画生效的依赖属性</param> /// <param name="by"></param> /// <returns></returns> private Timeline CreatDoubleAnimation(UIElement uIElement, bool autoReverse, RepeatBehavior repeatBehavior, string propertyPath, double by) { DoubleAnimation doubleAnimation = new DoubleAnimation(); doubleAnimation.By = by; doubleAnimation.Duration = TimeSpan.FromSeconds(2); doubleAnimation.RepeatBehavior = repeatBehavior; doubleAnimation.AutoReverse = autoReverse; Storyboard.SetTarget(doubleAnimation, uIElement); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(propertyPath)); return doubleAnimation; } /// <summary> /// 旋转和平移 /// </summary> private void start_Click2(object sender, RoutedEventArgs e) { Storyboard sb = new Storyboard(); //按钮元素要支持移动旋转的效果的话，需要给元素先添加支持移动旋转的特性。 Sample2_1.RenderTransform = new TranslateTransform(0, 0); //添加支持平移 DoubleAnimation da = new DoubleAnimation(); da.By = 50; da.Duration = TimeSpan.FromSeconds(1); Storyboard.SetTarget(da, Sample2_1); //这里的参数是弱类型的：new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)") 所以参数的拼写一定不能错 Storyboard.SetTargetProperty(da, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)")); sb.Children.Add(da); sb.Children.Add(CreatDoubleAnimation(Sample2_2, false, new RepeatBehavior(2), "(UIElement.RenderTransform).(RotateTransform.Angle)", 360)); sb.Children.Add(CreatDoubleAnimation(Sample2_3, true, RepeatBehavior.Forever, "(UIElement.RenderTransform).(TranslateTransform.Y)", 30)); sb.Begin(); } /// <summary> /// 渐变 /// </summary> private void start_Click3(object sender, RoutedEventArgs e) { Storyboard sb = new Storyboard(); sb.Children.Add(CreatDoubleAnimation(Sample3_1, false, RepeatBehavior.Forever, "Opacity", 1)); sb.Children.Add(CreatDoubleAnimation(Sample3_2, true, RepeatBehavior.Forever, "Opacity", 1)); sb.Children.Add(CreatDoubleAnimation(Sample3_3, true, RepeatBehavior.Forever, "Opacity", 0.5)); sb.Begin(); } } } 上述实现的动画效果，也可以使用前端 XAML 代码实现，实现格式如下：
<Window.Resources> <!-- 动画的xaml格式 --> <Storyboard x:Key="test"> <DoubleAnimation Storyboard.TargetName="" Storyboard.TargetProperty="" From="0" To="100" Duration="0:0:5" /> </Storyboard> </Window.Resources> 
