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

admin

      在有些需求中会遇到，当鼠标滑过某个UI物体上方时，为了提醒用户该物体是可以交互时，我们需要添加一个动效和提示音。这样可以提高产品的体验感。
* i9 y  }) G' N一、解决方案
1、给需要有动画的物体制作相应的Animation动画。（相同动效可以使用同一动画复用）
6 M$ \8 B1 x! ?2、给需要有动画的物体添加脚本。脚本如下：
$ L+ {2 w" S7 Q/ t& K5 |

复制代码
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物体）
" F+ M+ k+ U/ H8 N8 X

• OnMouseEnter() 鼠标进入
• OnMouseExit() 鼠标离开
  ' f- G  i3 N4 f& f5 j

, e. u+ s0 b, ~9 w二、3D物体
* Y5 G0 S' b2 Y- c' w
       OnMouseEnter()，OnMouseExit()都是通过collider触发的，且碰撞器不能是trigger，鼠标进入，或离开collider时，自动调用这两个函数。
       另外，OnMouseOver()类似，与OnMouseEnter()区别是，OnMouseOver()会当鼠标在该物体上collider内时，每帧调用1次，OnMouseEnter()仅在鼠标进入时调用1次。
- K' D+ t( ?5 i" u3 q7 B8 s2 E' g二、UI
1 D6 T$ r) v3 I4 @  J       UI部分通过eventTrigger组件实现类似功能
6 R/ B5 k" g  x& x

复制代码
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()方法中实现逐帧渐变效果。
; s; S- b6 K5 |5 i
6 N" h7 @6 l' O1 C, d/ B