Axure 9 实战案例，动态面板的应用 3，京东的拖动拼图登录验证

本文链接：https://blog.csdn.net/congzi530/article/details/111993951

前言

Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>

本次课程我们继续来学习一下，动态面板的应用。在之前的教程中，我们曾经讲解过B站图文登录验证的原型设计课程（了解更多），那是属于基本元件的应用；本篇我们从动态面板的应用的角度，来讲解另一种登录验证的原型设计，那就是京东拼图登录验证。

在这里插入图片描述

京东的拼图登录验证

我们先来看看真实的效果图，大家可以看到，拼图登录验证效果主要组成包括：
①拖动滑块时，拼图碎片与蓝色进度条会跟随移动
②拼图失败时，滑块会自动复位
③拼图成功时，蓝色进度条会到达最右端，显示拼接成功，并且登录按钮显示正在登录，滑块消失

准备工作

为了节省时间，这里提前把拼图验证界面初稿准备好了，包括：拼图、碎片、蓝矩形（以下称进度条）、滑块、登录按钮、其他元素，并且在拼图缺口的右端，画一条垂直辅助线（这是为了后面设置拼图的验证交互做准备）。下面来给大家讲解一下绘图步骤。

在这里插入图片描述

拼图验证界面初稿

第一步：实现滑块的拖动

要想实现拖动的效果，我们需要利用到动态面板的特性。首先选中滑块与碎片，将其组合起来（这是为了后面实现碎片跟随滑块移动而准备），并置于顶层；然后点击右键，在弹出菜单中选择转换为动态面板。

在这里插入图片描述

将滑块与碎片组合起来，并置于顶层

在这里插入图片描述

右键选择转换为动态面板

接着在右侧工具栏上，点击新建交互，再依次点击拖动时_移动_组合（即碎片+滑块），点击移动菜单，选择跟随水平拖动，再点击添加界限；然后设置边界为右侧＜＝400（也就是进度条的长度），左侧＞＝0。

在这里插入图片描述

点击右侧栏的新建交互

在这里插入图片描述

依次点击拖动时_移动_组合（即碎片+滑块）

在这里插入图片描述

移动菜单选择跟随水平拖动，再点击添加界限

在这里插入图片描述

设置边界为右侧＜＝400，左侧＞＝0

第二步：使进度条跟随滑块移动

这里我们仍然要利用到动态面板的特性，来实现跟随移动的交互。首先选中灰矩形，点击右键，在弹出菜单中选择转换为动态面板；然后设置动态面板的圆角为28，也就是矩形的二分之一高（这里是为了后面进度条跟随移动时，能隐藏圆角之外的区域）。

在这里插入图片描述

选中灰矩形，右键选择转换为动态面板

在这里插入图片描述

设置动态面板的圆角为28（即矩形的1/2高）

接着在左侧栏的概要中，将进度条拖入动态面板中，并置于灰矩形上方。

在这里插入图片描述

将进度条拖入动态面板，并置于顶层

再接着双击滑块的动态面板，进入编辑状态，再选中滑块（或在左侧栏的概要中，直接选中滑块），然后在右侧栏上，点击新建交互，再依次点击移动时_移动_进度条_确定（表示默认跟随当前元件移动）。

在这里插入图片描述

选中滑块，再点击右侧栏的新建交互

在这里插入图片描述

依次点击移动时_移动_进度条_确定

在这里插入图片描述

第二步效果图

第三步：实现滑块的自动复位

首先继续选中滑块，点击右侧栏的新建交互，再依次点击鼠标松开时_移动_组合（即碎片+滑块）；然后点击移动菜单，在弹出菜单中选择到达。

在这里插入图片描述

选中滑块，点击右侧栏的新建交互_鼠标松开时_移动_组合（即碎片+滑块）

在这里插入图片描述

移动菜单设为到达

接着点击添加目标，选中进度条，再点击移动菜单，在弹出菜单中选择到达，设置X=-344（即矩形的长度－滑块的直径）。

在这里插入图片描述

点击添加目标，选中进度条

在这里插入图片描述

移动菜单设为到达，X设为-344（即矩形的长度－滑块的直径）

第四步：实现拼图验证效果

保持在滑块动态面板的编辑状态中，首先拖入一个热区，大小随意，拖动到辅助线右侧，并左侧对齐辅助线。

在这里插入图片描述

在滑块动态面板中，拖入热区，左侧对齐辅助线

接着选中滑块，在右侧栏的移动时上，点击启用情形，打开情形编辑窗，在编辑窗上点击添加条件；然后点击第一个下拉菜单，选择元件范围；点击第三个下拉菜单，选择未接触；点击最后的下拉菜单，选择热区。

在这里插入图片描述

选中滑块，在移动时上点击启用情形

在这里插入图片描述

在情形编辑窗上，点击添加条件

在这里插入图片描述

第一个菜单设为元件范围，第三个菜单设为未接触，最后的菜单选择热区

再接着在鼠标松开时上，点击启用情形，重复上面（即移动时）的操作步骤。

在这里插入图片描述

鼠标松开时与移动时的情形条件相同

这里的交互是指，我们通过判断滑块是否接触热区，来确定拼图是否成功：
①情形一，滑块未接触热区时，拼图失败，滑块能自由移动，鼠标松开时滑块自动复位；
②情形二，滑块接触热区时，拼图成功，进度条移到最右端，并且显示拼图成功，登录按钮显示正在登录，接着滑块消失。

所以我们接着依照前面的步骤，来添加这第二种情形。继续选中滑块，首先在移动时的交互上，点击添加情形，打开情形编辑窗。

在这里插入图片描述

点击移动时的添加情形，打开情形编辑窗

在情形编辑窗中，点击添加条件，再点击第一个下拉菜单，选择元件范围；点击最后的下拉菜单，选择热区。

在这里插入图片描述

点击添加条件，第一个菜单设为元件范围，最后的菜单选择热区

接着在情形2交互上，点击添加动作，再依次点击移动_进度条；然后点击移动菜单，选择到达。（这里是指验证成功时，进度条移动到最右端）

在这里插入图片描述

点击情形2的添加动作

在这里插入图片描述

依次点击移动_进度条，移动菜单设为到达

再次点击添加动作，依次点击设置文本_进度条，设置值为拼图成功；然后点击右上角的添加目标，选中登录按钮，设置值为正在登录。（这里是指验证成功时，进度条显示拼图成功，登录按钮显示正在登录）

在这里插入图片描述

再点击添加动作，点击设置文本_进度条，值填上拼图成功

在这里插入图片描述

点击添加目标，选择登录按钮，值填上正在登录

再一次点击添加动作，选中等待，设置值为500毫秒；最后一次点击添加动作，依次点击显示隐藏_滑块，将其设为隐藏。（这里是指验证成功时，等待500毫秒后隐藏滑块）

在这里插入图片描述

再次点击添加动作，选择等待

在这里插入图片描述

最后再点击添加动作，选择滑块，并设为隐藏

结语

OK了，一个京东的拼图登录验证就绘制完成了，一起来看看最终效果图吧。（另外，我们还可以在验证失败时，将进度条设为红色，这就由同学们自行研究喽）

在这里插入图片描述

最终效果图

在线预览

效果图在线预览：https://u.pmdaniu.com/L8A5p

Axure 9 实战案例，动态面板的应用 3，京东的拖动拼图登录验证

前言

准备工作

第一步：实现滑块的拖动

第二步：使进度条跟随滑块移动

第三步：实现滑块的自动复位

第四步：实现拼图验证效果

结语

在线预览

相关课件