在做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 }