Unity使用DOTween实现图片幻灯片渐变自动播放效果，超简单的

• • • 一、前言
    • 二、幻灯片自动播放效果
    • 三、实现步骤及原理
    • • 1.实现步骤
      • 2.原理
    • 四、核心代码脚本

之前写了一篇实现图片渐变色效果的文章：Unity实现UGUI空物体颜色渐变的描边方法，有粉丝朋友留言说能不能写个实现图片幻灯片渐变效果的案例，那么现在它来咯！

demo效果及教程请看下文。

先来看看用Unity实现的图片幻灯片播放效果吧！

Step1：搭建简单场景

demo场景只有两张图片和两个按钮组成就行，新建面板panel，新建两个图片和按钮放在panel下，分别命名如下图。

Step2：设置小细节

将图片一放到图片二之后，根据最后渲染的最先显示原理先显示图片一；将图片二的alpha值改为0，即将图片的color属性的color.a改为0,如下图：

我们利用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;//图片1
    private Image showImg2;//图片2
    public List sprites = new List();//保存精灵图的链表，下标0、1、2、....
    private int imgCount = 1;//当前图片的下标，因为我初始已经赋值两张精灵图，所以下一张替换时从2开始
    private void Start()
    {
        //查找并赋值组件对象
        showImg =transform.Find("图片1").GetComponent();
        showImg2 = transform.Find("图片2").GetComponent();
        showBtn = transform.Find("Play").GetComponent();
        stopBtn = transform.Find("Stop").GetComponent();
        //为按钮注册事件
        showBtn.onClick.AddListener(ShowSildeImg);
        stopBtn.onClick.AddListener(StopSildeShow);
    }
    /// 

    /// 幻灯片自动播放事件，使用dotween动画实现
    /// 
    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)
    {
        //判断当前显示的精灵图下标是否小于链表精灵图总数量-1
        if (imgCount
            imgCount++;
        }
        else
        {
            imgCount = 0;//超过则从下标0重新开始
        }
        img.sprite = sprites[imgCount];//替换当前图片的精灵图为下次要显示的精灵图
    }
    // 停止播放事件
    private void StopSildeShow()
    {
        DOTween.KillAll();//砍掉所以补间动画
    }
}

做好以上工作，开始运行就能看到图片幻灯片播放的效果了。