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

??

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 19:41:38

UGUI 实现界面 渐隐渐现 FadeIn/Out 效果的相关文章

在Unity5中使用C#脚本实现UI的下滑、变色、渐隐渐现效果

一.首先,我们先创建一个Text    依次选择Component→UI→Text创建一个Text,创建完成后如下: 二.创建完成后,在Project面板点击Create→C# Script,本例命名为InAndFade 三.编写代码之前,为了确保能够调用到Text类,所以要先手动引入命名空间 using UnityEngine.UI; 四.完整代码如下 1 public class InAndFade : MonoBehaviour 2 { 3 //渐隐渐现 4 public bool Sho

前端模拟手机屏幕图片渐隐渐现效果实现

在网站上,我们经常会看到这样的效果,有一个IphoneX的手机屏幕,然后屏幕上会像真的一样,会出现各种动画效果,譬如图片的渐隐渐现.今天我们就尝试做一个这样的效果. HTML页面结构大概是这样子的: <main class="mobileBox"> <div class="imgBox"> <img src="./images/bg1.jpg" class="imgItem" srcset=&qu

实现渐隐渐现页面跳转

有时我们可能想要从一个页面跳转到另一个页面的过渡变得柔和些,也即是,点击链接后,当前页面渐隐,而后跳转渐显新页面的效果.可以使用jquery轻易实现. 效果: 页面1: <!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>页面1</title>    <script type="

基于JQuery的渐隐渐现轮播

/* <div id="ads"> <div> <ul> <li><a href="#" target="_blank"><img src="/Content/images/home_ads1.jpg" /></a></li> <li><a href="#" target="_blan

js学习总结----轮播图之渐隐渐现版

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-user-select:none; } ul,li{ list-style } im

css3 hover平滑过渡效果,鼠标经过元素,背景渐隐渐现效果

下面实例,演示,鼠标经过时,改变div宽度,平滑改变,带动画 div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { wid

做星星渐现的展示效果

//大概思路 //n行currency_mo_li_star,一行有十颗(最大值)星星,星星先设置透明度为0,每500毫秒为间隔显示下一个 //达到(最大值)十个,清掉计时器 var mm = 0; function set_time_out(){ if(mm < 10){ for (var j = 0; j < 10; j++) { $(".currency_mo_li_star").eq(j).children(".li_prize_star").e

JavaScript让网页出现渐隐渐显的背景颜色

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>渐隐渐显的背景颜色</title> <style fprolloverstyle>A:hover {color: #00FFFF} </style> </head> <body onLoa

QT窗口渐现效果,窗口震动效果,鼠标移动窗口

//窗口渐现效果void MainWindow::closeWindowAnimation() //关闭窗口效果 { QPropertyAnimation *animation = new QPropertyAnimation(this,"windowOpacity"); animation->setDuration(500); animation->setStartValue(1); animation->setEndValue(0); animation->