【Axure教程之创意交互原型11】在滑动中切换预览帧画面并快速更换视频封面

【摘要·简介】

好久不见啦！今年真是太忙了！最近在项目中忽然产生了一个在“视频封面上滑动预览同时还能直接极速更换封面”的创意，觉得做成交互应该很好玩。

其实鼠标在视频封面上滑动可以预览不同的帧画面，这并不是一个原创创意，在国外的一个在线视频写作编辑产品Frame.io上就已经有了。以前我们要更换一个视频卡片的封面，需要进入到某个设置页面，然后再打开某个窗口来选择一帧合适的画面做封面，流程很长体验也繁琐。那么结合这个“滑动预览帧画面”的交互，再只需加上一小步操作，先预览再直接更换封面，是不是更方便快捷呢？我们用Axure来体验一下这个交互吧！

关键技术点：

1、熟悉Axure的Mouse Enter、Mouse move和Mouse exit的交互；

2、学习Cursor.x函数的使用，掌握UI组件如何跟着鼠标悬停移动而移动；

我们先来看一下完成后的效果：

完成后的工程文件、用来学习的初始工程文件以及素材，可以从下面的网盘链接自行下载：

链接: https://pan.baidu.com/s/1R90QcC7oJOA1C0Pe5EzeSw?pwd=53sx 提取码: 53sx

这组交互有几个要点：

1、鼠标的hover移动超过一定距离，变换封面图片，这可以通过动态面板切换state来实现；

2、让红线跟着鼠标hover移动而动；

PS：鼠标按住拖动一个UI组件是很容易的，通过Drag交互添加move动作，并选择with drag模式就可以实现（如下图1），这个之前的教程就运用过多次。但是如何在鼠标不拖动而只是在悬停状态下移动，也能让其他元素跟着移动呢？

【图1】

接下来展开详细的分解。

——————————————————分割线———————————————
【Step1】打开初始工程文件，搭建场景
打开上面网盘链接下载的文件夹中的“【Axure教程之创意交互原型8】初始工程文件.rp”文件，可以看到已经搭建了一个基本的页面出来了，如下图2：

【图2】

【1.1】添加若干个相同尺寸的空白动态面板作为切换图片的触发器。当鼠标hover进入不同的动态面板，就触发切换不同的图片

这里我们希望总共有多少张图片用作切换，就添加多少个空白动态面板。比如我们设定当鼠标从封面的左侧滑到右侧的过程中，总共切换15张图片，那就添加15个空白动态面板。

从PAGES切换到OUTLINE，然后点击总动态面板“DYMP_卡片”下的State 1 进入该动态面板中，在下方的组件库LIBRARIES面板中，选中并拖动动态面板组件Dynamic panel到画布中，为当前场景添加一个空白动态面板，并在右侧属性面板的设置大小W和H为（36，306），位置参数X和Y为（0，0），如图3所示。

【图3】

【1.2】复制这个空白动态面板14次。

保持选中这个空白动态面板，按Ctrl+D14次复制14个。并紧紧挨着依次排列，直至排满整个封面区域。如图4所示：

【图4】

——————————————————分割线———————————————
【Step2】添加鼠标移入时候的交互/添加 Mouse Enter 交互事件
现在先来为第一个空白动态面板添加鼠标移入的交互。

在这之前，我们可以先来看一下，在左侧的OUTLINE面板中找到并鼠标双击进入名为“DYMP_Change cover”的动态面板，这是作为卡片封面的动态面板，可以看到该动态面板下已经添加好了共15个state，每个state内有1张不同的图片，如图5所示。到时候只需要触发“Set Panel State”的Action/动作，就可以切换图片了。

【图5】

【2.1】添加Mouse Enter 交互事件

按ESC键退出当前的动态面板“DYMP_Change cover”，然后点击选中刚才复制的那组空白动态面板中的第一个；

