Unity UI实现循环播放序列图

一、前言

在Unity中，UI组件可以说是比较常用的一个功能，其中序列图也是一种非常常见的UI组件。本文主要解决循环播放序列图的问题，其中的技术方案就是使用Unity的UGUI来实现。

二、方案

实现循环播放序列图，可以参考以下步骤：

1. 创建一个空的Image对象，命名为SequenceImage。
2. 创建一个Sprite数组，用于存储序列图的所有帧。
3. 创建一个协程，在该协程里循环播放序列图。
4. 将协程添加到游戏对象的生命周期中，并启动协程。

三、实现

1. 创建一个空的GameObject对象，名字为LoopingSequence。
2. 在该GameObject对象下创建一个空的Image对象，命名为SequenceImage，作为序列图的父节点。
3. 把所有的序列帧都打进一个文件夹里，然后依次导入到Unity中，并把它们放到一个Sprite数组中，命名为“Frames”。
4. 创建一个名为LoopingSequence.cs的脚本，如下所示：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class LoopingSequence : MonoBehaviour
{
    //公开的参数
    public Sprite[] frames;
    public float speed = 0.1f;

    //私有的参数
    private Image img;
    private int currentFrame = 0;

    void Start() 
    {
        img = GetComponent<Image>();
        StartCoroutine(Animate());
    }

    IEnumerator Animate() 
    {
        while(true) 
        {
            img.sprite = frames[currentFrame];
            currentFrame = (currentFrame + 1) % frames.Length;
            yield return new WaitForSeconds(speed);
        }
    }
}

上面的代码是循环播放序列图的核心代码，其实现原理就是当协程在运行时，通过不断地更新Unity的图片组件来切换下一张图片。并且每一张图片的切换速度都可以通过speed变量进行设置。

1. 把LoopingSequence脚本挂载到LoopingSequence对象上，并把Frames设置为这个数组。

四、示例说明

这里提供两个简单示例，用于讲解如何使用循环播放序列图。

1. 示例一

假设我们在做一个小游戏的动画，需要在玩家碰到宝石时显示一段摇摆的序列动画，在玩家离开宝石时停止动画。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class GemHandler : MonoBehaviour 
{
    //公开的参数
    public LoopingSequence gemAnimation;

    void OnTriggerEnter2D(Collider2D other) 
    {
        if (other.tag == "Player") 
        {
            gemAnimation.gameObject.SetActive(true);
            StartCoroutine(StopAnimation());
        }
    }

    IEnumerator StopAnimation() 
    {
        yield return new WaitForSeconds(2f);
        gemAnimation.gameObject.SetActive(false);
    }
}

1. 示例二

假设我们在做一个手机APP，需要在APP启动时，在欢迎界面中循环播放一个LOGO序列图。

这个实现比较简单，只需要在欢迎界面的脚本中挂载LoopingSequence组件，并设置好Frames数组和speed变量即可。

public class WelcomePage : MonoBehaviour 
{
    //公开的参数
    public LoopingSequence logoLoopingSequence;

    void Start() 
    {
        logoLoopingSequence.gameObject.SetActive(true);
    }
}

五、总结

Unity中使用UI组件来实现循环播放序列图，可以给UI界面带来更加丰富的交互体验和更灵活的动态效果。通过使用协程来实现循环播放序列图，也让UI的动态效果得到了进一步优化。