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

原创 2015年07月10日 09:11:12

孙广东  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
















版权声明:本文为博主原创文章,未经博主允许不得转载。出自 游戏开发实验室_孙广东

相关文章推荐

Unity3d使用线程的姿势

想必大家也知道,U3D中可以使用线程,但是却不能在子线程中访问U3D的类型,这里我就分享下我的做法。 首先分享两个脚本~ using UnityEngine; using System...

Dotween 淡入淡出 循环效果

最重要的一代码: 物体.GetComponent().material.DOFade(1,1).SetLoops(-1,LoopType.Yoyo); 获取你需要闪烁的物体上的材质球,用DOTwee...

UGUI DOTween渐隐渐现

Tween tweenAlpha; tweenAlpha = DOTween.To(() => MaskSpr.fillAmount, x => MaskSpr.fillAmount = x, 1f,...
  • OnafioO
  • OnafioO
  • 2016年05月17日 10:58
  • 3182

【Unity】 DoTween对UI进行DoFade操作存在问题及解决办法

如何使用DoTween对UGUI组件进行褪色操作

unity3d的图片淡入淡出代码

原文地址:unity3d的图片淡入淡出代码作者:amiliar using UnityEngine; using System.Collections; public class SimpleFad...

Unity动画插件DoTween使用总结(一)

研究了一下DoTween插件,简单记录一下学习心得。 首先下载安装DoTween 1.通过Dotween来实现物体的移动。 首先有一种比较复杂的方法。 在新脚本中,要先加上using DG.T...

DoTween全解析(入门篇)

DoTween全解析(一) 概述: DoTween,Itween,这些名字作为一个Unity开发人员听起来并不陌生,它们在动画方面表现出了令人折服的能力,今天我带着大家来一起认识一下这款插件。...

Unity3d 场景中物体渐隐效果实现

using UnityEngine; using System.Collections; public class TestClass : MonoBehaviour {    priva...

Unity 动画插件 DOTween 的简单使用

找来找去,居然找不到一个比较适合的 DOTween例子,就自己写一点来熟悉熟悉。首先当然得导入 dotween 的插件包。先说一下,dotween 的动画效果对于2D 和 3D 都是适用的。 场景中...

DoTween 四:< 常用方法 —— 实现逐渐隐藏>

实现逐渐更改透明度 public static Tweener DOFade(this Image target, float endValue, float duration); //...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UGUI 实现界面 渐隐渐现 FadeIn/Out 效果
举报原因:
原因补充:

(最多只允许输入30个字)