Unity3D中UGUI不使用DOTween制作渐隐渐现效果

在做UI后期设计时,我们可能要对UI做一些特效,这篇文章我们来学习下如何在Unity3d中对实现渐隐渐现的效果,

首先我们看下Unity New UI即UGUI中渐隐渐现的做法.

观察我们会发现Unity4.6 UI中每个能够显示控件都会有一个CanvasRender对象,CanvasRender有什么作用呢,我们

看下官方的解释:The Canvas Renderer component renders a graphical UI object contained within a Canvas.简单的

翻译过来就是,画布上的渲染器组件将呈现包含在一个画布内的图形用户界面对象,再仔细查看CanvasRenderer类

时我们可以看到有两个方法SetAlpha ,SetColor,显然我们可以修改透明度Alpha和Color来实现渐隐渐现,同时我

们还可以发现Button,Text,Image等控件都会集成自Unity.UI.Graphic

 

如下所示:

1 public class Text : MaskableGraphic, ILayoutElement
2  
3 public abstract class MaskableGraphic : Graphic, IMaskable
4  
5 public class Image : MaskableGraphic, ICanvasRaycastFilter, ISerializationCallbackReceiver, ILayoutElement

 

然后我们再阅读Graphic代码,我们会发现有两个方法
1 public void CrossFadeAlpha(float alpha, float duration, bool ignoreTimeScale);
2 public void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha);

 

 

开源源码如下:

复制代码
 1 public void CrossFadeAlpha(float alpha, float duration, bool ignoreTimeScale)
 2 {
 3     CrossFadeColor(CreateColorFromAlpha(alpha), duration, ignoreTimeScale, true, false);
 4 }
 5  
 6 public void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha)
 7 {
 8     CrossFadeColor(targetColor, duration, ignoreTimeScale, useAlpha, true);
 9 }
10  
11 private void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha, bool useRGB)
12 {
13     if (canvasRenderer == null || (!useRGB && !useAlpha))
14         return;
15  
16     Color currentColor = canvasRenderer.GetColor();
17     if (currentColor.Equals(targetColor))
18         return;
19  
20     ColorTween.ColorTweenMode mode = (useRGB && useAlpha ? ColorTween.ColorTweenMode.All : (useRGB ? ColorTween.ColorTweenMode.RGB : ColorTween.ColorTweenMode.Alpha));
21  
22     var colorTween = new ColorTween {duration = duration, startColor = canvasRenderer.GetColor(), targetColor = targetColor};
23     colorTween.AddOnChangedCallback(canvasRenderer.SetColor);
24     colorTween.ignoreTimeScale = ignoreTimeScale;
25     colorTween.tweenMode = mode;
26     m_ColorTweenRunner.StartTween(colorTween);
27 }        
复制代码

 

 

因此我们利用CrossFadeColor或CrossFadeAlpha这两个方法就可以实现渐隐渐现了

下面是客户端调用代码

复制代码
 1 {
 2  
 3     Component[] comps = GameObject.Find("/Canvas").GetComponentsInChildren<Component>();
 4     foreach (Component c in comps)
 5     {
 6         if (c is Graphic)
 7         {
 8             (c as Graphic).CrossFadeAlpha(0, 1, true);
 9         }
10     }
11 }    
复制代码

 

 

执行的效果就是所有Canvas下的元素都在1秒之类执行淡出效果!

---上面原文:Unity4.6 UI实现渐隐渐现(FadeIn FadeOut)效果---

以下是我在实际项目中结合协程制作的提示信息闪烁功能实现

复制代码
 1   internal Coroutine noticeCor;
 2     internal void ShowNotice()
 3     {
 4         HideNotice();
 5         noticeCor = StartCoroutine(NoticeShowScale());
 6     }
 7 
 8     internal void HideNotice()
 9     {
10         if (null != noticeCor)
11         {
12             StopCoroutine(noticeCor);
13             noticeItme.gameObject.SetActive(false);
14         }
15     }
16 
17     IEnumerator NoticeShowScale()
18     {
19         noticeItem.gameObject.SetActive(true);
20         float targetA = 1;
21         noticeItem.GetComponent<CanvasRenderer>().SetAlpha(0);
22         float timer = 0;
23         while (timer<6f)
24         {
25             noticeItem.GetComponent<Graphic>().CrossFadeAlpha(targetA, 1, true);
26             yield return new WaitForSeconds(1f);
27             timer += 1f;
28             targetA = targetA == 0 ? 1 : 0;
29         }
30         noticeItem.gameObject.SetActive(false);
31         noticeCor = null;
32     }
复制代码

 

posted @   lovewaits  阅读(4882)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示