Axure教程：动态面板实现广告循环播放

人人都是产品经理 • 8年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

淘宝、天猫和京东等购物网站已经成为我们生活中的一部分，每每打开我们都可以看到有一个广告窗口，图片在里面循环滚动播放，那么它是怎么实现的呢？利用Axure软件我们可以简单实现，下面我将向大家分享一下具体步骤，希望能够帮助到大家。

原材料：

图片、动态面板、按钮、状态栏

注意命名，状态栏内的原点按钮命名和对应的图片一致，后面有妙用；按钮和状态栏都可以用矩形轻松制作而成。

步骤/方法

第一步：设置动态面板内容

动态面板状态设置成两层动态状态，分别是img1、img2，内置相应的图片，并将图片和动态面板的大小调成一致，本次案例中的大小是W:850,H:400。

在主界面将按钮和状态移入动态面板框内，调整好位置，设置left和right按钮的默认状态为“隐藏”。

第二步：设置动态面板滚动状态

选中动态面板“dong1”—元件交互与说明“载入时”添加用例—动态面板“设置面板状态”—dong1（动态面板）—“previous”“向前循环”“循环间隔4000毫秒”—进入动画“向左滑动”“向左滑动”—“如果隐藏则显示面板” （以上秒数可以自由选择）

第三步：设置点击图片打开广告链接的交互动作

双击动态面板“dong1”进入动态面板状态管理—进入面板状态“img1”—选中图片“img1”—元件交互与说明“鼠标单击时”—链接“打开链接”—打开位置“当前窗口”（也可以选中新窗口）—勾选“链接到url或文件”—超链接“http://www.baidu.com”（输入你的目标链接地址）（“img2”同）

第四步：设置按钮、状态栏“选中”状态

选中“left”按钮—元件属性与样式“属性”—交互样式设置“选中”（注意不要点错为禁用复选框的选中）—勾选“填充颜色”复选框并选择一个较深颜色，如#999999。（“right”同）

选中状态栏的原点按钮“img1”—元件属性与样式“属性”—交互样式设置“选中”—勾选“填充颜色”复选框并选择一个橙色，如#FF6600。（“img2”同）

选中状态栏的原点按钮“img1”和“img2”—元件属性与样式“属性”—输入[选项]组名称—输入“zu1”（随意输入都可以）

第五步：设置按钮、状态栏的交互事件

选中“left”按钮—元件交互与说明“鼠标单击时”—动态面板“设置面板状态”—dong1（动态面板）—“next”“向前循环”—进入动画“向右滑动”“向右滑动”

选中“right”按钮—元件交互与说明“鼠标单击时”—动态面板“设置面板状态”—dong1（动态面板）—“provious”“向前循环”—进入动画“向左滑动”“向左滑动”

left

right

选中“left”按钮—元件交互与说明“鼠标移入时”—元件“选中”—勾选“当前元件”—选中状态“值”“true”（“right”同）

选中“left”按钮—元件交互与说明“鼠标移出时”—元件“选中”—勾选“当前元件”—选中状态“值”“false”（“right”同）

选中状态栏的原点按钮“img1”—元件交互与名称“鼠标单击时”—动态面板“设置面板状态”—勾选“dong1”—选择状态“Value”—状态名称“[[This.name]]”(利用到了我们之间巧妙的命名了)（“img2”同）

第六步：设置动态面板与按钮和状态栏的交互

选中动态面板“dong1”—元件交互与说明“鼠标移入时”：

元件“显示”—勾选“right”“left”—可见性“显示”
动态面板“设置面板状态”—勾选“set dong1”—选择状态“停止循环”

选中动态面板“dong1”—元件交互与说明“状态改变时”—

“添加条件”—面板状态“this”==状态“img1”（即描述“if 面板状态于 This == img1”）—元件“选中”—勾选“img1（形状）”—“值”“true” （这里的img1（形状）指的是状态栏里的原点按钮1）
“添加条件”—面板状态“this”==状态“img2”（即描述“Else if 面板状态于 This == img2”）—元件“选中”—勾选“img2（形状）”—“值”“true” （这里的img2（形状）指的是状态栏里的原点按钮2）

完成后动态面板的交互如下图

第七步：动态面板“鼠标移出”交互设置（方法一）

情形一：不设置移出条件

选中动态面板“dong1”—元件交互与说明“鼠标移出时”—元件“隐藏”—勾选“left”和“right”—可见性“隐藏”—动态面板“设置面板动态”（重复第二步）

Bug：当鼠标从动态面板（图片）移入“left”和“right”按钮时，也同样属于鼠标移出动态面板，导致图片恢复滚动效果，“left”和“right”在隐藏和显示出反复闪屏转换。

情形二：在情形一的基础上设置移出条件

