WPF 实现动画(速度、启停、缓动、线性渐变)

前言

该Demo使用是纯C#编写（不建议使用XAML做动画效果，内存开销不可控且不便操作）

正文

效果：速度、启动、暂停、缓动效果、线性渐变

代码如下

using System;
using System.Text.RegularExpressions;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyWPF
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {

        Storyboard sb;//故事板
        Rectangle myRectangle;//故事板主角控件对象
        string rectName = "MyRectangle";//故事板主角控件名
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += (s,e)=>InitData();
        }

        //初始化数据
        private void InitData()
        {
            sb = new Storyboard();
            myRectangle = new Rectangle()
            {
                Fill = Brushes.Red,
                Height = 200,
                Width = 200,
                HorizontalAlignment = HorizontalAlignment.Left
            };
            myRectangle.Name = rectName;
            this.RegisterName(myRectangle.Name, myRectangle);//使用C#插入控件时要注册控件名
            ui_Grid.Children.Add(myRectangle);

        }

        //启动动画
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            //故事板动画Clear（等待GC),也可以手动设置为Null
            sb.Children.Clear();
            //边距位移动画
            var marginAnim = new ThicknessAnimation
            {
                From = new Thickness(0, 0, 0, 0),
                To = new Thickness(this.ActualWidth - 200, 0, 0, 0),
                RepeatBehavior = RepeatBehavior.Forever,
                EasingFunction = new BounceEase()
                {
                    Bounces = 0,//反弹次数
                    EasingMode = EasingMode.EaseInOut,//缓动函数In Out
                    Bounciness = 0//反弹大小
                }
            };
            //线性渐变动画
            var colorAnim = new ColorAnimation
            {
                From = Colors.Red,
                To = Colors.Blue,
                RepeatBehavior = RepeatBehavior.Forever//重复播放
            };
            //设置故事板动画目标属性
            Storyboard.SetTargetProperty(marginAnim, new PropertyPath(MarginProperty));
            Storyboard.SetTargetProperty(colorAnim, new PropertyPath("(Fill).(SolidColorBrush.Color)"));
            //将配置完毕的动画插入到故事板
            sb.Children.Add(marginAnim);
            sb.Children.Add(colorAnim);
            if (!Regex.IsMatch(ui_Speed.Text, @"^[+-]?\d*[.]?\d*$"))
                return;
            //故事板运行速度
            sb.SpeedRatio = Convert.ToDouble(ui_Speed.Text);
            //故事板启动
            sb.Begin(myRectangle, true);
        }
        //停止动画
        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            //故事板停止
            sb.Stop(myRectangle);
        }
    }
}

可能有同学会问new PropertyPath("(Fill).(SolidColorBrush.Color)")为什么要这样写,因为Fill依赖属性本身是Brushes类型。

MSDN上是这样说的：

例如，面板的Background属性是来自主题模板的完整画笔（实际上是SolidColorBrush ）。

要完全为Brush设置动画，需要有一个 BrushAnimation（可能每个Brush类型都有一个），并且没有这样的类型。‘

要为画笔设置动画，可以为特定画笔类型的属性设置动画。

需要从SolidColorBrush到它的Color才能在其中应用ColorAnimation。此示例的属性路径为.Background.Color

For instance, the Background property of a Panel is a complete Brush (actually a SolidColorBrush) that came from a theme template. To animate a Brush completely, there would need to be a BrushAnimation (probably one for every Brush type) and there is no such type. To animate a Brush, you instead animate properties of a particular Brush type. You need to get from SolidColorBrush to its Color to apply a ColorAnimation there. The property path for this example would be Background.Color.

关于PropertyPath XAML语法请看

docs.microsoft.com/en-us/dotne…

关于更多故事板Storyboard资料请看

docs.microsoft.com/en-us/dotne…

总结

通过本文的学习，不仅能够掌握WPF中动画的基本概念和实现方法，还能学会如何灵活运用这些技术来提升用户界面的交互性和视觉效果。

总之，WPF为开发者提供了强大的动画功能，通过合理地使用速度控制、启停管理、缓动效果和线性渐变，可以轻松创建出既美观又流畅的用户界面。

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

作者：Stay627

出处：cnblogs.com/Stay627/p/15857785.html

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！