十、按钮,Button

1、按钮的核心作用:

  • 按钮能够接收单击并触发响应事件
  • 按钮单击时能同时触发多个响应事件
  • 按钮可以有普通、悬停、单击、禁用等多个状态的不同表现
  • 广泛的说,按钮的核心在于接收事件

2、创建按钮:

  1. 创建一个sprite,这个sprite将会是按钮的外形
  2. 选中这个sprite,然后为其添加Boxcollier,附加ButtonScript
  3. 在Sprite的子节点上添加Laber,用来显示按钮的内容

【注意】:Laber的深度要高于这个按钮的深度

小提示:创建出来的Sprite记得单击Snap,让他回归到原尺寸大小,然后再去进行调整。

3、参数解释:

(1)、Tween Target:动画目标, 默认就是按钮自己

(2)、DragOver:拖动结束事件

(3)、Transition:过渡时间

(4)、Color:颜色模块

(5)、Sprites:精灵设置模块

(6)、OnClick:按钮响应单击事件

4、制作按钮的放缩动画;当我们单击按钮时,按钮会有一个放缩动画

(1)、在按钮上添加ButtonScale脚本

  • TweenTarget:控制的动画作用的目标
  • Hover:当鼠标划过的时候,按钮控件的大小变化
  • Pressed;当按钮按下的时候,按钮控件的大小变化
  • Duration:完成缩放动画的时间

注意:ButtonScale只适用于为按钮制作动画

5、制作按钮的偏移动画:

在按钮上添加ButtonOffset

  • Hover:按钮在鼠标滑过的时候的位置偏移
  • Pressed:按钮在按下的位置偏移
  • Duration;持续时间

6、制作按钮的旋转动画

在按钮上添加ButtonRotation

7、添加按钮单击音效

在按钮上添加PlaySound

AudioClip:音效的源文件

Trigger:触发模式

Volume:声音大小

Pitch;音调

NGUI_Button的更多相关文章

随机推荐

  1. JAVA 通过 Socket 实现 TCP 编程

    简介 TCP简介 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793定义.在简化的计算机 ...

  2. CDN 机制

    CDN的全称Content Delivery Network,(缩写:CDN)即内容分发网络. CDN是一个经策略性部署的整体系统,从技术上全面解决由于网络带宽小.用户访问量大.网点分布不均而产生的用 ...

  3. android版火狐调试器

    Remotely debugging Firefox for Android 使用火狐开发工具可以在桌面上进行远程代码的调试(FF26以上) 具体使用参考: https://developer.moz ...

  4. Minix3信号处理分析

    进程的信号处理的相关结构 PM中存放着所有进程的进程描述符,在一个进程描述符中,有一个指针,指向一个sigaction结构二维数组中的一项,表示这个进程所有信号的操作.一个sigaction结构包含信 ...

  5. [转载] 解读ClassLoader

    转载自http://www.iteye.com/topic/83978 ClassLoader一个经常出现又让很多人望而却步的词,本文将试图以最浅显易懂的方式来讲解 ClassLoader,希望能对不 ...

  6. 使用AspectCore动态代理

    前言 最近越来越多的同学关注到AspectCore,并且提出不少中肯的建议,其中最多的提议是希望能够看到更多的关于AspectCore使用方式的文章和Demo.那么在这篇文章里,我们就来聊聊Aspec ...

  7. h5 canvas 图片上传操作

    最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化 html: <pre name="c ...

  8. Linux笔记(固定USB摄像头硬件端口,绑定前后置摄像头)

    在Android的系统会有前置摄像头和后置摄像头的定义,摄像头分为SOC类型的摄像头和USB这一类的摄像头,接下要分析就是USB摄像头这一类 . 一般在android或者linux系统中分析一个模块, ...

  9. WebWorker实战使用

    总体来说webworker解决了阻塞主线程问题,但是还没解决高性能计算的问题 WebWorker整体介绍 https://developer.mozilla.org/zh-CN/docs/Web/AP ...

  10. CSS实现模糊效果

    HTML代码如下: <body> <h1>body设置了模糊效果</h1> <div id="aa"></div> &l ...