一个简单好用的 C# Easing Animation 缓动动画类库

文章目录

  • 1.类库说明
  • 2.使用步骤
    • 2.1 创建一个Windows Form 项目
    • 2.2 安装类库
    • 2.3 编码
    • 2.4 效果
  • 3. 扩展方法
    • 3.1 MoveTo 动画
    • 3.2 使用回调函数的Color动画
    • 3.3 属性动画
    • 3.4 自定义缓动函数
  • 4.该库支持的内置缓动函数
  • 5.代码下载

1.类库说明

App.Animations 类库是一个很精炼、好用的 csharp easing 动画库

  • 基于 net-standard 2.0
  • 提供 Fluent API,写代码非常舒服。
  • 支持多个参数同时参与动画。
  • 自带 30+ 缓动动画效果。
  • 支持自定义缓动动画。
  • 支持无限循环。
  • 支持自动返回。
  • 支持扩展方法,简化动画创建
  • 代码非常精炼,是学习线程控制的好示例项目。

2.使用步骤

2.1 创建一个Windows Form 项目

App.Animations 类库是基于 net-standard 2.0开发的,不依赖于其它任何类库,是可以跨平台使用的。这里以windows form项目为例,演示ui动画。窗口创建好后,在界面上拖入控件,效果如下:

在这里插入图片描述

2.2 安装类库

nuget-install App.Animations

2.3 编码

