怎样实现一个潮流的开关按钮

原创 2015年11月21日 15:05:55

FairyGUI Editor是一个所见即所得的游戏UI编辑器,无需编写代码和编写任何配置文件,即可构建各种复杂的游戏界面,支持Unity,Egret(HTML5),Flash,Starling等多个常见游戏平台。
FairyGUI并没有提供大而全的组件库,也没有设计复杂的接口让程序员扩展,而是把发挥的空间留给了设计师。下面我们演示一下怎样制作一个现在移动设备上常用的开关按钮。

就是这货,截图自微信的设置界面


首先准备好需要的三张图片素材

2015-11-20_124800

第一张图是未选中时的背景,第二图是选中时的背景,第三种图就是中间的白色滑块。


从编辑菜单中选择“新建按钮”:


2015-11-20_125249


点击创建,得到一个初步的按钮。接着放置白色图片到舞台中,从效果视频可以看到,白色图片在按钮选中和不选中时的位置不相同,我们很容易想到“位置控制器”。设置白色图片的位置控制器如下:


2015-11-20_125540


这表示白色图片在按钮控制器不同页面下的位置不相同,勾选缓动表示我们希望有一个动态的变化过程。

接下来我们就可以调整白色图片的位置:up页面和over页面设置在同一个位置,down和selectedOver页面设置在同一个位置。


2015-11-20_125919

2015-11-20_125927


这样就做好了,直接在编辑器预览就可以看到效果了。


等等,好像还差点什么,是的,仔细观察视频,或者拿起手机微信看看,可以发现切换过程中绿色背景和灰色背景不是突然消失和出现的,有一个渐变的过程。虽然上面的效果用到游戏里已经足够了,我们不是要做APP是不?但动几下鼠标就能实现了我想你是不会拒绝的。我们为显示层次在上面的绿色图片设置外观控制器,如下:


2015-11-20_141055


然后切换button控制器到up和over页面,把绿色图片透明度设为0。再预览一下,看看是不是多了一个渐变的效果了^_^


本文例子下载:ButtonTest

初学FairyGUI,对比NGUI

粗略介绍了FairyGUI的背景与优缺点,介绍了在做界面时NGUI存在的问题
  • andyqingliu
  • andyqingliu
  • 2017年01月24日 10:53
  • 5018

Android frambuffer 驱动的简要解析

frambuffer 的驱动的设备节点 /dev/fb0 /dev/graphics/fb0 代码路劲; include/linux/fb.h drives/video/fbmem.c...
  • Baiduluckyboy
  • Baiduluckyboy
  • 2011年08月17日 10:30
  • 515

fairyGUI界面控件的基本制作和功能实现

fairyGUI界面控件的基本制作和功能实现 —1.学习地址:官网和泰课在线 fairyGUI官网: http://www.fairygui.com/tutorial 泰课在线: ...
  • u013354943
  • u013354943
  • 2017年12月25日 11:14
  • 108

【Unity 3D】学习笔记五:Toggle(开关按钮)

Unity 学习笔记五   学习资料:《Unity 3D游戏开发》 宣雨松   Toggle控件用来创建一个开关按钮,跟单选框一样。其返回值为bool类型。   例子      ...
  • u013289188
  • u013289188
  • 2014年06月04日 20:46
  • 5185

SwitchButton 开关按钮 的多种实现方式 (附源码DEMO)

刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心。 所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按钮效果。 起初我在android上我只...
  • vipzjyno1
  • vipzjyno1
  • 2014年04月15日 19:26
  • 102426

【Unity3D自学记录】Unity3D开发之原创开关小部件

一直在使用ngui做ui,不过发现尽然没有一个开关部件。开关应该算是比较常用的部件了,尽然没有,感觉有点小不科学,于是自己写了一个简单开关小部件。哎,现在还不会写插件,等自己功力长进了,就自己改ngu...
  • hackdjh
  • hackdjh
  • 2014年07月07日 11:51
  • 1117

FairyGUI

FairyGUI是一款专业的 UI编辑器 FairyGUI UI编辑器 操作简单,使用习惯与Adobe系列软件保持一致,美术设计师可以轻松上手。在编辑器即可组合各种复杂UI组件,以及为UI设计动...
  • anypkv
  • anypkv
  • 2016年09月02日 14:09
  • 6338

UGUI如何实现一个点击显示再点击隐藏

今天用UGUI做一个点击显示再点击隐藏,画面如下: 下面讲讲如何做: 1 首先设置一下屏幕的宽度和高度,以及屏幕自适应 2 Image下添加个Animator组件 3 选中Image...
  • qq_15267341
  • qq_15267341
  • 2016年08月19日 17:38
  • 2626

CSS3实现一个开关按钮控件

之前有写过自定义一个复选框的样式。 链接:http://blog.csdn.net/u014291497/article/details/52081774又做了一个左右滑动开关效果的复选框。效果图:...
  • u014291497
  • u014291497
  • 2016年09月06日 22:03
  • 3319

SwitchButton 开关按钮 的多种实现方式 (附源码DEMO)

刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心。 所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按钮效果。 起初我在android上我只...
  • vipzjyno1
  • vipzjyno1
  • 2014年04月15日 19:26
  • 102426
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:怎样实现一个潮流的开关按钮
举报原因:
原因补充:

(最多只允许输入30个字)