Axure RP 手机锁屏解锁的交互效果-动态面板的应用

开始拖动动态面板时事件是指开始拖动动态面时触发的交互行为。下面以一个锁屏解锁的交互效果为案例来介绍开动拖动动态面板时事件。产品设计axure 交互效果。

步骤1：

准备一张“解锁”图标。另从部件库中拖拽三个矩形到线框图中，分别调整成圆角矩形，两个圆形（一大一小）



步骤2：

选中两个圆形，右击打开快捷菜单，点击“转换为动态面板”，并命名为“拖拽按钮”



步骤3：

从部件库中拖拽一个单行文本框到线框图中，输入文字“向右滑动解锁>”，命名为“解锁文字”



步骤4：

导入“解锁”图标，命名为“解锁”，放置在圆角矩形的右边；“拖拽按钮”动态面板放置在圆角矩形的左边



步骤5：

新建一个解锁后页面，在页面中用一个矩形代表解锁后的界面



步骤6：

选中“拖拽按钮”动态面板，在“部件交互和注释”窗口中，双击“开始拖动动态面板时”事件，打开用例编辑器



步骤7：

第二步：点击新增动作—选择“部件”，点击“隐藏”；

第四步：配置动作—勾选中“解锁文字“动作——勾选中“解锁文字（形状）”；点击“确定”



步骤8：

选中“拖拽按钮”动态面板，在“部件交互和注释”窗口中，双击“拖动动态面板时”事件，打开用例编辑器



步骤9：

第二步：点击新增动作—选择“部件”，点击“移动”；

第四步：配置动作—勾选中“拖拽按钮（动态面板）”，“移动”设置为“沿X轴移动”；点击“确定”



步骤10：

选中“拖拽按钮”动态面板，在“部件交互和注释”窗口中，双击“结束拖动动态面板时”事件，打开用例编辑器



步骤11：

第一步：用例说明—点击“新增条件”按钮，打开“条件生成”窗口，在“条件生成”窗口中，设置“部件范围拖拽按钮接触到部件范围解锁”，点击“确定”



步骤12：

第二步：点击新增动作—选择“链接”，点击“打开链接”；

第四步：配置动作—单选“链接到当前涉及的一个页面”，选择“解锁后”页面；点击“确定”



步骤13：

参考步骤10打开用例编辑器。第一步：用例说明—点击“新增条件”按钮，打开“条件生成”窗口，在“条件生成”窗口中，设置“部件范围拖拽按钮未接触到部件范围解锁”，点击“确定”



步骤14：

第二步：点击新增动作—选择“部件”，点击“移动”；

第四步：配置动作—勾选中“拖拽按钮（动态面板）”，“移动”设置为“绝对位置到：X:35；Y:36”



步骤15：

第二步：点击新增动作—选择“部件”，点击“显示”，

第四步：配置动作—勾选“解锁文字”，点击”确定“



axure快速原型设计 案例查看“陪学网”http://www.pexue.com/，该axure学习视频案例链接地址：http://www.pexue.com/Course/viplesson/239b347d-7ead-45a6-93f0-08c00817f03f?spid=4684786e-7d71-4515-a9fd-9b34ca206a14