Unity 實現鼠標滑過UI時觸發動畫的操作

Posted on by

在有些需求中會遇到，當鼠標滑過某個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物體

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()方法中實現逐幀漸變效果。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。如有錯誤或未考慮完全的地方，望不吝賜教。

推薦閱讀：

    None Found