WPF中动画（Animation）的简单使用
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>