再在右侧的INTERACTIONS（交互）面板下，点击New Interaction按钮，在弹出的下拉面板中点击选择Mouse Enter，添加到选中的空白动态面板上，如图6所示：

【图6】

【2.2】为鼠标移入的交互添加一系列Action/动作

【2.2.1】添加Set Variable Value动作

添加Mouse Enter交互事件后，接下来会自动打开添加ACTION/动作的下拉面板，往下滚找到Set Variable Value并选中添加；我们需要先设置一个全局变量并在鼠标移入的瞬间为其赋予一个值，这个值就是此时鼠标的坐标X值。这个全局变量将会起到关键的作用。如图7所示：

【图7】

此时会看到Set Variable Value（设置变量值）下的Choose Variable（选择变量）会让你选择一个全局变量，点击下方的 Add Variable添加全局变量；

然后会看到自动打开了一个变量编辑器弹窗，点击“+ Add”按钮，添加一个全局变量并重命名为“Track cursor X”。如图8所示。

【图8】

点击OK按钮确认添加。

接下来为新建的变量赋值

添加变量后，弹窗自动关闭。然后仍然在右侧的INTERACTIONS面板中，在Set variable value动作的参数组内，点击第三行参数设置VALUE的输入框右侧“fx”按钮，打开为变量赋值的编辑器弹窗。如图9所示：

【图9】

然后点击Insert Variable or function...链接，打开一个选择函数的下拉面板，从中找到并选中Cursor.x，然后点击OK，完成添加一个函数。这个函数会跟踪并记录当前的鼠标坐标X值。如图10所示：

【图10】

赋值完成后，点击Set variable value动作的参数组右下角的蓝色OK按钮，完成该动作的参数设置。然后接下来要添加别的动作Action。

【2.2.2】添加Set Panel State动作

双击Mouse Enter，打开Interaction Editor/交互编辑器窗口，在左侧选中点击Set Panel State添加，然后会看到自动弹出了一个下拉面板用于选择为哪个动态面板设置Panel state，在下拉面板中找到封面图片动态面板DYMP_Change cover，点击勾选；

然后，在右侧参数配置区Configure Actions的第二行参数STATE中选择State15，将Animate in和Animate out动画方式设为Fade，时长设为150ms。如图11所示。

【图11】

【2.2.3】添加Set Panel State动作

首先，现将“时间指示红线”和设置封面按钮图片素材“设置封面b t n”设为隐藏。点击OK按钮关闭Interaction Editor/交互编辑器窗口。然后在左侧栏的OUTLINE面板中找到“设置封面b t n”素材和“时间指示红线”图片素材，右击弹出菜单选择Set Hidden，如图12所示。

【图12】

然后，再次选中第一个作为Hover热区的空白动态面板，双击Mouse Enter，再次打开Interaction Editor/交互编辑器窗口。在左侧选中点击Show/hide动作添加，在自动弹出的下拉面板中找到并勾选图片素材“播放时长+观看次数info”，在右侧参数配置区Configure Actions点击Hide，将其隐藏，并将Animate设为Fade，时长设为200ms。如图13所示：

【图13】

接下来需要显示设置封面按钮。鼠标Hover到Show/Hide动作上，可以看到右上角显示了“Add Target”按钮，点击弹出下拉面板，在其中找到图片素材“设置封面b t n”，点击勾选；然后在右侧参数配置区Configure Actions点击Show，将其显示，并将Animate设为Fade，时长设为200ms。如图14所示：

【图14】

用同样的方法，将“时间指示红线 ”图片素材也显示，动画参数相同。如图15所示：

【图15】

——————————————————分割线———————————————
【Step3】添加鼠标悬停移动时候的交互/添加 Mouse Move 交互事件

3.1 添加Mouse Move事件，并添加Set Variable Value动作

点击OK按钮返回。

（1）在右侧栏再次点击蓝色New Interaction按钮添加新的交互，在弹出的下拉面板中找到并点击选择Mouse Move添加；

