使用CanvasGroup实现渐隐渐显效果

最新推荐文章于 2023-12-04 14:17:00 发布
最新推荐文章于 2023-12-04 14:17:00 发布
阅读量4.8k 收藏 2
点赞数
分类专栏： unity3d UGUI 文章标签： unity UGUI
在为image 添加组件的时候我们发现一个 Canvas Group 的组件
添加了这个组件，我们发现几个值
Alpha ：该组 UI 元素的透明度 .  这里的 alpha 值与 color.a 是对应的，即意味着我们改变这个值的同时就改变了该图片的透明度，它的区间是 0-1. 0 为 alpha 为 0,1 为 alpha 为 255.
我们可以看到这个alpha 值是一个 float ，可以直接赋值，这样就方便很多 .
有一点需要注意的是，初始时color.a 需要设置为255，否则会与canvasgroup里的alpha值冲突.
这是渐显效果，渐隐的话讲+=改为-=就可以了.


Interactable ：是否需要交互 ( 勾选则可交互 ) ，同时作用于该组全部 UI 元素
Blcok Raycasts ：如果需要图形射线 (GraphicRaycaster) 检测。勾选后，可将此组件作为一个射线碰撞盒。注意，不适用于 Physics.Raycast 。

Ignore Parent Groups：是否需要忽略父级对象中的CanvasGroup的设置。(勾选则忽略)


原文链接：http://www.vr910.com/forum.php?mod=viewthread&tid=5531