此步骤需要使用到函数和局部变量。鼠标的函数“Cursor.x”和“Cursor.y”，可以点击“fx”，再点击“插入变量或函数”来获取。

局部变量主要是点击“fx”—“添加局部变量”—“dong1”=“元件”“dong1”（如下图）

选中动态面板“dong1”—元件交互与说明“鼠标移出时”—添加条件—符合“任何”

“值”“[[Cursor.y]]””<””值”“[[dong1.top]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的上边界）
“值”“[[Cursor.y]]””>””值”“[[dong1.bottom]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的下边界）
“值”“[[Cursor.x]]””<””值”“[[dong1.left]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的左边界）
“值”“[[Cursor.x]]””>””值”“[[dong1.right]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的右边界）

这样子是不是就可准确实现鼠标移出效果了呢？

Bug：鼠标移出效果将会失效，即移出鼠标时仍然不会执行动态窗口滚动的效果。原因是，该动作只在鼠标移出动态窗口“dong1”的那一瞬间执行，此时，对于鼠标的坐标定位会早于移出动作执行，即鼠标坐标定位仍然停留在动态窗口内，因此条件判断不符合条件，动作无法执行。

情形三：在情形二的基础上缩小移出的判断空间范围

基于情形二的bug，鼠标定位会比移出动作执行早一点，可以转换思路，将判断范围缩小。

选中动态面板“dong1”—元件交互与说明“鼠标移出时”—添加条件—符合“任何”

“值”“[[Cursor.y]]””<””值”“[[dong1.top+10]]” （上边界向下缩小了10）
“值”“[[Cursor.y]]””>””值”“[[dong1.bottom-10]]” （下边界向上缩小了10）
“值”“[[Cursor.x]]””<””值”“[[dong1.left+10]]” （左边界向右缩小了10）
“值”“[[Cursor.x]]””>””值”“[[dong1.right-10]]” （右边界向左缩小了10）

这样子修改之后基本上可以满足使用要求，但仍存在bug。用极限思想思考一下，当鼠标移动速度无限接近无穷时，总会在达到一个临界速度后，在执行移动动态窗口所需的时间内移出距离超过缩短的边界值10，则又会出现情形二的bug。

第八步：新增动态面板“dong2”解决bug(方法二）

第七步提供的是一种实现移出效果的思路，虽然有小bug，但也是非常值得学习的，用在其他需要的原型中也是可以取到很好的效果的。

步骤七无法解决的问题，实质是无法做到让“移入‘left’和‘right’按钮”不包括在“移出动态面板‘dong1’”这个动作范围内。因此，我们可以转换思路将“left”、“right”按钮和状态栏都纳入到动态面板内，但因为“left”、“right”按钮和状态栏是不随图片滚动，所以无法放置在同一个动态面板内。我们将采取的解决方法是用另一个相同大小的动态面板“dong2”对动态面板“dong1”进行覆盖，并将“left”、“right”按钮和状态栏放置在动态面板“dong2”内。

1）放入动态面板“dong2”，设置大小W:850,H:400；将“left”、“right”按钮和状态栏剪切粘贴放入动态面板“dong2”的面板状态“state1”中，同时，重新设置第六步动态面板“dong1”与状态栏按钮“img1”和“img2”的选中交互。

2）设置动态面板“dong2”交互动作：

选中动态面板“dong2”—元件交互与说明“鼠标移入时”—元件“显示”—“right”“left”—动态面板“设置面板状态”—勾选“dong1”—选择状态“停止循环”

选中动态面板“dong2”—元件交互与说明“鼠标移出时”—元件“隐藏”—“right”“left”—动态面板“设置面板状态”—勾选“dong1”—选择状态“previous”“向前循环”“循环间隔4000毫秒”—进入动画“向左滑动”“向左滑动”—“如果隐藏则显示面板”

经过动态面板“dong2”对“dong1”的覆盖可以完美地解决地第七步中存在的问题，但又会出现新的问题，由于“dong1”已经被覆盖，所以第三步中设置的点击图片打开链接的功能将会失效。因此，我们需要借助一个矩形来使解决这一问题。

3）打开动态面板“dong2”的面板状态“state1”，设置一个透明的矩形大小与动态面板“dong2”完全重合，并将矩形置于底层。

4）选中矩形—元件交互和说明“鼠标单击时”—添加条件—“面板状态”“dong1”==“状态”“img1”（即if 面板状态于 dong1 == img1）—链接“打开链接”—打开位置“当前位置”—勾选“连接到url或文件”—超链接“http://www.baidu.com”（同理设置动态面板“dong1”==img2时）

选中矩形—元件交互和说明“鼠标单击时”—添加条件—“面板状态”“dong1”==“状态”“img2”（即if 面板状态于 dong1 == img2）—链接“打开链接”—打开位置“当前位置”—勾选“连接到url或文件“—超链接“www.taobao.com”