1.前期准备
先在画布中拉入三个元件,分别是Box, Image, Ellipse,如下图所示:
Snip20170704_1.png
2.对元件进行编辑
-
全选三个Ellipse, 然后设置Selection Group 为tag(这个随便起名),这是为了当选中的时候,这组中只有一个高亮显示
Snip20170704_4.png -
设置选中的时候的颜色
Snip20170704_6.png 分别设置Ellipse的名字为tag1, tag2, tag3
Snip20170704_5.png
- 在属性面板区域选中Image元件, 右键会弹出个对话框,如下图所示,然后选择将其转换成动态面板
Snip20170704_7.png
- 转换成动态面板后, 会出现State1, 把鼠标移动到它上面,右侧会出现 复制状态, 因为我这里要做三张图片轮播, 所以就复制两次就可以了,如下图所示:
Snip20170704_9.png
- 在对Ellipse进行操作, 先对tag1进行编辑, 添加case(用例)选中tag1然后在 More Events里下拉选择OnSelected
Snip20170704_10.png
- 在弹出的框里选择 Set Panel State,在勾选设置, Select state 选择value, 动画向左滑动, 时间按需设置, 重点说下 Name or State , 公式This.name可以获取当前元件的名字, slice这个函数需要可以传两个值也可以传一个值, 当传两个值的时候表示从哪到哪, 传一个值的时候表示从哪到最后, 也是可以传负数的, 表示从后面倒数多少, 到最后. 那么这里传-1, 就是可以获取到tag1里的1.
Snip20170704_12.png
- 设置等待时间
Snip20170704_15.png
- 设置滑动的时候下一张是谁, 如下图
Snip20170704_13.png
- 复制这个case粘贴给tag2和tag3, 然后设置下指向
- 最后针对tag1, 添加另外一个case ,同样的, More Events 下拉选择OnLoad, selected, 选择tag1自己, 这个操作就是一启动的时候就选择了tag1
- 全部配置好的case如下:
tag1.png
tag2.png
tag3.png
3.预览效果
Untitled.gif
