跑马灯效果、面板随鼠标滑动、图片预览、高保真的开关按钮、下载按钮点击效果反馈的介绍

跑马灯效果

例如街边LED灯的循环显示。

1. 借助动态面板“循环面板”来完成LED显示屏内容的循环，动态面板至少有俩状态。
2. 将要显示的内容命名为“文字内容”

3.设置循环面板，载入时，每100ms切换一次面板状态；循环面板状态改变时：如果文字内容在右侧，则线性10秒移动到左侧；如果文字内容在左侧，则立刻移动到右侧。

面板随鼠标滑动

鼠标移动到一些商品图片的各个方向的时候，会从相应方向显示一些解释的内容

1. 调整图片大小，增添矩形框大小与图片一致，填充颜色，调解透明度。矩形框底部叠加小矩形框，小矩形框上补充说明文字，将俩矩形框和说明文字形成组合“浮层”，将矩形框叠加到图片上。
2. 选中所有元件，转换为动态面板“商品面板”，在动态面板上下左右添加元件热区，命名为“上、下、左、右”，设置动态面板的交互效果

图片预览

例如电商平台中的一些图片预览作用，放大显示图片的细小部位。

1.建立原型，将3张图片（比例500*500）添加为动态面板的几个状态“1、2、3”，方便切换，命名为“左面板1”，内置矩形框“左面板2”

2.添加动态面板“循环面板”（至少2状态），添加矩形框“预览框”，填充颜色，调节透明度，将预览框放置在循环面板内。

3.添加动态面板“右面板1”（500*500，作用：固定尺寸），内置矩形框“右面板2”（自适应内容），右面板2放置3张图片，比例为1250*1250（计算方法：左侧预览框的尺寸/左侧图片的尺寸=右侧面板的尺寸/右侧图片的尺寸，得出右侧图片尺寸：1250*1250）

4.设置循环面板的交互效果

使鼠标在预览框的中心点，移动预览边框，X值：[[cursor.x-左面板1的X坐标-预览边框X尺寸的一半]]；Y值同理。

设置预览边框的上下界限，因为它只能在左面板1的范围内移动

移动右面板2：移动右面板2，X值：[[-（cursor.x-200）*2.5]]；（相对性问题，这里变的使面板，而不是预览框，所以为负）；y同理。

分别移动预览框至主对角线的两端，确定边界

4.设置下面小图的交互效果，例

设置左面板1的交互效果

5.预览效果

高保真的开关按钮

1. 建立以下原型：矩形框、按钮框（命名“关闭样式”，一开始设置大小使其不显示）、动态面板（命名“开关按钮”，放置两个开关元件）

2.设置开关元件的交互效果

3.预览

下载按钮点击效果反馈

1. 先将背景转换为动态面板（命名“背景”），添加两个状态（正常和放大）
2. 再将文字转换为动态面板（命名“文字”），添加两个状态（正常和放大），设置为自适应内容，叠加到背景
3. 添加浮层，即矩形框，设置好透明度，将其叠加到背景，先隐藏
4. 在所有元件上添加个热区，设置热区的交互效果