Unity3D中UGUI不使用DOTween制作渐隐渐现效果

Wesley13
• 阅读 1010

在做UI后期设计时,我们可能要对UI做一些特效,这篇文章我们来学习下如何在Unity3d中对实现渐隐渐现的效果,

首先我们看下Unity New UI即UGUI中渐隐渐现的做法.

观察我们会发现Unity4.6 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

如下所示:

1 public class Text : MaskableGraphic, ILayoutElement
2  
3 public abstract class MaskableGraphic : Graphic, IMaskable
4  
5 public class Image : MaskableGraphic, ICanvasRaycastFilter, ISerializationCallbackReceiver, ILayoutElement

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

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

开源源码如下:

 1 public void CrossFadeAlpha(float alpha, float duration, bool ignoreTimeScale)
 2 {
 3     CrossFadeColor(CreateColorFromAlpha(alpha), duration, ignoreTimeScale, true, false);
 4 }
 5  
 6 public void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha)
 7 {
 8     CrossFadeColor(targetColor, duration, ignoreTimeScale, useAlpha, true);
 9 }
10  
11 private void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha, bool useRGB)
12 {
13     if (canvasRenderer == null || (!useRGB && !useAlpha))
14         return;
15  
16     Color currentColor = canvasRenderer.GetColor();
17     if (currentColor.Equals(targetColor))
18         return;
19  
20     ColorTween.ColorTweenMode mode = (useRGB && useAlpha ? ColorTween.ColorTweenMode.All : (useRGB ? ColorTween.ColorTweenMode.RGB : ColorTween.ColorTweenMode.Alpha));
21  
22     var colorTween = new ColorTween {duration = duration, startColor = canvasRenderer.GetColor(), targetColor = targetColor};
23     colorTween.AddOnChangedCallback(canvasRenderer.SetColor);
24     colorTween.ignoreTimeScale = ignoreTimeScale;
25     colorTween.tweenMode = mode;
26     m_ColorTweenRunner.StartTween(colorTween);
27 }

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

下面是客户端调用代码

 1 {
 2  
 3     Component[] comps = GameObject.Find("/Canvas").GetComponentsInChildren<Component>();
 4     foreach (Component c in comps)
 5     {
 6         if (c is Graphic)
 7         {
 8             (c as Graphic).CrossFadeAlpha(0, 1, true);
 9         }
10     }
11 }

执行的效果就是所有Canvas下的元素都在1秒之类执行淡出效果!

---上面原文:Unity4.6 UI实现渐隐渐现(FadeIn FadeOut)效果---

以下是我在实际项目中结合协程制作的提示信息闪烁功能实现

 1   internal Coroutine noticeCor;
 2     internal void ShowNotice()
 3     {
 4         HideNotice();
 5         noticeCor = StartCoroutine(NoticeShowScale());
 6     }
 7 
 8     internal void HideNotice()
 9     {
10         if (null != noticeCor)
11         {
12             StopCoroutine(noticeCor);
13             noticeItme.gameObject.SetActive(false);
14         }
15     }
16 
17     IEnumerator NoticeShowScale()
18     {
19         noticeItem.gameObject.SetActive(true);
20         float targetA = 1;
21         noticeItem.GetComponent<CanvasRenderer>().SetAlpha(0);
22         float timer = 0;
23         while (timer<6f)
24         {
25             noticeItem.GetComponent<Graphic>().CrossFadeAlpha(targetA, 1, true);
26             yield return new WaitForSeconds(1f);
27             timer += 1f;
28             targetA = targetA == 0 ? 1 : 0;
29         }
30         noticeItem.gameObject.SetActive(false);
31         noticeCor = null;
32     }
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这