软件编程
位置:首页>> 软件编程>> C#编程>> Unity 实现鼠标滑过UI时触发动画的操作

Unity 实现鼠标滑过UI时触发动画的操作

作者:爱尚游Bin  发布时间:2021-05-31 19:24:18 

标签:Unity,鼠标,UI,动画

在有些需求中会遇到,当鼠标滑过某个UI物体上方时,为了提醒用户该物体是可以交互时,我们需要添加一个动效和提示音。这样可以提高产品的体验感。

解决方案

1、给需要有动画的物体制作相应的Animation动画。(相同动效可以使用同一动画复用)

2、给需要有动画的物体添加脚本。脚本如下:


using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class OnBtnEnter : MonoBehaviour, IPointerEnterHandler,IPointerExitHandler
{
   //鼠标进入按钮触发音效和动画
   public void OnPointerEnter(PointerEventData eventData)
   {
     //  AudioManager.audioManager.PlayEnterAudio();//这里可以将播放触发提示音放在这里,没有可以提示音可以将该行注释掉
       if (gameObject.GetComponent<Animation>()!=null) {
           if ( gameObject.GetComponent<Animation>() .isPlaying) {
               return;
           }
           gameObject.GetComponent<Animation>().wrapMode = WrapMode.Loop;
           gameObject.GetComponent<Animation>().Play();
       }
   }
//鼠标离开时关闭动画
   public void OnPointerExit(PointerEventData eventData)
   {
       if ( gameObject.GetComponent<Animation>() != null )
       {
           if ( gameObject.GetComponent<Animation>().isPlaying )
           {
               gameObject.GetComponent<Animation>().wrapMode = WrapMode.Once;
               return;              
           }
           gameObject.GetComponent<Animation>().Stop();
       }
   }
}

补充:unity 通过OnMouseEnter(),OnMouseExit()实现鼠标悬停时各种效果(UI+3D物体)

OnMouseEnter() 鼠标进入

OnMouseExit() 鼠标离开

一、3D物体

Unity 实现鼠标滑过UI时触发动画的操作

OnMouseEnter(),OnMouseExit()都是通过collider触发的,且碰撞器不能是trigger,鼠标进入,或离开collider时,自动调用这两个函数。

另外,OnMouseOver()类似,与OnMouseEnter()区别是,OnMouseOver()会当鼠标在该物体上collider内时,每帧调用1次,OnMouseEnter()仅在鼠标进入时调用1次。

二、UI

UI部分通过eventTrigger组件实现类似功能


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//使用text,image组件
public class eventTriggrtTest : MonoBehaviour {
   public Image image;
   float ColorAlpha = 0f;//图片透明程度
   public float speed = 0.75f;

bool flag = false;
   private void Start()
   {
       image.GetComponent<Image>().color = new Color(255, 255, 255, ColorAlpha);
   }
   void Update()
   {
   //    Debug.Log("OnMouseEnter");
       if(flag == true)
       {
           if (ColorAlpha <= 0.75)
           {
               ColorAlpha += Time.deltaTime * speed;
               image.GetComponent<Image>().color = new Color(255, 255, 255, ColorAlpha);
           }

}
          Debug.Log(ColorAlpha);
   }
   public void OnMouseEnter()
   {
       flag = true;
   }
   public void OnMouseExit()
   {
       //    Debug.Log("OnMouseExit");
       flag = false;
           ColorAlpha = 0;
           image.GetComponent<Image>().color = new Color(255, 255, 255, ColorAlpha);      
   }    
}

因UI无法使用OnMouseOver(),所以想实现渐变效果,可通过添加一个bool flag判断,在update()方法中实现逐帧渐变效果。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。如有错误或未考虑完全的地方,望不吝赐教。

来源:https://blog.csdn.net/wks310/article/details/86573251

0
投稿

猜你喜欢

手机版 软件编程 asp之家 www.aspxhome.com