效果:
介绍:
鼠标左键按住蓝色边框的方型区域,向左侧拖动(表示:单词忘记了),方型界面滑动到左侧,向右侧拖动(表示:记住了,下一个单词),方型界面滑动到右侧,同时下方图片跟随变换。
操作步骤:
首先在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的默认位置。需要考虑一下正在做的工程都需要什么节点和什么样的效果来组成。