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
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
UGUI 实现界面 渐隐渐现 FadeIn/Out 效果的更多相关文章
- Unity3D中UGUI不使用DOTween制作渐隐渐现效果
在做UI后期设计时,我们可能要对UI做一些特效,这篇文章我们来学习下如何在Unity3d中对实现渐隐渐现的效果, 首先我们看下Unity New UI即UGUI中渐隐渐现的做法. 观察我们会发现Uni ...
- 基于JQuery的渐隐渐现轮播
<div id="ads"> <div> <!--轮播图片--> <ul> <li><a href="# ...
- WPF 渐隐渐现切换背景图片
最近学习WPF,尝试着自己做一些小玩意,也遇到了一些问题,于是整理记录以便日后查阅. 我们都知道WPF可以实现一些很炫的效果,然而有时候为达到这个目的却并不是一件很容易的事情.比如:在软件中我希望能够 ...
- js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
- 在Unity5中使用C#脚本实现UI的下滑、变色、渐隐渐现效果
一.首先,我们先创建一个Text 依次选择Component→UI→Text创建一个Text,创建完成后如下: 二.创建完成后,在Project面板点击Create→C# Script,本例命名 ...
- part10 header界面渐隐渐显 //动态路由//项目动画
两个组件只同时显示一个 可以用 a v-show='variable' b: v-show='!variable' 1.对全局事件的解绑 //代码容易出现大量bug 因为影响其他组件 keep-al ...
- UGUI DOTween渐隐渐现
Tween tweenAlpha; tweenAlpha = DOTween.To(() => MaskSpr.fillAmount, x => MaskSpr.fillAmount = ...
- [css3动画]渐隐渐现
测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
随机推荐
- JavaScript ES6部分语法
ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势,而且vue组件开 ...
- js的变量的有效域
function test(o) { var i=0; if(typeof o=="object") { var j=1; for(var k=0;k<10;k++) { c ...
- Spring源码 之环境搭建
1.安装gitHub 在官网https://desktop.github.com/下载githubsetup.exe,在线安装总是出错,试了几次后不成功就放弃了.不知道是不是网络的原因. 后来在网上找 ...
- python 多进程并发与多线程并发
本文对python支持的几种并发方式进行简单的总结. Python支持的并发分为多线程并发与多进程并发(异步IO本文不涉及).概念上来说,多进程并发即运行多个独立的程序,优势在于并发处理的任务都由操作 ...
- php split 和 explode 的区别
php split 和 explode 的区别 split (PHP 3, PHP 4 ) split -- 用正则表达式将字符串分割到数组中 说明 array split ...
- CF 816B Karen and Coffee【前缀和/差分】
To stay woke and attentive during classes, Karen needs some coffee! Karen, a coffee aficionado, want ...
- 学习LSM(Linux security module)之一:解读yama
最近打算写一个基于LSM的安全模块,发现国内现有的资料极少.因此打算自己琢磨一下.大致的学习路线如下: 由易至难使用并阅读两到三个安全模块->参照阅读模块自己实现一个安全模块->在自己实现 ...
- CodeChef - UASEQ Chef and sequence
Read problems statements in Mandarin Chinese and Russian. You are given an array that consists of n ...
- [CF983D]Arkady and Rectangles
题意:按顺序在坐标轴上画$n$个颜色为$1\cdots n$的矩形(数字大的颜色覆盖数字小的颜色),问最后能看到多少种颜色 先离散化,然后考虑扫描线+线段树 线段树每个节点用一个set存覆盖整个区间的 ...
- 【差分约束系统】【spfa】UVALive - 4885 - Task
差分约束系统讲解看这里:http://blog.csdn.net/xuezhongfenfei/article/details/8685313 模板题,不多说.要注意的一点是!!!对于带有within ...