当前位置: 首页 > news >正文

unity中UI界面的一些动画实现总结

在做unity的ui界面的时候,美术通常会实现一些动画效果。这里列举几个:
1、位置的变化
2、旋转的变化
3、缩放的变化
4、alpha的变化
5、颜色的变化

我们举一个例子:
在这里插入图片描述
位置的变化:
(1)target为作用的对象;
(2)curve为曲线变化
(3)duration
(4)startdelay为延迟几秒之后做动画
(5)type为动画类型
(6)loop为循环模式
(7)from是开始的位置,to为结束的位置;
我们这里重点讲解下曲线的使用,是如何采样,并做插值的。

from为起始位置,to为终止位置;通过当前的时间,除以duration做一个线性插值。
curPosition = from*(1-percent)+to*percent; //当percent=0的时候curPostion=from;当percent=1的时候curPostion=to;
这是最常见的插值方式。

这里的percent的计算,是一个当前的时间,作为x坐标,然后从曲线上采样出的y的值。
曲线样子比如为:
在这里插入图片描述
可以发现,x轴为0到1,y轴也为0到1。
我们首先看x轴对应于我们程序中的什么,在动画开始的时候,将累加的时间countdown=0,
每帧countdown+=deltaTime;
x = countdown * 1.0f / duration; //这里的duration为动画的持续时间
我们这里要对x做限制,映射到[0~1]的范围内。这样通过函数:

AnimationCurve curve;
percent = curve.Evaluate(float time);

就可以采样出来曲线的y的值了,然后用y的值,作为插值系数,进行插值。
有人说,是不是可以直接用x作为插值系数呢?可以的,但是这样就是严格的线性插值了。我们可以将曲线提供给美术,让美术去更改插值的系数,这样更灵活。
UI动画的大体的思路如此。虽然只有这么几种动画模式,但是加了动画之后,ui就可以有很多意想不到的效果。

下面有一个具体的应用:
比如比赛视频里的成绩榜,就经常出现下面的效果:
https://www.bilibili.com/video/BV1Ys411u7oq/?spm_id_from=autoNext
在这里插入图片描述
这个在unity的滑动列表中怎么做呢,我们就可以通过上面的组件,对每个item,进行逐个的做动画,以实现。
实现思路:
1、在每个item上加动画组件
2、在update的主循环中逐个进行做动画
3、还未轮到做动画的item,将其初始化为最初始化的状态即可。

相关文章:

  • Delphi调用CreateProcess创建进程
  • untiy打android包,报Could not resolve com.android.tools.build:gradle和Connect to 127.0.0.1:80 [/127.0.0.1
  • C#访问lua获取一个全局基本数据类型
  • C#访问lua获取一个全局基本数据类型——table映射成C#中class或struct
  • Linux学习笔记12——Unix中的进程
  • C#访问lua获取一个全局基本数据类型——table映射成C#中interface
  • C#访问lua获取全局函数——映射成delegate
  • C#访问lua获取一个table中的函数——映射成interface中的函数
  • C#访问lua获取全局函数——此函数带多个返回值
  • [置顶] sqlserver2008 新建表之后无法更改表设计的原因
  • lua访问C#中类——访问成员+方法
  • C++中dynamic_cast
  • 数据结构-反转链表
  • lua中rawget和rawset
  • Linux红黑树(二)——访问节点
  • 4. 路由到控制器 - Laravel从零开始教程
  • CSS魔法堂:Absolute Positioning就这个样
  • flutter的key在widget list的作用以及必要性
  • node学习系列之简单文件上传
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • SegmentFault 2015 Top Rank
  • SpringCloud集成分布式事务LCN (一)
  • 记录:CentOS7.2配置LNMP环境记录
  • 设计模式 开闭原则
  • 一起参Ember.js讨论、问答社区。
  • 用jquery写贪吃蛇
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • ​ubuntu下安装kvm虚拟机
  • ​决定德拉瓦州地区版图的关键历史事件
  • #大学#套接字
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • ()、[]、{}、(())、[[]]命令替换
  • (16)Reactor的测试——响应式Spring的道法术器
  • (八)c52学习之旅-中断实验
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (学习日记)2024.01.09
  • (一一四)第九章编程练习
  • (转)真正的中国天气api接口xml,json(求加精) ...
  • .net mvc部分视图
  • .NET MVC之AOP
  • .NET Remoting Basic(10)-创建不同宿主的客户端与服务器端
  • .NET6实现破解Modbus poll点表配置文件
  • @31省区市高考时间表来了,祝考试成功
  • @Builder用法
  • @SentinelResource详解
  • [ linux ] linux 命令英文全称及解释
  • [.net 面向对象程序设计进阶] (19) 异步(Asynchronous) 使用异步创建快速响应和可伸缩性的应用程序...
  • [C#]扩展方法
  • [C++]类和对象(中)
  • [CSS] 点击事件触发的动画
  • [CSS]浮动
  • [emacs] CUA的矩形块操作很给力啊
  • [Everyday Mathematics]20150130