ssRender引擎 View节点

效果：

 介绍:

              鼠标左键按住蓝色边框的方型区域，向左侧拖动(表示：单词忘记了)，方型界面滑动到左侧，向右侧拖动(表示：记住了，下一个单词)，方型界面滑动到右侧，同时下方图片跟随变换。

操作步骤：

        首先在Project窗口下创建节点，在Properties窗口中分别为每个节点设置它的属性(设置颜色，更改字体，移动位置……)如下图表所示：

节点数量：

节点名称	数量
Layer节点	1
Item节点	3
View节点	1
ViewItem节点	3
Text节点	3

节点与Preview对应表：

节点名称	Preview中显示
Item0	白色方型区域
Item2	整体黄色的背景图
View0	Preview窗口下无显示，用于控制ViewItem
ViewItem3	蓝色方框区域(图片)，其余VitewItem无显示
Danci	英文单词文字 例：Red
Tu	方型区域下方图片
Jie	中文解释文字 例：n.红色
TiShi	文字：背单词V1.

                                                                                  图 2-1  工程操作界面

 创建自定义属性：

        Resource窗口下点击Property中New Property，创建自定义属性，Property Type设置成为Inteqer，名称分别如下：

         ZongKong：用于控制Text节点和Item节点的移动和默认的位置。

图 2-2  设置自定义属性ZongKong

设置绑定和事件

        首先选中Danci节点，把两个自定义属性分别拖拽到Properties窗口下，其次分别点击属性X/Text的右侧绑定按钮，分别对其进行设置，如下图。

 图2-3 拖拽自定义属性至Properties窗口中

---

图2-4  X属性的绑定

---

        选中Danci节点，设置Text属性的绑定，脚本编辑器中输入如下图所示:(定义 变量a接收自定义属性的值，判断a的值控制当前文字的显示)

图2-5  Text属性的绑定

var a = {$./ZongKong}
(a == 1):"Red"
(a == 2):"Car"
(a == 3):"birth"
(a == 4):"name"
(a == 5):"age"
(a == 6):"dream"

---

选中View0节点，点击Interaction窗口中Events中New Events，设置事件，Event下拉菜单中选择Released，脚本编辑器中输入如下图所示:(设置节点的放缩，位置移动，设置自定义属性+1变化用来控制文字和图片变化)。

图2-6  View0的Released事件

setProperty:{$./ViewItem3/Scale} = 1
setProperty:{$../Item2/Scale} = 1
setProperty:{$../Danci/Scale} = 1
setProperty:{$../Jie/Scale} = 1
setProperty:{$./ViewItem3/X} = 0
setProperty:{$./ViewItem4/X} = 430
setProperty:{$../Danci/ZongKong} = {$../Danci/ZongKong} + 1

---

图2-9     View0的Pressed事件

setProperty:{$./ViewItem3/Scale} = 0.9
setProperty:{$../Item2/Scale} = 0.9
setProperty:{$../Danci/Scale} = 0.9
setProperty:{$../Jie/Scale} = 0.9

---

        选中Tu节点，设置Source属性的绑定，脚本编辑器中输入如下图所示:(定义 变量a接收自定义属性的值，判断a的值控制当前文字的显示) 。

图2-10  Tu节点的Source属性绑定

var a = {$../Danci/ZongKong}
(a == 1):"Red.png"
(a == 2):"Car.png"
(a == 3):"birth.png"
(a == 4):"name.png"
(a == 5):"age.png"
(a == 6):"dream.png"

---

       选中Jie节点，设置X属性的绑定，脚本编辑器中输入如下图所示:(当前X属性跟随ViewItem3属性X变化，通过+502固定当前X属性默认值) 。

图2-11  Jie节点X属性的绑定

---

         选中Jie节点，设置Text属性的绑定，脚本编辑器中输入如下图所示:(定义 变量a接收自定义属性的值，判断a的值控制当前文字的显示)

  图2-12  Jie节点Text属性的绑定

var a ={$../Danci/ZongKong}
(a == 1):"n.红色"
(a == 2):"n.车 汽车"
(a == 3):"n.出生"
(a == 4):"n.姓名"
(a == 5):"n.年龄"
(a == 6):"n.梦想"

---

 小结：

        本次主要用View实现左右拖拽效果，Event事件中Released和Pressed控制节点的主要变化(文字放缩，ViewItem位置变化……)，重点在于先明确View节点的功能，绑定表达式要如何编写；如果X属性要随着另一个X属性变化，那么当前脚本编辑器中是否需要X的值进行运算来固定当前X的默认位置。需要考虑一下正在做的工程都需要什么节点和什么样的效果来组成。