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物体
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()方法中实现逐帧渐变效果。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。如有错误或未考虑完全的地方,望不吝赐教。
下一篇: 逗B把生活过的真好笑!