关闭

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

标签: unity3dunityugui
7970人阅读 评论(2) 收藏 举报
分类:

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
















3
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

如何使用DoTween对UGUI组件进行褪色操作
  • RICKShaozhiheng
  • RICKShaozhiheng
  • 2015-11-06 01:40
  • 7701

iTween基础之Fade(淡入淡出)

一、基础介绍 FadeTo:从当前透明度变到目标透明度 FadeFrom:从给定透明度变到原始透明度 FadeUpdate:类似于FadeTo,在Update()方法或循环环境中调用。提供每帧改变属性...
  • dingkun520wy
  • dingkun520wy
  • 2016-03-18 16:28
  • 4270

VC++ 漂亮的启动界面 渐隐渐现启动特效的 漂亮窗体共享源代码 软件启动载入效果

  • 2010-03-31 11:18
  • 100KB
  • 下载

实现右下角弹出渐隐渐现提示小窗口 附带 源码及效果图

package advancedJavaLearning; import java.awt.Toolkit; import java.awt.event.WindowAdapter; import j...
  • fuchengyong
  • fuchengyong
  • 2012-09-27 13:22
  • 762

jquery渐隐渐现鼠标提示效果

  • 2015-07-20 10:13
  • 22KB
  • 下载

开启动画效果——渐隐渐现效果

启动某项程序时我们往往都能看到不同的“开机动画”,千变万化的动画也只不过是四种基本动画衍变美化而成的。 四种android动画效果:alpha   渐变透明度动画效果               ...
  • duyuping
  • duyuping
  • 2013-11-04 14:52
  • 2080

Android自定义控件之实现listview滑动时渐隐渐现顶部栏

我在开发的时候遇到了这样的需求,就是在listview的滑动中,需要对顶部的栏目由透明慢慢的变为不透明的状态,就是以下的效果 最先开始的时候想的很简单,无非就是监听listview的滑动距离...
  • u014697083
  • u014697083
  • 2016-09-06 17:16
  • 1073

js鼠标经过,实现图片的渐隐渐现

*{padding: 0;margin: 0;} body{background-color: #d8d8d8;} #box{width:400px;height:320px;opacit...
  • Ag_wenbi
  • Ag_wenbi
  • 2016-10-13 18:12
  • 380

仿新浪微博发表渐隐渐现效果

  • 2011-06-27 17:26
  • 2KB
  • 下载

Div遮罩 Div居中 Div渐隐渐现

直接上代码 页面 * { margin:0px; padding:0px;} #cover{position:absolute;top:0;left:0;...
  • lockelk
  • lockelk
  • 2012-05-31 17:32
  • 590
    个人资料
    • 访问:1182327次
    • 积分:14583
    • 等级:
    • 排名:第953名
    • 原创:274篇
    • 转载:16篇
    • 译文:18篇
    • 评论:252条
    博客专栏
    我的微博 欢迎关注
    当前系统时间
      不要荒废时光、学习有乐趣
    休闲
    訪客來源