【WPF学习笔记】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 代码如下，仅简单的按钮展示

动画实现

动画是在 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
{
    /// 

    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        
		/// 

        /// 大小变化
        /// 
        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();
        }

        /// 

        /// 封装动画方法
        /// 
        /// 动画生效的界面元素
        /// 是否倒序
        /// 执行次数
        /// 动画生效的依赖属性
        /// 
        /// 
        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;
        }

		/// 

        /// 旋转和平移
        /// 
        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();
        }
        
		/// 

        /// 渐变
        /// 
        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 代码实现，实现格式如下：