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物体

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()方法中实现逐帧渐变效果。

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

(0)

相关推荐

  • Unity实现简单换装系统

    关于Unity的换装,网上有几篇文章,我之前也简单的描述过实现.不过那个时候只是粗略的试验了下.今天好好梳理了下代码. 先上代码(自己的游戏项目,不是公司的,所以放心的贴上项目代码了,部分引用到其他的功能文件,但是核心代码无影响,这里主要看一下细节和思路) using UnityEngine; using System.Collections; using System.Collections.Generic; public enum AvatarPart { helmet, chest, sh

  • Unity3D 计时器的实现代码(三种写法总结)

    1.每帧检查 定义一个时间变量 timer,每帧将此时间减去帧间隔时间 Time.deltaTime,如果小于或者等于零,说明定时器到了,执行相应功能代码,将此定时器重置,代码如下: public float timer = 1.0f; // Update is called once per frame void Update() { timer -= Time.deltaTime; if (timer <= 0) { Debug.Log(string.Format("Timer1 is

  • unity实现鼠标经过时ui及物体的变色操作

    1.实现UI的变色 设置Highlighted Color为鼠标经过时变的颜色(Normal为常态,Pressed为按下时的颜色,Disabled为禁止的颜色) 2.通过代码实现物体的颜色改变 using System.Collections; using System.Collections.Generic; using UnityEngine; public class Cube_change : MonoBehaviour { private Color CubeColor; privat

  • 基于Unity Line Renderer组件的常用属性说明

    Line Renderer(线条渲染器) 这个组件可以在场景中渲染出"线",比如说:做出手枪瞄准敌人时有红外线的射击辅助线,可以用LineRenderer来完成 不过这个组件对新手还是有些不友好的,看到下面的属性就头大,不过掌握了基本用法之后就没什么难度了,下面讲解一下属性(我用的Unity是2018.3.8版) 首先看一下Positions属性这是画线的核心 俩点(或多个点)连一线,一个物体只能带有一个LineRenderer组件,一个LineRenderer组件只能渲染一条连续的线

  • Unity 从Resources中动态加载Sprite图片的操作

    我就废话不多说了,大家还是直接看代码吧~ public Sprite LoadSourceSprite(string relativePath) { //Debug.Log("relativePath=" + relativePath); //把资源加载到内存中 Object Preb = Resources.Load(relativePath, typeof(Sprite)); Sprite tmpsprite = null; try { tmpsprite = Instantiat

  • unity 鼠标悬停事件操作

    笔者在网上发现了,很多种方法 ,当然咱们找最好用的,也简单的 下面废话不多说直接上代码 我在啰嗦几句 第一这个脚本挂在需要相应的游戏体上 第二被挂游戏体必须带有collider, 第三仅仅制作完上面的两步 本应该没有问题, 笔者又发现一个问题 就是只有鼠标在物体的右上方才会很灵敏的相应到 在在左下方反而没什么反应 ,为此笔者在脚本上加上了一句 this.GetComponent<BoxCollider> ().size = new Vector3 (1.5f, 1.5f, 1.5f); 原来物

  • Unity实现换装系统

    Unity如何实现换装系统,供大家参考,具体内容如下 1.创建Sprite Library Asset 2.添加新目录 Label 可以理解为标签,在代码调用过程中使用,将该部位装备图片拖入Sprite中 3.添加组件 给需要换装的部位添加Sprite Resolver组件(如头部换装,就在头部对象挂载组件) 选择目录名,就会出现之前Library Asset中拖拽的图片内容,点击不同图片可以预览效果(如果出现装备位置偏移,需调整图片的pivot) 4.通过代码实现换装 小笔记: 1).Unit

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

    在有些需求中会遇到,当鼠标滑过某个UI物体上方时,为了提醒用户该物体是可以交互时,我们需要添加一个动效和提示音.这样可以提高产品的体验感. 解决方案 1.给需要有动画的物体制作相应的Animation动画.(相同动效可以使用同一动画复用) 2.给需要有动画的物体添加脚本.脚本如下: using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngi

  • JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

    多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&quo

  • 鼠标滑过缩略图时放大图片(纯Css)

    写着好玩的,并无技术含量,见笑了.没有使用到Js,纯Css控制的.弹出的图片不会把旁边的容器"挤"开. 测试通过IE7 Firefox2.11.(理论兼容IE6) www.jb51.net 我们 鼠标滑过缩略图时放大图片 本例旨在展示鼠标滑到缩略图上时,放大图片. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Jquery幻灯片特效代码分享--鼠标滑过按钮时切换(2)

    这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下 幻灯片效果描述:用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换. 自定义切换参数效果:向下切换.切换时间为8秒.鼠标滑过按钮时切换   运行效果截图如下: 具体代码如下 <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2

  • jquery实现鼠标滑过小图时显示大图的方法

    本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> </head> <style type="text/css&

  • JS鼠标滑过图片时切换图片实现思路

    在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t

  • 使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

    当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

  • 鼠标滑过出现预览的大图提示效果

    当鼠标滑过图片时,图片会出现预览的大图,大图下面还会有介绍文字. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片提示效果.aspx.cs" Inherits="图片提示效果" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&

  • js鼠标经过tab选项卡时实现切换延迟

    偶然间在浏览网页时,发现这样的效果.当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换. 个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要请求数据时,会避免不必要的异步请求:2.避免页面在用户不需要的时候切换跳动,影响用户体验. 网上查阅了几个方法,发现下面的方法更简洁有效.整理下来,供以后参考. 其中的重点是那段js代码:原理是,通过hover的时候设置定时器,延迟执行切换方法,离开时,清楚计时器.当hover的时间小于延迟时间时,

随机推荐