【NGUI】实现半圆形进度条，技能CD效果

半圆形进度条
首先将资源图片打进atlas图集，在场景上创建一个新的sprite。资源是一张半圆形的进度条，如下图。如果要实现进度条的效果，只需实现纵向的遮挡即可。通过UISPRITE的相关属性即可实现。

下面学习一下UISprite的相关属性：
Type:
Smple:除了显示内容从图集里面获取外，其他都和Texture一样的绘制
Sliced：这个模式支持九宫格拉伸，让四个角落的图片不变型，点击Sprite右侧的Edit按钮可以进行Sprite数据的编辑，设置Border的值即可。
Tiled：瓦片填充，会平铺进行填充
Filled：这个主要用来做技能CD、进度条等用。FillDir设置填充的模式（360度扇形，水平，垂直等），Fill Amount是填充百分比
Flip：对Sprite进行翻转：水平、垂直、水平+垂直

Fill Dir:表示填充的方向
Horizontal 从左到右
Vertical 从上到下减少的
Radial90 是以图片左下角的点为圆心增减，
Radial180 是以图片底边中点为圆心增减，
Radial360 是以图片的几何中心为圆心进行增减，

设置如下：

效果图：

代码如下：

using UnityEngine;
using System.Collections;public class UpdateProgressbar : MonoBehaviour {private UISprite _sprite;// Use this for initializationvoid Start () {_sprite = gameObject.GetComponentInChildren<UISprite>();if (_sprite == null){Debug.LogWarning("UpdateProgressbar _sprite == null!!!");}}// Update is called once per framevoid Update () {}void OnGUI(){if (GUI.Button(new Rect(50, 20, 100, 20), "Minus 10%")){if (_sprite != null){_sprite.fillAmount -= 0.1f;if (_sprite.fillAmount <= 0f){Debug.LogWarning("OnGUI _sprite.fillAmount:" + _sprite.fillAmount);_sprite.fillAmount = 1.0f;}}}}
}

技能CD
技能CD与进度条的不同之处在于，额外需要一个遮罩层，此外遮挡方式应当以图片的中心为圆心旋转。
实现过程：
首先创建GameObject

SkillIcon设置技能图片，挂载SkillCD.cs脚本

Mask设置UISprite的Type及Fill Dir

效果图：

代码：

using UnityEngine;
using System.Collections;public class SkillCD : MonoBehaviour
{private UISprite _skillMask;private int _skillCD = 10;          // cd为10秒private bool _bStart = false;// Use this for initializationvoid Start () {GameObject obj = gameObject.transform.Find("Mask").gameObject;if (obj != null){_skillMask = obj.GetComponent<UISprite>();}if (_skillMask == null){Debug.LogWarning("SkillCD _skillMask == null!!!");return;}      }// Update is called once per framevoid Update () {if (_skillMask == null){Debug.LogWarning("Update _skillMask == null!!!");return;}if (_skillMask.fillAmount == 0f){_bStart = false;return;}if (_bStart){//                       单位时间内更新量       单位时间_skillMask.fillAmount -= (1.0f / _skillCD) * Time.deltaTime;}}void OnGUI(){if (GUI.Button(new Rect(50, 50, 100, 20), "Start CD")){_bStart = true;_skillMask.fillAmount = 1.0f;}}
}

最后
测试工程添加了两个按钮用于触发测试。

参考文章：

Unity NGUI弧形血条的制作

【NGUI】实现半圆形进度条，技能CD效果相关推荐

进度条上的小圆点怎么做_Android自定义带圆点的半圆形进度条
本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效 ...
Adobe Edge Animate --异步条件加载框架（yepnop）：加载bootstrap之按钮、进度条、菜单效果
Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮.进度条.菜单效果版权声明: 原文地址: http://www.cnblogs.com/ado ...
uni-app中自定义图表（canvas实现chart图表）开发篇（5）-圆环进度条添加动画效果
这里增加一篇介绍下进度条动画效果如何添加,前几篇的进度值被修改后,切换效果比较生硬.另外也在第四篇基础上,对图形略作修改.在查看uniapp文档时,没有发现重绘执行函数,小程序中有Canvas.req ...
android 进度条自动增长,Android 进度条自动前进效果的实现代码
今天给大家分享进度条自动前进功能的实现,先给大家分享实现效果图,感觉不错可以参考实现代码. 效果如下图: 首先布局要设置进度条最大值: android:id="@+id/pro1" ...
麒麟子Cocos Creator实用技巧五：技能CD效果制作
今天带给大家的是一个关于技能CD的效果制作. 此效果不仅可以用于技能CD,一些按钮的CD也是可以用的. 为了照顾大家迫不及待(猴急)的心情,我写了一个DEMO给大家.DEMO上面做了5个英雄的技能和一 ...
怎么样装修好阿里巴巴国际站产品边框进度条环绕围绕效果动态gif制作代码全屏展示图片首页装修技巧方法教程视频全球旺铺阿里旺铺自定义内容装修模板模块设置内容
如何运营好阿里巴巴国际站店铺呢,首先先要让自己店铺美观起来,好比如自己门店一样.需要装修起来才有更有吸引力或者让用户停留在页面当中. 阿里巴巴国际站装修代码产品首页产品边框进度条环绕围绕移动效果首页动 ...
半圆形进度条(html)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
Java Swing 实现loading进度条加载效果
前言必读读者手册(必读)_云边的快乐猫的博客-CSDN博客前言: 这个可以用来做一些页面的加载进度条还是很不错的,起到美观的作用,一些代码内容也是根据别的大佬拿来修改完成.这是在id ...
Android开发之动态添加WebView实现进度条标题栏展示效果
老路子:看图说白了就是不用layout的xml写布局,直接用纯代码手写布局实现上面的效果:代码如下: 请将下面代码放到onCreate中动态加载布局即可 LinearLayout linearLay ...
ios弧形进度条_iOS如何实现环形进度条加载效果
绘制方法需要重写- (void)drawRect:(CGRect)rect,使用UIBezierPath绘制圆形动画路径,调用stroke进行绘制,如下: - (void)drawRect:(CGRe ...

【NGUI】实现半圆形进度条，技能CD效果

【NGUI】实现半圆形进度条，技能CD效果相关推荐

最新文章

热门文章