加载效果、推动和拉动效果、筛选标签效果以及banner轮播效果

加载效果

作用：延缓用户的等待时间，动态效果吸引用户的视线，减少用户等待的感知，减少其等待的焦虑。

一般可利用多张图片进行切换。交互效果可设置如下：

可将第一章图片分块，进页面后，等待一会儿，四个分块进行旋转，可设置两次180度旋转从而恢复原位。最后四个分块隐藏或者以一定效果撤退。

推动和拉动效果

作用：通过一些按钮进而显示更多的表格信息，下面部件也往后推移，或者收起部分信息，节省空间，后面部件也向上移动。

方法1：使用显示和隐藏来触发推动和拉动效果

1. 设置好以下的原型，将部分的表格内容隐藏

2.在“显示更多”处设置交互效果，

当显示更多表格内容后，将“显示更多”文本修改为“收起”

当收起表格内容之后，将“收起”修改为“显示更多”

方法2：使用切换面板状态来触发推动和拉动效果

1. 将更多的表格内容放置在动态面板（动态面板命名为“表格面板”）中，并将该状态命名为“有内容”，增添“空状态”

2.设置“显示更多”的交互效果

筛选标签效果

操作步骤：

1、鼠标单击标签时，切换标签选中状态；

2、标签选中时，添加行；标签取消选中时，删除行

案例步骤如下：

1.首先建立以下原型，矩形框内为中继器，将其命名为“标签中继器”，设置一个标题框为“中继器-标签”，命名中继器列名为“biaoqian”，并设置交互效果：【每项加载】—【设置文本】

2.设置可选择标签的交互效果

4.预览如下：

Banner轮播效果

实现如淘宝广告位上图片的轮播效果

1. 添加几张图片，修改其大小，均放置到动态面板的各个状态，动态面板命名为“banner”

2.对动态面板设置交互效果：【载入时】—【设置面板状态】—目标【banner】，【下一项】、【循环】

3.添加新的动态面板“点”，分别设置不同轮播时点的颜色为不同的状态，使其能在图片切换时相应变换。

此外，设置每个状态中其余白点的交互效果，使其能在单击后进行切换。注意左右切换的不同。

4.添加新的箭头标识，使其在点击后左右切换。