天天看点

动态面板:自动图片切换

案例描述:

固定区域循环播放一组图片(幻灯片效果),圆形分页标签随着播放不同的图片,而对应改变样式。

思路分析:

①利用动态面板可添加多个状态的特性,创建5个状态;

②将5张需要展示的图片放到各个状态里面;

③将圆点分页标签做成只能唯一被选中的效果,并设置第一个圆点默认被选中;

④页面打开后,开启图片循环播放的效果;

⑤每次切换到新的图片时,根据状态名称选中圆点分页标签,呈现蓝色效果

注意:第1张图片的尺寸大小决定后面图片的大小(即与第1张保持一致)

1.把动态面板拖入页面,命名为SlidePanel

2.双击动态面板

动态面板:自动图片切换

3.进入状态“State1”,添加一张图片到画布左上顶点的位置(位置可自定)

动态面板:自动图片切换

4.参考上一步,将剩余四张图片分别放入到状态“State1”~“State5”中;

动态面板:自动图片切换

5.在动态面板区域外拖入一个圆形,在元件属性中为其设置【选中】的样式,{设置选项组名称}为“Tag”,并调整为合适的大小;点中此元件,按<Ctrl+D>键复制成5个后,摆放在合适的位置上;因为这几个元件变小后不易操作,可以在概要面板中,为这几个命名为“Tag1”~“Tag5”

动态面板:自动图片切换
动态面板:自动图片切换
动态面板:自动图片切换

设置第一个圆点默认被选中

右键——选中

动态面板:自动图片切换

6.新建交互——【载入时】事件——【设置面板状态】动作

点中动态面板“SlidePanel”,为其【载入时】事件添加用例,设置动作为【设置面板状态】“SlidePanel”为【Next】;同时,勾选【向后循环】与【循环间隔】的选项,并设置自动循环间隔的时长为“2000”毫秒;一般来说,页面打开时,不会直接切换到第二个状态,所以这里还要勾选【首个状态延时***毫秒后切换】;最后,设置下个状态进入与当前状态退出的动画均为【向左滑动】“500”毫秒;

动态面板:自动图片切换

7.新建交互——状态改变时——添加情形1

为动态面板“SlidePanel”的【状态切换时】事件添加用例1;为用例添加条件判断,判断【面板状态】“SlidePanel”【】【面板状态】“State1”;

动态面板:自动图片切换
动态面板:自动图片切换

继续上一步,添加符合该条件的动作,【选中】元件“Tag1”

插入动作——【设置选中】

动态面板:自动图片切换
动态面板:自动图片切换

参照情形1添加情形2的条件和动作;判断【面板状态】“SlidePanel”【】【面板状态】“State2”;动作为【选中】元件“Tag2”

动态面板:自动图片切换
动态面板:自动图片切换
动态面板:自动图片切换

参照情形2,依次添加情形3~4

8.因为,除去情形1~情形4的判断内容,就只剩下最后一种情形;所以,情形5无需进行条件内容的设置,直接设置动作为【选中】元件“Tag5”

动态面板:自动图片切换
动态面板:自动图片切换

完成!