NGUI 鼠标停留UI上时缓慢显示子Item,当无停留超过一定时间后回到原地
2014-04-10 18:06
393 查看
长话短说,代码很短(百行),开始效果如图:
当鼠标停留在蓝色的按钮上时,上面NGUI的几个Item缓慢出现,当鼠标离开一段时间后且没有继续停留在按钮和Item上的时候,自动缓慢回到原位。如下图:
UI的摆放如下图:
下面是 代码类1,OnHoverTween.cs 挂在蓝色按钮上,主要控制 Item 返回原位和计时。
代码类2,主要判断是否停留在按钮盒 Item 上,挂在蓝色按钮和 所有 Item 上。每个按钮盒 Item 的 State 用来区别不同的 Item 。
当鼠标停留在蓝色的按钮上时,上面NGUI的几个Item缓慢出现,当鼠标离开一段时间后且没有继续停留在按钮和Item上的时候,自动缓慢回到原位。如下图:
UI的摆放如下图:
下面是 代码类1,OnHoverTween.cs 挂在蓝色按钮上,主要控制 Item 返回原位和计时。
using UnityEngine; using System.Collections; public class OnHoverTween : MonoBehaviour { public GameObject target; // 初始位置和显示位置和前面的类一致 public Vector3 posStart; public Vector3 posDisplay; // Use this for initialization void Start () {} // Update is called once per frame void Update() { if(!Globe.IsHovered) { if(Globe.isRun) { Globe.RunTime -= Time.deltaTime; if(Globe.RunTime <= 0) { GoBack(); } } } else { Globe.RunTime = 3.0f; } } void GoBack() { // 停止计时 Globe.isRun = false; if(Globe.playForm) { Globe.playTo = true; Globe.playForm = false; TweenPosition position = TweenPosition.Begin(target, 0.75f, posStart); } } }
//代码类3, 全局变量。
using System.Collections.Generic; using UnityEngine; public class Globe { // Used in OnHoverDisplay Class public static float RunTime = 3.0f; public static bool IsHovered = false; public static bool isRun = false; public static bool playTo = true; public static bool playForm = false; }
代码类2,主要判断是否停留在按钮盒 Item 上,挂在蓝色按钮和 所有 Item 上。每个按钮盒 Item 的 State 用来区别不同的 Item 。
//Target 的对象为 Item 的父节点。开始位置和结束位置,手动设置
using UnityEngine; using System.Collections; public enum OnhoverButtonState { PlayAnimation, Ce, Le, Se, Ie, Re } public class OnHoverDisplay : MonoBehaviour { public OnhoverButtonState state; public GameObject target; // 初始位置和显示位置 public Vector3 posStart; public Vector3 posDisplay; // Use this for initialization void Start(){} // Update is called once per frame void Update(){} void OnClick() { if(enabled) { // 根据不同的按钮,选择不同的点击事件 if(state == OnhoverButtonState.Se) { // 这里写上你要点击按钮后想要做的事情 //DoSomeThing(); } } } void OnHover(bool isOver) { if(enabled) { if(isOver) { // 告诉 Update 函数,触发了停留事件 Globe.IsHovered = true; GoDisplay(); } else { Globe.IsHovered = false; // 通知可以开始计时 Globe.isRun = true; } } } // 控制按钮面板出现 void GoDisplay() { if(Globe.playTo) { Globe.playTo = false; Globe.playForm = true; TweenPosition position = TweenPosition.Begin(target, 0.75f, posDisplay); } } }
相关文章推荐
- 鼠标悬浮一定时间后显示信息
- TrackMouseEvent函数在鼠标离开某一窗口或在某一窗口上停留超过某一特定时间长度时发送消息(转)
- 在一个表格里,超过一定宽度字符串进行截取显示点点,鼠标移上去显示全
- javascript显示用户停留时间的简单实例
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- Jquery 鼠标停留时间满足特定时长后再执行事件
- 计算鼠标停留在标签上的时间
- span 超过一定的长度显示...
- Unity3D插件之NGUI-确保鼠标点击UI时不响应其他事件
- NGUI动画/UI解决刷新显示错误的问题
- remedy定期删除超过一定时间的流转垃圾数据
- 利用JavaScript实现在浏览器状态栏显示停留时间
- Flex3+ArcGIS+API改变鼠标停留在导航条时显示的提示信息
- 回到顶部,当页面下拉到一定高度时,就会出现回到顶部的按钮,点击回到顶部之后,会有一个速度的变化回滚到顶部,如果正在回到顶部时,鼠标的滚轮转动了就会停止回到顶部
- ToolTip的使用 winfrom中显示并延迟一定时间消失
- (转)Unity3D NGUI在UI上显示3D模型
- 使用纯CSS实现文字超过一定的长度后自动显示省略号
- PHP超过一定长度显示省略号[转]
- 【Unity3D】【NGUI】3.0+版本,粒子在UI后面显示
- listview下拉到一定位置显示回到顶部按钮