UGUI实现图片特效轮播,使用插件DOTWEEN

今天我们来用unity3d的UGUI来实现图片的轮播,也就是经常在一些视频网站上的一些图片轮播。这次将使用到动画插件DOTWEEN,主要目的也是为了熟悉Dotween这个插件。图片轮播的原理是比较简单的,我将实现图片特效轮播,也是看了别人的网站后想在UGUI上面实现以下,正好刚刚学习了Dotween,拿来练练手。

原理: 2张图片叠加在一起,且开始状态是2张图片都为一样的图片,切换之前,将后面的图片先直接切换成其他图片,然后对第一张图片做出各种动画操作(如将第一张图片的透明度逐渐降低),这样就可以特效的切换到其他图片。我们直接看看案例图如下:
图片压缩的有点模糊将就看吧。

用到的核心函数:
Sprite.Create(Texture2D texture, Rect rect, Vector2 pivot);
我们只需要关心这3个参数,其他默认即可。
Texture2D ,这个是我们图片的资源,用resources.load加载即可。
Rect 这个是很关键的,自己可以动手实验一下就明白了rect里面的2个参数,第一个即是image空白框中显示一张图片的某一个大小为第二个参数的位置。有点拗口,类似于HTML中css的Background-Position.
Vector2 直接为vector2.zero即可。

具体步骤如下啦:

第一步:先把场景搭好,图片上一共有32个小的image,左上角开始到左边,然后第二行继续(ps一下,如果你想适配不同的分辨率,image小图片的锚点改成下面图片中的一样,每一个都要改额,记得图片之间留一点点位置,感觉像网格一样。好像Grid Layout Group这个组件可以直接来调整这样的图片网格样式,没用过,我就暂时不研究它了,如果嫌一个图片一个图片的改锚点麻烦,可以去研究一下这个组件,会玩之后可以来交流交流)如下图,改成如下图的面板:
这里写图片描述
第二步:给每个image添加Canvas Group,这是为了给Dowteen来改变图片透明度用的,就是改变里面的Alpha
这里写图片描述
第三步:复制图片中force,然后改名为back,这就是原理中的第二张图片,force就是第一张啦。
好准备开始写代码了。

“`
using U

  • 5
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值