UGUI 实现界面 渐隐渐现 FadeIn/Out 效果

时间:2023-03-09 12:50:21
UGUI 实现界面 渐隐渐现 FadeIn/Out 效果

孙广东  2015.7.10

事实上熟悉NGUI的人,应该知道  实现渐隐渐现 FadeIn/Out 效果是非常方便的,由于父对象 的 改变会自己主动影响到子对象。

比方 UIWidget、UIPanel等组件都有 Alpha属性。在Inspector面板上能够直接设置拖拽的改变看看。  确实如此。

可是到UGUI呢,没有这么方便。  须要熟悉一下 组件的内部和继承关系了!

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

public class Text : MaskableGraphic, ILayoutElement

public abstract class MaskableGraphic : Graphic, IMaskable

public class Image : MaskableGraphic, ICanvasRaycastFilter, ISerializationCallbackReceiver, ILayoutElement

然后我们再阅读Graphic代码,我们会发现有两个方法:

public void CrossFadeAlpha(float alpha, float duration, bool ignoreTimeScale);
public void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha);

由于源码是开源的,大家能够自己去看看!

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

void Start()
{ Component[] comps = GameObject.Find("/Canvas").GetComponentsInChildren<Component>();
foreach (Component c in comps)
{
if (c is Graphic)
{
(c as Graphic).CrossFadeAlpha(0, 1, true);
} }
}

可是 Unity提供的方法非常有限,就是 要做延迟怎么办? 要在结束后运行回调怎么办? 要改变渐变曲线怎么办?

我们在知道 原理了之后,就能够 在看看 DOTween 补间动画插件。

官方文档有专门 的区域 API 是针对 Unity4.6种的UGUI元素的。【自己去看】

        #region 渐显/渐隐的形式 对菜单对象
/// <summary>
/// 渐现菜单
/// </summary>
/// <param name="targetGO">菜单游戏对象</param>
public static void FadeOpenMenu(GameObject targetGO)
{
Component[] comps = targetGO.GetComponentsInChildren<Component>();
for (int index = 0; index < comps.Length; index++)
{
Component c = comps[index];
if (c is Graphic)
{
//(c as Graphic).color = new Color(1, 1, 1, 0);
// (c as Graphic).CrossFadeAlpha(1f, MENU_FADE_IN_TIME, true);
(c as Graphic)
.DOFade(0f, MENU_FADE_IN_TIME)
.SetDelay(CAMERA_ZOOM_IN_DELAY)
.SetEase(MENU_SCALE_OPEN_TYPE)
.From()
.OnComplete(
() =>
{
MenuSignalManager.OpenedMenuSignal.Dispatch();
});
}
}
// 运行完成的回调
}
/// <summary>
/// 渐隐菜单(无销毁操作)
/// </summary>
/// <param name="targetGO">菜单游戏对象</param>
public static void FadeCloseMenu(GameObject targetGO)
{
Component[] comps = targetGO.GetComponentsInChildren<Component>();
for (int index = 0; index < comps.Length; index++)
{
Component c = comps[index];
if (c is Graphic)
{
//(c as Graphic).CrossFadeAlpha(0, MENU_FADE_OUT_TIME, true); // 当然了假设觉得不方便的话,能够使用dotween的Graphic的DoColor、DoFade
(c as Graphic).
DOFade(0, MENU_FADE_OUT_TIME)
.SetEase(MENU_FADE_OUT_TYPE)
.OnComplete(() =>
{
MenuSignalManager.CloseedMenuSignal.Dispatch(targetGO);
});
}
}
// 运行完成的回调
}
#endregion

UGUI 实现界面 渐隐渐现 FadeIn/Out 效果

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />