超详细的脚本注释哦！
👉一、前言👉二、幻灯片自动播放效果👉三、实现步骤及原理1.实现步骤2.原理👉四、核心代码脚本👉一、前言
之前写了一篇实现图片渐变色效果的文章：Unity实现UGUI空物体颜色渐变的描边方法，有粉丝朋友留言说能不能写个实现图片幻灯片渐变效果的案例，那么现在它来咯！
demo效果及教程请看下文。
👉二、幻灯片自动播放效果
先来看看用Unity实现的图片幻灯片播放效果吧！
👉三、实现步骤及原理
1.实现步骤
Step1：搭建简单场景
demo场景只有两张图片和两个按钮组成就行，新建面板panel，新建两个图片和按钮放在panel下，分别命名如下图。
Step2：设置小细节
将图片一放到图片二之后，根据最后渲染的最先显示原理先显示图片一；将图片二的alpha值改为0，即将图片的color属性的color.a改为0,如下图：
2.原理
我们利用Dotween插件的队列动画实现这个幻灯片的效果。
这里我们用到：sequence.Append()、sequence.Join()、OnComplete()和DOFade()这四个方法，一起配合使用可以让图片一的alpha值从1渐变为0的同时，也让图片二的alpha值从0渐变为1。这样就实现了图片一渐变结束之后看到图片二的效果了；同理让图片二alpha从1变为0，同时图片二alpha从0变为1。在每个动画执行完成后添加回调函数触发替换图片的精灵图的方法，最后使用sequence.SetLoops(-1)方法，设置动画无限循环，这样就实现了图片渐变交替显示的幻灯片效果了。是不是很简单，下面我们看下如何写脚本去实现我们以上的逻辑。
👉四、核心代码脚本
新建脚本SlideShow.cs，挂载到Panel物体上（注意子对象Image和Button的命名，因为我这里用的是查找对象赋值的方法，名字一定要跟脚本一致，否则找不到会报错哦，还要注意拖拽精灵图赋值给sprites链表哦），
写下如下代码：（注释都写得很明白了吧！不懂再留言问我吧）
using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;using DG.Tweening;//使用dotween动画需要的命名空间public class SlideShow : MonoBehaviour{private Button showBtn;//幻灯片播放按钮private Button stopBtn;//停止播放按钮private Image showImg;//图片1private Image showImg2;//图片2public List<Sprite> sprites = new List<Sprite>();//保存精灵图的链表，下标0、1、2、....private int imgCount = 1;//当前图片的下标，因为我初始已经赋值两张精灵图，所以下一张替换时从2开始private void Start(){//查找并赋值组件对象showImg =transform.Find("图片1").GetComponent<Image>();showImg2 = transform.Find("图片2").GetComponent<Image>();showBtn = transform.Find("Play").GetComponent<Button>();stopBtn = transform.Find("Stop").GetComponent<Button>();//为按钮注册事件showBtn.onClick.AddListener(ShowSildeImg);stopBtn.onClick.AddListener(StopSildeShow);}/// <summary>/// 幻灯片自动播放事件，使用dotween动画实现/// </summary>private void ShowSildeImg(){Sequence sequence= DOTween.Sequence();//声明一个dotween动画队列，按照队列先入先出的原则播放//添加图片一的动画一：图片1的alpha值5秒内从1变为0，实现图片渐变效果sequence.Append(showImg.DOFade(0, 5).OnComplete(() =>{//添加一个动画播放完成的回调函数OnComplete，lambda表达式写法，动画播放完成后替换精灵图ChangeSprite(showImg);Debug.Log("图片一精灵图替换为：" + (imgCount + 1));}));//动画一播放的同时加入图片的二的动画二与动画一同时播放：此时图片2的alpha值5秒内从0变为1。sequence.Join(showImg2.DOFade(1, 5));sequence.AppendInterval(1f);//延迟2秒后播放后面动画//添加同时播放的动画3和动画4，原理同上sequence.Append(showImg2.DOFade(0, 5).OnComplete(() =>{ChangeSprite(showImg2);Debug.Log("图片二精灵图替换为：" + (imgCount + 1));}));sequence.Join(showImg.DOFade(1, 5));sequence.AppendInterval(1);sequence.SetLoops(-1);//参数为-1表示设置动画为无限循环，就形成了一个幻灯片播放效果了}// 替换图片的精灵图private void ChangeSprite(Image img){//判断当前显示的精灵图下标是否小于链表精灵图总数量-1if (imgCount<sprites.Count-1){imgCount++;}else{imgCount = 0;//超过则从下标0重新开始}img.sprite = sprites[imgCount];//替换当前图片的精灵图为下次要显示的精灵图}// 停止播放事件private void StopSildeShow(){DOTween.KillAll();//砍掉所以补间动画}}
做好以上工作，开始运行就能看到图片幻灯片播放的效果了。
