ssRender之运用绑定和事件实现菜单切换

效果如下：

 

首先介绍绑定和事件表达式

一、绑定Binding

        我们会经常遇到让节点的属性跟随其他节点属性的值一起变化，此时我们可以使用ssRender里的绑定实现。

        通过绑定，我们可以实现根据其他节点的属性值来更新另一个节点的属性值。绑定能够让在其他节点属性改变或者外部事件发生时，自动来更新属性值。

        ※使用绑定注意以下几点

        1、只有绑定到相同的属性类型才是有效的。

        例如，你只能将整型属性绑定整型属性上，浮点型属性绑定浮点型属性上等等。

        2、绑定只会计算绑定表达式的最终值，可以是一个固定值或者变量。

        3、绑定支持的运算符如下表

        

运算符	描述
+	连接符/加法运算符，连接字符或做加法运算
-	减法运算符，做减法运算
*	乘法运算符，做乘法运算
/	除法运算符，做除法运算
%	取余，做取余运算，一个数除以另一个数，商到个位，取最后的余数
=	赋值
&&	逻辑与，同真为真，否则假
||	逻辑或，同假为假，否则为真
>	关系运算符 大于
<	关系运算符 小于
==	关系运算符 等于

 

二、事件Event

        通过操作节点来触发事件，如效果图：点击实现菜单的切换。

        ❀支持的事件：

        click：点击事件

        press：按下事件

        release：抬起事件

        MovingBegin：移动开始

        MovingEnd：移动结束

        注：MoveBegin和MovingEnd仅在View节点实现

        ❀使用事件的关键字：

        setProperty:设置属性值

        writeLog:输出日志

        goState:状态跳转

三、菜单切换实现用到的表达式

        1.MainMenu与自定义属性Menuchange绑定，勾选Behavior，设置Duration和EasingType，实现菜单切换时动画效果。

         2.其他四个菜单同Menu操作，分别绑定Menuchange2、Menuchange3、Menuchange4、Menuchange5。

         3.接下来通过Button添加Click事件，如下图

         按钮的Click事件触发setProperty，让绑定的自定义变量控制节点的X坐标的移动，这样就能实现菜单的切换功能。

         4.详细步骤如下：

小结：

绑定与事件一起使用，可以实现各种不同效果，使用绑定时要注意绑定的两个属性的类型必须是一致才能有效。使用事件时需要知道哪些节点是支持事件的。