欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-13 08:07:47
在有些需求中会遇到,当鼠标滑过某个ui物体上方时,为了提醒用户该物体是可以交互时,我们需要添加一个动效和提示音。这样可以提高产品的体验感。解决方案1、给需要有动画的物*作相应的animation动画...

在有些需求中会遇到,当鼠标滑过某个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()方法中实现逐帧渐变效果。

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