【FairyGUI & Unity】使用动效功能实现血条UI扣血与加血的缓动效果

原理

  • 血条使用进度条组件,可以得到当前值与最大值。
  • 通过动效-改变缩放可以让图片宽度从1到0按百分比变化。
  • 动效可以指定播放动效的时间范围

组件设计

创建一个进度条组件,作为血条。

  • bar是实际血量条
  • DownBar是扣血缓动背景图层
  • UpBar是加血缓动背景图层
  • LowBar是低血量变色(和控制器配合,本文不讲)
  • n11组合是血量参考线

发布到Unity。

参考代码

if (hpValue < hpBar.value) // HP降低
{
    hpBar.DownBar.SetScale((float) (hpBar.value / hpBar.max), 1); // 设置扣血层到当前血量位置
    hpBar.UpBar.visible = false;                                  // 加血图层优先于扣血图层,播放扣血动画前应把加血图层隐藏。
    hpBar.value = hpValue;                                        // 设置当前血量
    hpBar.DownBar.TweenScaleX(hpValue / (float) hpBar.max, 1);    // 扣血层缓动缩放到当前血量
}
else if (hpValue > hpBar.value) // HP增加
{
    hpBar.UpBar.SetScale(hpValue / (float) hpBar.max, 1); // 设置加血层缩放
    hpBar.UpBar.visible = true;                           // 显示加血层
    hpBar.TweenValue(hpValue, 1);                         // 播放血量动画
}

实现结果

原文地址:https://www.cnblogs.com/zonciu/p/9902125.html

时间: 2024-07-29 21:44:45

【FairyGUI & Unity】使用动效功能实现血条UI扣血与加血的缓动效果的相关文章

unity如何显示血条(不使用NGUI)

用unity本身自带的功能,如何显示血条? 显示血条,从资源最小化的角度,只要把一个像素的色点放大成一个矩形就足够,三个不同颜色的矩形,分别显示前景色,背景色,填充色,这样会消耗最少的显存资源. unity 有GUITexture,可以用来显示色块.但GUITexture有个问题是,每个GUITexture都会消耗一个drawcall,如果画面上就数百个单位,就会消耗数百个drawcall,drawcall是昂贵的资源,一个手游也就只能允许200个左右的drawcall,显然这个方案只能用来做d

我们为什么需要动效设计

随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域. 但是说到底,我们到底为什么需要动效设计?或者说我们到底需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计. (文中部分案例为设计师个人作品,部分为线上产品,都是我非常非常欣赏的作品.如不慎冒犯请戳我替换掉) 一.加强体验舒适度 嗯,就是让用户更加爽更加爽的用你的产品. 具体表现在

iOS 停止不必要的UI动效设计

http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. UI动效设计的反面案例(线上Demo) 注:这个反面案例并非假设,而是来自近期的真实客户案例. 概述 自从 70.80 年代首个光栅图像在CRT屏幕出现以来,人们对于(数字)视觉设计的态度一直在不断进化.与其他艺术领域不同

动效-APP设计的肢体语言

引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言. 在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感?此时,有限的屏幕空间紧靠文字的提示是不够的,App需要更多的新鲜血液--"动效设计".动效设计可以拓展空间内容,简化引导流程,降低学习成本,更重要的是给用户带来意想不到--类似于"Cool"的惊喜,它就像人类

动效设计原理:从卡通动画到UI动效

概要 UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题. 尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具.但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合. Keywords UI.动画效果

UI动效设计从入门到项目实战 高清无密 百度云盘

高薪设计师必修课 AE移动UI动效设计从入门到实战 如今诸多企业已经意识到动效在产品用户体验中的重要性,单纯的满足功能性的设计已经out了,动效设计已然成为未来UI设计师必备的能力!本课程采用基础理论与实战案例相结合的教学方式,手把手带你学习炫酷的动效设计! 第1章 课程简介 介绍该课程的学习内容,以及课程内的案例效果展示 1-1 课程介绍 第2章 动效基础知识学习 动效基础操作知识点梳理,快速掌握AE面板等基础操作知识要点,了解动效实现基本原理. 2-1 AE软件界面初识 2-2 菜单栏讲解

iOS开发Facebook POP动效库使用教程

如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能搞定酷炫的动效. 步骤1: 安装 使用CocoaPods安装POP,只需要在Podfile中加入这么一行: pod 'pop', '~> 1.0' 或者如果想要手动添加,那么参考POP Github中的描述: 除此之外,你还可以将工程添加到工作区里面,然后采用提供的配制文件.或者手动复制POP子目录

Facebook POP动效库使用教程

编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能搞定酷炫的动效. 步骤1: 安装 使用CocoaPods安装POP,只需要在Podfile中加入这么一行: pod 'pop', '~> 1.0' 或者如果想要手动添加,那么参考POP Github中的描述:

UI的基本动效--1

内容来自Meaningful Transitions,很早就出名的动效站,里面提供了一些最常见最基本的动效模式,仔细观察我们手机中的动效,很多无非是多种基本动效的结合,因此研究这些基础动效很有价值.但是却一直没有译文,这里给大家带来指向性动效的上半部分,同时会配上案例,让大家更好地理解.  (一)指向性动效 一.前言: 指向性动效能够有效的描述物体之间的逻辑关系 同时通过视觉效果,可视化的描述物体当前运动状态. 通常,指向性动效能够让用户清晰的感受到物体与物体的位置关系,以及信息的层级架构. 二