（2）添加Mouse Move后，在新弹出的添加动作下拉面板中， 找到并点击添加Set Variable Value；

（3）点击添加Set Variable Value动作后，再在新弹出的选择变量面板中，点击选择Track_cursor_X添加；

如图16所示：

【图16】

然后为其赋值。点击fx按钮，打开变量编辑窗口；

然后点击Insert Variable or function...链接，打开一个选择函数的下拉面板，从中找到并选中Cursor.x，然后点击OK，完成添加一个函数。这个函数会在鼠标的移动时候跟踪并记录当前的鼠标坐标X值。如图17所示：

【图17】

3.1 添加Move动作，移动时间指示红线

3.1.2 为作为热区的空白动态面板添加Move动作：

（1）双击Mouse Move，打开 Interaction Editor交互编辑窗口，在左侧栏里选择Move动作点击添加；

（2）在右侧Configure Actions参数配置区域中，将MOVE移动方式设为To，点击第一个输入框（X坐标）右侧的fx按钮，打开值编辑器；

（3）点击蓝色文字按钮Insert Variables or Function..., 在下拉面板中选择全局变量Track_cursor_X插入；

（4）在第一个输入框内，修改参数值为[[Track_cursor_X-48]]，这里之所以是48，是因为整个卡片距离屏幕边缘值为48；而红线需要出现在鼠标坐标附近。为了让时间指示红线必然出现在卡片封面内，无论鼠标悬停进入卡片封面的起始X坐标值是多少，都需减去48才行。

如图18所示。

【图18】

3.1.3复制Move交互及其动作，将其粘贴到时间指示红线素材上。

（1）鼠标右击Move交互事件在弹出的菜单中选择Copy，然后，在左侧OUTLINE栏里找到“时间指示红线”图片素材，点击选中；

（2）接下来再在右侧INTERACTIPON栏里点击New interaction按钮，在弹出的下拉面板中找到Shown，点击其右侧的Paste按钮，此时便在为“时间指示红线”图片素材添加Shown交互事件的同时还添加了Move动作，一次操作完成两个步骤。

如图19所示：

【图19】

此时可以预览一下，试试看运行效果，可以看到在鼠标hover到封面上时，时间指示红线出现，并跟随鼠标移动而移动；而且，可以看到封面图片也随之切换了。

接下来，为作为热区的空白动态面板再添加鼠标点击时候（按照设计方案，点击也就是确认更换这个封面）的交互及其动作。

——————————————————分割线———————————————
【Step4】添加鼠标点击时候的交互/添加Click or Tap交互事件

4.1 添加Click or Tap交互事件

（1）再次选中作为热区的第一个空白动态面板，在右侧INTERACTIPON栏里点击New interaction按钮，在弹出的下拉面板中找到Click or Tap点击添加；

（2）接下来自动弹出了添加动作的下拉面板，从中找到Set Panel State动作，点击添加；

（3）之后自动弹出了选择组件素材的下拉面板，从中找到DYMP_Change cover点击i添加；

（4）然后，在STATE参数组下点击选择State15；也就是确认封面图片切换为当前动态面板状态的图片；

如图20所示：

【图20】

4.2 为新的Click or Tap交互事件再添加Show/Hide动作

将Mouse Enter交互事件内的Show/Hide动作复制粘贴到Click or Tap交互事件上；

（1）复制Mouse Enter交互事件内的Show/Hide动作；

（2）切换到Click or Tap交互事件，右击Paste粘贴；

（3）双击打开Interaction editor窗口，将粘贴过来的Show/Hide动作设置修改如图21所示：隐藏时间指示红线和“设置封面b t n”按钮，显示“播放时长+观看次数 info”；

【图21】

4.2 为新的Click or Tap交互事件再添加Set Variable Value动作，并再添加一个新的全局变量，用于标识鼠标移出热区时，是否进行了明确的封面切换操作

