栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 游戏开发 > 其他

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

其他 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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,将其初始化为最初始化的状态即可。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/905872.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号