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

原创 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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

unity开发之原创开关小部件

一直在使用ngui做ui,不过发现尽然没有一个开关组件

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

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

FairyGUI学习摘录

素材管理 可以直接将图片(Gif)、声音(mp3)、动画、文字等素材从资源浏览器拖动到库中。 资源Url UIPackage.getItemURL(“包名“,“资源名”) AudioClip c...

初学FairyGUI,对比NGUI

粗略介绍了FairyGUI的背景与优缺点,介绍了在做界面时NGUI存在的问题

Android frambuffer 驱动的简要解析

frambuffer 的驱动的设备节点 /dev/fb0 /dev/graphics/fb0 代码路劲; include/linux/fb.h drives/video/fbmem.c

一个简单的开关按钮

扩展LinkButtonSkin类,让LinkButton变成一个开关按钮

其实flex里面的LinkButton有个toggle属性,把它设为true, 这个LinkButton就是一个开关按钮的。问题比较麻烦的是不仅要让这个LinkButton的行为,还要让它具有Link...

使用ToggleButton按钮实现开关效果

关于ToggleButton,有选中和未选中状态。在两种情况下还需要设置不同的文本内容。ToggleButton有以下几个属性: android:isChecked="true"; android...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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