NGUI 鼠标停留UI上时缓慢显示子Item，当无停留超过一定时间后回到原地

最新推荐文章于 2019-02-20 13:40:33 发布

原创最新推荐文章于 2019-02-20 13:40:33 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ngui #触碰显示 #鼠标悬停

NGUI 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用NGUI实现鼠标悬停在UI按钮上时，其子项逐渐显示，并在鼠标离开一定时间后自动返回原位置的效果。内容包括代码实现和UI布局，提供了两个关键代码类：OnHoverTween.cs用于控制子项的回退和计时，以及用于判断鼠标是否停留的辅助类。

长话短说，代码很短（百行），开始效果如图：

当鼠标停留在蓝色的按钮上时，上面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);
		}
	}
}