崔小妹儿Jessica
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas相关（渐变、阴影、path）
后大学时代学习笔记
08-24 1万+
1、setShader Paint对象的setShader函数，我的感觉是设置一种方式来填充图形。 可以设置为渐变，代码如下： Paint paint=new Paint(); //定义一个Paint Shader mShader = new LinearGradie
Unity实现UI渐隐渐显效果
08-19
Unity 实现 UI 渐隐渐显效果需要添加 CanvasGroup 组件和 UI_FadeInFadeOut 脚本，并使用 UI_FadeIn_Event 和 UI_FadeOut_Event 事件来控制 UI 对象的渐隐渐显效果。通过这种方式，可以实现 UI 对象的逐渐显隐和交互...
unity如何实现canvas渐隐效果
qq_20179331的博客
05-10 428
unity如何实现canvas渐隐效果。
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
朝阳39的博客
04-24 1707
渐变 线性渐变 在一条直线上进行渐变 调用createLinearGradient()方法创建一个linearGradient对象 var gnt = cxt.createLinearGradient(x1, y1, x2, y2); x1、y1表示渐变色开始点的坐标 x2、y2表示渐变色结束点的坐标 添加渐变（开始） gnt.addColorStop(value1,color1); value1 渐变开始的位置，取值 0~1 color1 渐变开始的颜色 添加渐变（结.
canvas渐隐
iarebleieve的博客
07-05 518
使用globalCompositeOperation的destination-in做canvas的全局渐隐
日落20181125001 - UGUI组件应用之Animation和CanvasGroup制作渐现渐隐效果
海盐布丁的表述形式
11-25 1932
环境 系统：Windows 10 引擎：Unity 2017.2.1f1 目的 使用Animation和Canvas Group制作渐隐渐现的效果。 （1）首先把场景布局如此 （2）创建Animator Controller和Animation （3）然后场景中的空对象root设置如下，加入Animator和Canvas Group。另外，为了之后的渐现动画，先把Alpha值设置为0。...
android view实现一张图片的渐隐效果
08-27
最后，使用更新后的像素数组创建一个新的Bitmap，并在`canvas` 上绘制这个新Bitmap，实现渐隐效果。 在`SimpleFlash` 类中，还有一个`Handler` 对象，它用于控制渐隐动画的时间间隔。`handleMessage()` 方法会在...
Android自定义View绘图实现渐隐动画
09-01
本篇将深入探讨如何使用自定义View来实现一个渐隐动画效果，特别是一种在用户画线时，线条随着绘制逐渐变淡直至消失的效果。 首先，我们要创建一个自定义的View类，这里命名为`DisappearingDoodleView`，继承自`...
使用js和canvas实现时钟效果
11-19
使用js和canvas写一个时钟，供大家参考，具体内容如下 <!DOCTYPE html>` <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
【unity3D】Canvas Group组件（图文版）
zhurouwanzi的博客
02-27 4096
画布组 (Canvas Group) 可集中控制整组 UI 元素的某些方面，无需单独处理每个元素。（画布组的属性会影响所在的游戏对象以及所有子对象）
Unity 渐隐渐现
02-28
使用委托，对游戏对象进行渐隐渐现，改变游戏对象的Color值
HTML5 Canvas简单淡入淡出游戏启动界面
08-06
NULL 博文链接：https://128kj.iteye.com/blog/2076185
Unity——CanvasGroup组件
最新发布
weixin_48614856的博客
12-04 334
一种可放置 Canvas 的元素，可用于修改子 Alpha、Raycasting、Enabled 状态。画布组可用于修改子元素的状态。随时间推移逐渐消失的窗口就是这样的一个示例。通过修改该组的 Alpha 值，将对子元素产生影响。最终的 Alpha 将是任何嵌套的组与画布元素的 Alpha 相乘的结果。也可以将画布组配置为不阻止射线投射（在计算图形射线投射时，将忽略该组中的所有内容），以及元素是否可交互。
Unity中CanvasGroup组件
热门推荐
qq_38721111的博客
04-10 1万+
介绍： Canvas Group可以影响该组UI元素的部分性质，而不需要费力的对该组UI下的每个元素进行逐一得得调整。Canvas Group是同时作用于该组件UI下的全部元素。 参数： Alpha : 该组UI元素的透明度。注：每个UI最终的透明度是由此值和自身的alpha数值相乘得到。 Interactable : 是否需要交互（勾选的则是可交互），同时作用于该组全部UI元素。 ...
Unity CanvasGroup组件
明明明的博客
08-03 642
Unity CanvasGroup组件
Unity Canvs group的用法介绍/批量管理UI
haihao1881的博客
10-09 346
控制画布的交互性：通过设置 Canvas Group 组件的 Interactable 属性，可以控制画布是否可交互。将 Canvas Group 组件添加到画布上：在 Unity 编辑器中，选中画布对象，然后点击菜单栏的 Component -> UI -> Canvas Group，即可在画布上添加 Canvas Group 组件。控制画布的透明度：通过设置 Canvas Group 组件的 Alpha 属性，可以控制画布的透明度。将画布的交互性设置为 false。将画布的透明度设置为 0.5。
Unity CanvasGroup
中灰灰的博客
10-26 926
文章目录前言一、CanvasGroup是什么？二、使用步骤1.添加组件2.代码控制显示隐藏总结 前言 偶然在博客上看到的unity ugui的界面管理组件.看博客介绍性能跟SetActive(true)/(false)差别不大,但这个可以在控制显示/隐藏上有点独到的地方,淡入淡出,那些的 一、CanvasGroup是什么？ 可以控制Ugui Panel的显示隐藏,也可以通过这个组件控制Panel下所有的ui的反应,不如Button那些.如果想禁掉一个界面,但上面的ui显示出来,就可以用这个CanvasGr
Unity3d中UGUI组件精简复盘（二）Canvas及其相关组件
qq_1628941121的博客
06-09 3139
Canvas组件 canvas的三种渲染模式 所有的UI元素只有在Canvas下才能够正常显示 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYp0n4he-1622920236081)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210529205615721.png)] Screen Space - Overlay：UI元素始终在3D物体之上的 [外链图片转存失败,源站
Canvas Group是Unity中的应用
qq_20179331的博客
05-10 365
Canvas Group是Unity中的一个组件，用于控制Canvas及其子对象的可见性、不透明度、交互性等属性。Canvas Group可以与UI元素一起使用，以便在运行时动态控制它们的属性。
使用canvas实现卡片展开效果
06-12
要实现卡片展开效果，可以使用canvas绘制卡片的背景和内容，并通过动画实现展开效果。以下是一个简单的实现步骤： 1. 创建一个canvas元素，并设置宽度和高度。 2. 绘制卡片的背景和内容，可以使用canvas提供的绘制图形和文本的API。 3. 添加点击事件，当用户点击卡片时，启动动画。 4. 在动画中，通过改变卡片的宽度和高度，实现卡片展开的效果。 以下是一个简单的示例代码： HTML部分： ``` <canvas id="card" width="300" height="200"></canvas> ``` JavaScript部分： ``` // 获取canvas元素 var canvas = document.getElementById('card'); // 获取绘制上下文 var ctx = canvas.getContext('2d'); // 绘制卡片背景和内容 // ... // 添加点击事件 canvas.addEventListener('click', function() { // 启动动画 var width = canvas.width; var height = canvas.height; var step = 10; var interval = setInterval(function() { if (width < 500) { width += step; canvas.width = width; } else { clearInterval(interval); } }, 10); }); ``` 需要注意的是，该示例只是一个简单的实现，实际应用中可能需要更复杂的动画效果和交互逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值