Unity实现游戏UI滑动效果指南

super1

废话不多说，先上视频。


当然这个动画还是很简单的，所以我就突发奇想把它弄得更加复杂，更加有意思了点，当然我印象中，一些商业游戏也有些类似的效果。


这个动画效果第一阶段是点击其中一个物体，其他物体朝左右散开，点击的物体移至最左边，第二个阶段是，从他的背后缓缓往右展开一个画卷，第三阶段是点击周围，画卷缓缓返回，之前的物体再缓缓归位。
这套动画，加上好的资源，将会产生很好的效果，光UI来说，很多大厂做的游戏也就是这个样子了，做出来之后，去公司面试，薪酬也可以要得稍微高点。
那么究竟该如何实现它，并在面试的过程中增加更多印象分呢？
拿起小本本记好，开课啦！

首先创建一个这样的预制体：


有几个点需要注意一下，首先是层级关系，射线在越下面，优先级越高，会遮挡他上面的射线事件，有时候按钮按了没反应，可能就是因为射线被遮挡的缘故。
Content下面先暂时用5个button写死，正常在项目中是动态生成的，而且也不会单独用scrollview做滑动列表，都是重新封装的，只生成几个子物体可循环利用的滑动列表。
新建一个main脚本，按照下图绑好节点，就可以开始书写代码啦！


先上一部分代码，这个代码主要是刚刚开始一阶段的。
1. 首先引用dotween的命名空间，不知道怎么安装dotween的，我会在文章最后写上；
2. 写一个button的集合。
3. 注意，c#和lua不一样，没有闭包，要重新写一个局部变量保存，要不然监听事件里面的i（t）会是6.
4. 点击的物体向左移动到本地x坐标为100的位置，时间为1秒，oncomplete表示完成之前的动画后，执行括号内panelmove方法。
5. 此处是三元，在点击物体左边的物体移至本地x坐标-300的位置，右边的物体移至本地坐标1000的位置。


如果有同学想要本篇文章的素材或是其他案例视频教学资源，可以点击下方的卡片获取。
下图是中间画卷移出动画，先获取他当前的本地x坐标，再设置他在本地坐标-300的位置，再设置它显示，最后再用dotween移至他原本的位置。其中一个注意的点是，要在他的父物体上加一个mask遮罩，超出他父物体的区域就不显示了，这样才能有一种画卷是从那个点击物体中移出来的感觉。


接下来就是点击物体周围关闭的动画了。

效果：


点击事件


画卷移回后所调用的方法。


好了，大功告成啦。


如果有同学想要本篇文章的素材或是其他案例视频教学资源，可以点击下方的卡片获取。
接下来关于dotween的下载，我这边就不再赘述了，去网上搜一下就会有很详细的步骤。
我写个大概的：unity菜单栏window找到assetstore 搜索dotween，下载个免费的，然后再setup一下就好了。



为了让大家从每次案例开发中有尽可能多的收获，我们不定期开设了近乎免费的游戏项目实战训练营，通过一个个不同游戏类型的Demo研发，让大家在过程中不知不觉入门Unity游戏开发，并能为自己的简历积累不少完成度不错的项目作品。
每期也配备相应的老师进行问题解答，用最快的方式解决你的问题。
我们目前已经开设过的训练营案例有：
1) 《一周学会ARPG游戏开发》
2) 《FPS游戏5天集训营》
3) 《ARPG战斗优化训练营》
4) 《元气骑士类全屏弹幕攻击训练营》
5) 《潜行机器人AI训练营》
6) 《空洞骑士5天训练营》
7) 《饥荒生存类游戏5天训练营》


目前为止，我们收获了众多学习者的五星好评，在每期的训练营中，我们不仅带大家实现具体的项目Demo，更会涉及到架构设计、系统设计以及代码设计三大层面的设计问题，不仅如此，我们每期训练营还会专门讲解求职和简历撰写相关的问题。
本期，我们开设了全新的 《三国杀卡牌游戏》5天训练营，手把手带大家从0实现一个卡牌类游戏Demo~
原价198，现在限时仅需1元！


课程每晚8点以直播方式进行，报名后还会进入专属的学习辅导群，课程大纲如下 ：


现在点击下方卡片就可报名参加！
学完你能收获什么？
1) 掌握游戏开发基本流程
2) 掌握游戏开发基础场景搭建与逻辑
3) 掌握重度使用Unity协程实现卡牌回合
4) 掌握玩家操作与完整循环机制
5) 掌握求职阶段准备方式和流程，具备应对面试的能力
6) 了解游戏开发工程师职业发展路径
7) 针对个人情况，在直播现场得到职业发展建议
连续5天，450+分钟
不仅仅让你做出三国杀卡牌游戏Demo，更会让你了解游戏行业求职所面临最重要的问题，让你在入行前避过这些坑。
快点击下方立刻报名参加本次训练营吧！

jquave

牛

Mecanim

[赞同]

DungDaj

嵌个网页不好吗