Unity -Demo 之 ✨让UI画面“boling”“boling”的闪烁效果

这是我参与更文挑战的第9天，活动详情查看： 更文挑战

Unity -Demo 之 ✨让UI画面“boling”“boling”的闪烁的效果

前言

每天一个小知识，今天来做一个UI元素跑马灯的效果，快来看看吧！

最近做东西，想要一个让UI组件（图片、字体等都可以）闪烁的效果，就想到CanvasGroup组件，通过用代码来控制CanvasGroup组件里的alpha来达到UI组件的闪烁效果。

用下列代码将UI组件的透明度控制变化，第一个值为初始UI透明度，第二个值为要达到的目标透明度，最后一个值是透明度变化的速度。

Mathf.Lerp(canvasGroup.alpha, alpha, alphaSpeed * Time.deltaTime);
复制代码

效果如下：

在Panel上添加CanvasGrounp组件，挂上脚本使用即可

脚本代码如下:

 public class First : MonoBehaviour
    {
        private Text tips;//闪烁的Text组件
        private CanvasGroup canvasGroup;
        private float alphaSpeed = 5f;//闪烁速度
        private float alpha = 0.2f;//最低透明度
        private bool isShow = true;//用来控制闪烁的内容

        void Awake()
        {
            tips = transform.Find("Tips").GetComponent<Text>();
            canvasGroup = tips.transform.GetComponent<CanvasGroup>();
        }
        private void Update()
        {
            if (isShow)
            {
                if (canvasGroup.alpha != alpha)
                {
                    canvasGroup.alpha = Mathf.Lerp(canvasGroup.alpha, alpha, alphaSpeed * Time.deltaTime);
                    if (Mathf.Abs(canvasGroup.alpha - alpha) <= 0.01)
                    {
                        canvasGroup.alpha = alpha;
                        isShow = false;
                    }
                }
            }
            else
            {
                if (canvasGroup.alpha != 1)
                {
                    canvasGroup.alpha = Mathf.Lerp(canvasGroup.alpha, 1, alphaSpeed * Time.deltaTime);
                    if (Mathf.Abs(1 - canvasGroup.alpha) <= 0.01)
                    {
                        canvasGroup.alpha = 1;
                        isShow = true;
                    }
                }
            }
        }

复制代码

总结

通过控制CanvasGroup组件来调节UI的透明度，达到一个UI元素跑马灯闪烁的效果
定义一个bool值来让他不停的循环闪烁，将此脚本挂载到需要闪烁的UI元素上即可！
这样就可以满足我们的需求了！！！
今天的你学会了吗？