ssRender 运用绑定与事件实现均衡器效果

效果展示：

实现具体步骤：

第一：UI界面布局

BG：背景显示（Item实现）

Track1~6：滑块背景（Item实现）

tick1~6：上方彩色进度块（Item实现）

Button1~6：滑块（Button实现）

第二步：导入工程资源

在Resource窗口，Image标签，点击New Image，打开文件资源管理器，全部选择，点击打开，把Image资源全部导入。

第三步：Image加载至各个节点中

在Resource窗口，Image标签下，拖拽目标Image至目标Item的Properties窗口，在Preview窗口显示效果图

第四步：创建自定义属性

       工程需要创建12个自定义属性，用于控制滑块的Y坐标和彩色进度块的Opacity不透明度，自定义属性参数如下：

PropetyName	PropertyType	DefaultValue	MinValue	MaxValue
Move	Integer	252	0	65535
Move2	Integer	252	0	65535
Move3	Integer	252	0	65535
Move4	Integer	252	0	65535
Move5	Integer	252	0	65535
Move6	Integer	252	0	65535
v	Float	0.00	0.00	100.00
v1	Float	0.00	0.00	100.00
v2	Float	0.00	0.00	100.00
v3	Float	0.00	0.00	100.00
v4	Float	0.00	0.00	100.00
v5	Float	0.00	0.00	100.00
v6	Float	0.00	0.00	100.00

自定义属性拖拽至目标节点的位置对应表如下显示：

Project窗口节点	Properites窗口Customization
Button1	Move
	v
Button2	Move2
	v2
Button3	Move3
	v3
Button4	Move4
	v4
Button5	Move5
	v5
Button6	Move6
	vc6

以Button1为例，其他Button请参照Button1操作，如下图

第五步：属性的绑定

    以Button1—第一个滑块为例，其他Button步骤参照Button1即可。

①Project窗口选定Button1，Properties属性窗口，点击Y属性右侧的绑定按钮，弹出Bindgin界面

②在Binding界面，拖拽Customization下的自定义属性Move至Binding界面编辑器中，其他设置如下：

勾选Behavior，缓动效果

Duration：1000(ms)，缓动效果持续时间

EasingType：Easing inSine，缓动方式，目前支持30种，这里不一一罗列了

点击OK，完成滑块的Y属性与Move自定义属性的绑定。

③进行彩色进度块不透明度Opacity属性的绑定，Project窗口选定Button1，Properties窗口，点击Opacity属性右侧绑定按钮，弹出Binding界面，在Binding界面，设置如下：

在编辑器中输入：

var b ={$./Y}

(b==156):1

(b==252):0

 勾选Behavior

 Duration：300

 EasingType：Easing None

 点击OK，完成彩色进度块的不透明度与v自定义属性的绑定。

第六步：事件的触发

   以Button1—第一个滑块为例，其他Button步骤参照Button1即可。

①Project窗口，选定Button1，Interaction窗口，点击Events标签，事件的添加入口在添加，点击New Event，弹出Event界面

②在Event界面，Event事件选择Click，在OnEvnet编辑器中输入如下：

var a = {$./Y}  //从Properties窗口把Y属性拖拽至编辑器中

(a!=156)setProperty:{$./Move}=156

(a!=252)setProperty:{$./Move}=252

点击OK，完成添加事件的触发。

       看到这里就完成了所有属性的绑定与事件的添加，ssRender完成模拟均衡器的功能还是很简单的，工具界面风格简易，易操作，上手轻松，轻轻松松就可以完成你想要的效果。快来试试吧！