今天我们来用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