中高级UI设计-使用DOTween代码制作专业UI动画

课程优秀标准：在学习了unityUI设计的基础知识后，学习用DOTween为UI界面制作流畅的专业UI动画。

项目亮点：流畅而吸引人的UI动画

在我的Unity项目中，我制作了一个简单的商店面板，然后利用DOTween代码为其添加了面板淡出、面板淡入、商品弹出显示等专业UI动画，还附有音频效果。这些动画效果不仅流畅自然，还能提升用户的交互体验，展现了界面动画在增强用户界面可用性方面的重要性。

视频演示：地址

项目地址：NetDisk

实现过程：

①绘制面板

项目中用到的资产包：DOTween (HOTween v2)   Sweet Land GUI   Cute Cartoon Mobile GUI

创建UI-Canvas，添加Image:打开商店的按钮ShopBtn和商店面板ShopPanel，ShopPanel里再添加Image:Title，用于标题贴图，Image:ExitBtn，作退出按钮和Canvas:Buttons，用于存放商品项目，Buttons中添加十个Image子物体，再利用Grid Layout Group组件划分整齐的网格。每个Image都附有一个Image子物体来选择不同的贴图。

面板架构：

②UI管理脚本

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using DG.Tweening;  //引入DOTween库



public class NewBehaviourScript : MonoBehaviour

{

    public float fadeTime = 1f;

    public CanvasGroup canvasGroup;

    public RectTransform rectTransform; //面板的RectTransform组件

    public List<GameObject> items = new List<GameObject>(); //商品列表



    public AudioClip pop; //商品弹出的音效剪辑

    private AudioSource audioSource;



    private void Start()

    {

        audioSource = GetComponent<AudioSource>(); //绑定AudioSource

    }

    public void PanelFadeIn() //面板淡入的UI动画效果

    {

        canvasGroup.alpha = 0f; //动画开始之前面板透明度为0，即不可见

        rectTransform.transform.localPosition = new Vector3(0f, -1000f, 0f);   //在动画开始前将面板移至屏幕下方（视图外）

        rectTransform.DOAnchorPos(new Vector2(0f, 0f), fadeTime, false).SetEase(Ease.OutElastic);  //DOTween的方法，用于动画地改变RectTransform的锚点位置

//(new Vector2(0f, 0f), fadeTime, false) 意味着面板将移动到其原始锚点位置，在 fadeTime 指定的时间内完成此操作。false 参数表示不使用局部坐标进行计算

        canvasGroup.DOFade(1, fadeTime);  //DOTween的方法，用于动画地改变透明度(从0f到1f）。

        StartCoroutine("ItemsAnimation"); //启动ItemsAnimation(商品弹出效果)的协程

    }



    public void PanelFadeOut()  //面板淡出的UI动画效果

    {

       //实现思路与淡入类似，反转淡入效果函数的参数值即可

        canvasGroup.alpha = 1f;

        rectTransform.transform.localPosition = new Vector3(0f, 0f, 0f);

        rectTransform.DOAnchorPos(new Vector2(0f, -1000f), fadeTime, false).SetEase(Ease.InOutQuint);

        canvasGroup.DOFade(0, fadeTime);

    }



  //商品依次弹出的动画效果

    IEnumerator ItemsAnimation()  //协程方法，用于执行需要多帧分布的长期操作

    {

        foreach(var item in items)

        {

            item.transform.localScale = Vector3.zero;  //将每个商品的大小缩放到0，使其在开始动画之前不可见

        }

        foreach(var item in items)

        {

            audioSource.PlayOneShot(pop);  //每弹出一个商品播放一次音效

            item.transform.DOScale(1f, fadeTime).SetEase(Ease.OutBounce); //用DOTween来对每个商品进行缩放动画。DOScale(1f, fadeTime) 使得商品从缩放为0渐变到正常大小（1f）

            yield return new WaitForSeconds(0.25f); //设置等待时间让每一个item依次出现

        }

    }

}

将脚本挂载到UI上，再在ShopBtn和ExitBtn的Button组件上添加单击事件，绑定UI，然后事件中分别选择脚本的PanelFadeIn方法和PanelFadeOut方法，即可实现面板淡出淡入的切换

将Buttons组件里的商品子物体拖进脚本的items列表中，再在Audio Source组件拖进准备好的Audio Cilp文件，即可实现带音效的商品弹出动画效果