4.2.1 添加Set Variable Value动作并添加新的变量

保持停留在Interaction editor窗口上，在左侧找到Set Variable Value动作点击添加；

（1）之后会看到Set Variable Value动作右侧自动弹出了选择变量的下拉面板，点击底部的Add variable/添加变量按钮；

（2）自动打开变量编辑窗口，点击+Add按钮，添加一个新变量；

（3）将这新变量重命名为“IF_Click”，设默认值为0；

如图22所示：

【图22】

4.2.2 为新的变量赋值

点击OK返回Interaction editor窗口，然后点击Set Variable Value动作右侧上角的Add Variable按钮，在弹出的下拉面板中选择刚新添加的全局变量IF_Click，并将新的变量值设为1，如图23所示：

【图23】

点击OK，关闭Interaction editor窗口返回。

——————————————————分割线———————————————

【Step5】将制作好的3组交互事件复制粘贴到其他鼠标hover热区动态面板

5.1 复制3组交互事件并粘贴

（1）将Mouse Enter、Mouse move、Click or Tap 三组交互事件收起来，然后复制；

（2）选中其他14个作为鼠标hover热区的空白动态面板，依次按Ctrl+V粘贴（目前Axure中不能批量选中一次粘贴，只能选中一个粘贴一个）；

如图28所示：可以看到粘贴了交互事件的动态面板上，会有一个黄底黑色闪电图标。

【图28】

5.2 当鼠标移入每个不同的空白动态面板时，触发变换不同的封面

从第2个到第15个动态面板，在Set Panel State动作那里，设置不同的State状态。如图29所示：

【图29】

那么接下来，我们最后来完成“当鼠标没有做点击而移出封面的时候，封面状态恢复到鼠标移入前状态”的交互。

——————————————————分割线———————————————

【Step6】添加一个新的热区组件，用于触发鼠标移出封面范围时，封面返回原状态的交互

6.1 添加一个Hot Spot热区组件并绘制合适的形状

（1）在当前工程文件主界面左下方的LIBRARIES面板中找到Hot Spot热区组件，鼠标按住拖动到场景画布中；

（2）拖动边缘的手柄缩放到一个合适的大小，并放在合适的位置，参考如图30所示：

【图30】

6.2 为Hot Spot 添加一个Mouse Enter交互事件

当鼠标从封面移动进入到这个Hot Spot时候，触发Hot Spot的Mouse Enter交互事件。

（1）点击蓝色New Interactio按钮，在自动弹出的下拉面板中找到并点击添加Mouse Enter交互事件；

（2）点击Mouse Enter交互事件右上角的Enable Case按钮，打开Condition Builder条件编辑器窗口，将条件编辑为：当变量IF_Click值等于0的时候（也就是鼠标没有做点击操作的时候，移出封面范围）；

如图31所示：

【图31】

6.3. 隐藏时间指示红线和“设置封面 b t n”组件，显示之前的播放时长和观看次数信息（将Show/Hide动作复制粘贴过来即可）

（1）切换选中用作鼠标移入触发热区的空白动态面板，找到Click or Tap动作下的Show/Hide动作，复制；

（2）再次回到选中新添加的Hot Spot热区组件，选中Mouse Enter交互事件，按Ctrl+V粘贴；

如图32所示：

【图32】

6.4 添加一个Set Panel State动作，用于将封面图切换回鼠标移入前的初始状态的图

（1）双击Hot Spot热区的Mouse Enter交互事件，打开Interaction Editor；

（2）在左侧找到并点击添加Set Panel State动作，然后在自动弹出的动态面板选择下面板中找到并选中DYMP_Change cover，STATE设为State1;

（3）将ANIMATE IN和ANIMATE OUT设为Fade，时长设为150ms；

如图33所示：

【图33】

运行一下当前的交互，基本上已经完成了！