using App.Animations;
using App.Utils;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AnimationForm
{public partial class Form1 : Form{Animator _ani;public Form1(){InitializeComponent();BindEnum(this.cmbType1, typeof(AnimationType));BindEnum(this.cmbType2, typeof(AnimationType));}//-------------------------------------------------------// Combobox <-> Enum//-------------------------------------------------------void BindEnum(ComboBox cmb, Type enumType){var infos = enumType.GetEnumInfos();cmb.Items.Clear();foreach (var info in infos){cmb.Items.Add(info);}cmb.SelectedIndex = 0;}T GetEnum<T>(ComboBox cmb) where T : Enum{return (T)(cmb.SelectedItem as EnumInfo).Value;}//-------------------------------------------------------// Run//-------------------------------------------------------private void btnStop_Click(object sender, EventArgs e){if (_ani != null)_ani.Stop();}// Animation on xprivate void btnAnimX_Click(object sender, EventArgs e){var start = 100;  // xvar end   = 300;var type1 = GetEnum<AnimationType>(cmbType1);var type2 = GetEnum<AnimationType>(cmbType2);var dur1 = (long)numDur1.Value;var dur2 = (long)numDur2.Value;_ani = new Animator().SetInterval((int)numInterval.Value).AddPath(type1, start, end, dur1).AddPath(type2, end, start, dur2).SetFrameEvent((values) =>{Action action = () => {label1.Left = (int)values[0];label1.Text = string.Format("{0:000}", values[0]);};this.Invoke(action);}).SetEndEvent((_) => Trace.WriteLine("Animation end.")).Start();}// Animation on yprivate void btnAnimXY_Click(object sender, EventArgs e){var start = new List<double> { 100, 10 };  // x, yvar end   = new List<double> { 300, 100 };var type1 = GetEnum<AnimationType>(cmbType1);var type2 = GetEnum<AnimationType>(cmbType2);var dur1 = (long)numDur1.Value;var dur2 = (long)numDur2.Value;_ani = new Animator().SetInterval((int)numInterval.Value).AddPath(type1, start, end, dur1).AddPath(type2, end, start, dur2).SetFrameEvent((values) =>{Action action = () => {label1.Left = (int)values[0];label1.Top = (int)values[1];label1.Text = string.Format("({0:000},{1:000})", values[0], values[1]);};this.Invoke(action);}).SetEndEvent((values) => Trace.WriteLine("Animaion end.")).Start();}// Animation on colorprivate void btnAnimColor_Click(object sender, EventArgs e){var start = new List<double> { 255, 0, 0 };        // r, g, bvar end   = new List<double> { 0, 255, 255 };var type1 = GetEnum<AnimationType>(cmbType1);var type2 = GetEnum<AnimationType>(cmbType2);var dur1 = (long)numDur1.Value;var dur2 = (long)numDur2.Value;_ani = new Animator().SetInterval((int)numInterval.Value).AddPath(type1, start, end, dur1).AddPath(type2, end, start, dur2).SetFrameEvent((values) =>{Action action = () => {label1.ForeColor = Color.FromArgb((int)values[0], (int)values[1], (int)values[2]);label1.Text = string.Format("({0:0},{1:0},{2:0})", values[0], values[1], values[2]);};this.Invoke(action);}).SetEndEvent((values)=>{Action action = () => {label1.ForeColor = Color.FromArgb((int)values[0], (int)values[1], (int)values[2]);label1.Text = string.Format("({0:0},{1:0},{2:0})", values[0], values[1], values[2]);};this.Invoke(action);}).Start();}}
}

2.4 效果

在这里插入图片描述

3. 扩展方法

3.1 MoveTo 动画

this.block.MoveTo(new Point(70, 100), new Point(150, 50), 1000, EasingType.Linear); // use moveto extension function to apply animation.

3.2 使用回调函数的Color动画

var startColor = new List { 255, 0, 0 };
var endColor = new List { 0, 255, 255 };
this.block.Animate(startColor, endColor, 1000, (t, vs) => t.BackColor = ToColor(vs)); // use callback to modify property.

3.3 属性动画

this.picBall.Animate(500, -50, 1000, t => t.Left);

3.4 自定义缓动函数

Func<double, double> func = (v) => Math.Sin(vMath.PI2); // define a sin easing function
anim1 = this.picBall.Animate(600, -50, 5000, (t,v) => t.Left = (int)v, EasingType.Linear, infinity:true); // X linear animation
anim2 = this.picBall.Animate(100, 200, 5000, (t,v) => t.Top = (int)v, easingFunc: func, infinity: true); // Y custom animation
在这里插入图片描述

4.该库支持的内置缓动函数

名称说明
Linear线性
BackEaseIn拉后 ease in
BackEaseOut拉后 ease out
BackEaseInOut拉后 ease in and ease out
BounceEaseIn弹性 ease in
BounceEaseOut弹性 ease out
BounceEaseInOut弹性 ease in and ease out
ElasticEaseIn橡皮筋 ease in
ElasticEaseOut橡皮筋 ease out
ElasticEaseInOut橡皮筋 ease in and ease out
QuadraticEaseIn平方 ease in
QuadraticEaseOut平方 ease out
QuadraticEaseInOut平方 ease in and ease out
CubicEaseIn立方 ease in
CubicEaseInOut立方 ease in and cubic ease out
CubicEaseOut立方 ease out
QuarticEaseIn四次方 ease in
QuarticEaseOut四次方 ease out
QuarticEaseInOut四次方 ease in and ease outut
QuinticEaseIn五次方 ease in
QuinticEaseOut五次方 ease out
QuinticEaseInOut五次方 ease in and ease out
ExponentialEaseIn指数 ease in
ExponentialEaseOut指数 ease out
ExponentialEaseInOut指数 ease in and ease out
SinusoidalEaseIn正弦曲线 ease in
SinusoidalEaseOut正弦曲线 ease out
SinusoidalEaseInOut正弦曲线 ease in and ease out
CircularEaseIn圆形 ease in
CircularEaseOut圆形 ease out
CircularEaseInOut圆形 ease in and ease out

5.代码下载

CSDN下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/25701.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DeepSORT(目标跟踪算法)中的计算观测值与状态估计的马氏距离

DeepSORT&#xff08;目标跟踪算法&#xff09;中的计算观测值与状态估计的马氏距离 flyfish 在目标跟踪中&#xff0c;使用马氏距离可以帮助判断某个观测值是否与当前的状态估计一致。 gating_distance 是一个方法&#xff0c;用于计算状态分布和观测值之间的门限距离&#…

Django ORM的QuerySet:解锁数据库交互的魔法钥匙

用到此篇文章知识的几篇文章&#xff1a; Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django API开发实战&#xff1a;前后端分离、Restful风格与DRF序列化器详解 文章目录 前言一、什么是QuerySet&#xff1f;二、QuerySet 的用途三…

Latex详细教程——图片、表格、公式

一、图片 1、占地一栏普通图片 使用figure环境&#xff0c;[thpb]表示希望在文中占地的优先级&#xff0c;[t] ~ top&#xff0c;顶部&#xff1b;[h] ~ here&#xff0c;当前位置&#xff1b;[p] ~ page of its own&#xff0c;浮动页&#xff1b;[b] ~ bottom&#xff0c;底…

Dell服务器根据GPU温度调整风扇转速

前言 dell服务器自动风扇是根据CPU温度来调速的&#xff0c;我跑AI的时候cpu温度不高但是GPU温度很高导致显卡卡死PVE虚拟机直接挂起无法运行&#xff0c;我看了下也没有基于显卡温度调速的脚本&#xff0c;于是我就自己写了一个 基于ipmi工具 乌班图等linux先安装ipmi apt …

GPT-4o:人工智能新贵的崭露头角

近日&#xff0c;OpenAI 推出了 GPT-4o&#xff0c;这一新一代的人工智能技术引起了广泛的关注和讨论。本文将对 GPT-4o 进行评价&#xff0c;包括与之前版本的对比分析、技术能力以及个人整体感受等方面。 1. 版本间的对比分析 GPT-4o 是 GPT 系列的最新版本&#xff0c;相较…

搭建vauditdemo靶场mysql为NO问题

一、问题 在搭建vauditdemo时&#xff0c;遇到如下显示问题&#xff1a; mysql版本检测为NO 二、解决 查找该方面问题时&#xff0c;并没有找到解决方法 然后换mysql版本换了五六个也没有解决问题 问了AI后给的答复有一条为将mysql改为mysqli 修改保存后解决问题 步骤如…

二分【1】二分查找框架 查找指定元素

目录 二分查找 基本思想 几种情况汇总 一。严格递增序列 1.查找本身 2.查找第一个大于等于自己的 3.查找第一个大于自己的 4.严格递减序列 二。有重复元素 1.取其中第一个出现的 2.取其中最后一个出现的 二分查找 基本思想 几种情况汇总 一。严格递增序列 1.查找本身…

QT 使用opencv 打开usb相机

1.在.pro文件中 添加opencv的头文件与lib 库 INCLUDEPATH D:\opencv\build\install\include LIBS D:\opencv\build\install\x64\mingw\lib\libopencv_*.a LIBS D:\opencv\build\install\x64\mingw\bin\libopencv_*.dll 2. usb相机类的头文件usbCamera.h #ifndef USBCAM…

QNX Hypervisor详细介绍

标签: QNX Hypervisor; Hypervisor; QNX Hypervisor是当前主流的满足车规级的虚拟机产品,这方面高通和QNX高度绑定,“QQ”(Qualcomm+QNX)组合在智能座舱领域占比高达90%以上。 什么是QNX Hypervisor? QNX Hypervisor是由BlackBerry旗下的QNX软件系统公司开发的一种虚…

作业-day-240607

思维导图 C编程 要求&#xff1a; 搭建一个货币的场景&#xff0c;创建一个名为 RMB 的类&#xff0c;该类具有整型私有成员变量 yuan&#xff08;元&#xff09;、jiao&#xff08;角&#xff09;和 fen&#xff08;分&#xff09;&#xff0c;并且具有以下功能&#xff1a;…

模板显式、隐式实例化和(偏)特化、具体化的详细分析

最近看了<The C Programing Language>看到了模板的特化&#xff0c;突然想起来<C Primer>上说的显式具体化、隐式具体化、特化、偏特化、具体化等概念弄得头晕脑胀&#xff0c;我在网上了找了好多帖子&#xff0c;才把概念给理清楚。 看着这么多叫法&#xff0c;其…

上位机图像处理和嵌入式模块部署(f407 mcu vs h750)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在目前工业控制上面&#xff0c;f103和f407是用的最多的两种stm32 mcu。前者频率低一点&#xff0c;功能少一点&#xff0c;一般用在低端的嵌入式设…

【DevOps】路由与路由器详细介绍:原理、功能、类型及应用场景

目录 一、路由详细介绍 1、什么是路由&#xff1f; 2、路由的基本原理 3、 路由协议 静态路由 动态路由 4、 路由表 5、 路由算法 6、路由的优缺点 优点 缺点 7、 路由应用场景 二、路由器详细介绍 1、什么是路由器&#xff1f; 2、 路由器的工作原理 3、路由器…

软考初级网络管理员_02_计算机系统基础知识(硬件)单选题

1.计算机系统中采用()技术执行程序指令时&#xff0c;多条指令执行过程的不同阶段可以同时进行处理。 流水线 云计算 大数据 面向对象 2.当硬盘出现坏道或坏块是&#xff0c;使用哪种方式重构? 全盘重构 局部重构 恢复重构 本地重构 3.传输二进制信号需要()的带宽。…

C语言详解(文件操作)1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

通过在idea上搭建虚拟hadoop环境使用MapReduce做词频去重

idea上的MapReduce ​ 一般在开发中&#xff0c;若是等到环境搭配好了再进行测试或者统计数据&#xff0c;数据处理等操作&#xff0c;那会很耽误时间&#xff0c;所以一般都是2头跑&#xff0c;1波人去在客户机上搭建环境&#xff0c;1波人通过在idea上搭建虚拟hadoop环境&am…

【Python Cookbook】S02E08 编写多行模式的正则表达式

目录 问题解决方案讨论 问题 我们打算使用正则表达式对一段文本做匹配&#xff0c;但是希望在进行匹配时能够跨越多行。换句话说&#xff0c;正则表达式中 . 可以匹配任意除了换行符的字符&#xff0c;我们如何让他也能够匹配换行符&#xff1f; 解决方案 例如在如下的两个案…

React+TS前台项目实战(五)-- 全局常用组件Link封装+使用Omit定义类型

文章目录 前言Link组件1. 功能分析2. 代码注释说明3. 使用方式 总结 前言 接下来的几篇文章&#xff0c;将主要封装全局常用组件&#xff0c;以便于后续编写页面的简易和维护性的提高。本文将主要讲述跳转组件的封装。 Link组件 1. 功能分析 &#xff08;1&#xff09;国际化…

java期末细节知识整理(三)

1.一个类是多个对象的共性体现 2.一个类可以有多个修饰符 3.类是将数据和方法封装在一起的一种数据结构 4.类和对象是面向对象程序设计方法中最核心的概念 5.在三目运算符flag&#xff1f;x1&#xff1a;x2中&#xff0c;如果x1和x2中有一个是浮点数&#xff0c;那么返回值…

Vue3父组件如何访问子组件属性和方法

本篇内容主要是父组件如何访问子组件的属性和方法 文章目录 子组件 //son.vue代码const list (info) >{console.log(info) }const name ref("XXXX")//子组件向父组件暴露了一个方法&#xff0c;然后父组件就可以去使用子组件里面的一些属性和方法了 //子组件向…