axure手机键盘教程（axure手机解锁）

axure手机键盘教程（axure手机解锁）设置9个文本框：步骤1· 6条垂直线· 6条平行线· 9个空白的动态面板

本文给大家介绍用axure制作手机解锁，一起来看看~

原型预览地址：http://amd1mv.axshare.cn/#g=1

原型下载地址：https://www.axureshop.com/a/883569.html#comment-767954

工具/原料

· 9个文本框

· 6条垂直线

· 6条平行线

· 9个空白的动态面板

方法/步骤

步骤1

设置9个文本框：

1、文本框文本为实心句号（圆心），白色文字，36号字体，左右上下居中，3*3排列。

2、命名为1、2、3、4、5、6、7、8、9圆心

步骤2

设置6条平行线和6条垂直线：

1、线段颜色为白色

2、禁用时颜色为红色

3、默认隐藏

4、摆放在两个圆心中间，如果在1-2圆心之间的命名为1-2，其余相同。

步骤3

设置9个空白的动态面板：

1、设置9个空白的动态面板，大小和9个圆心文本框一样，位置在9个文本框上面，标号为1、2、3、4、5、6、7、8、9拖动面板

步骤4

设置9个文本框（圆心）选中是事件（以1为本框为例）：

1、如果1和隔壁文本框（2或4）同时被选中 显示他们之间的线段。

2、取消选中当前文本框，并禁用该文本框的组合（以防再次被选中）。

步骤5

设置9个动态面板拖动时事件：

1、离开该区域是选中本区域的圆心文本框，

2、移入其他圆心文本框时，选中该文本框

步骤6

设置动态面板拖动结束时事件：

1、判断，如果显示的水平线和垂直线和你设定的一致，则解锁成功。

2、如果，显示的水平线和垂直线和你设定的不一致，则失败，失败时禁用所有动态面板和水平垂直线。等待一段时间，重新启用所有动态面板和水平垂直线。隐藏并取消所有水平垂直线。

注意事项

· 该原型设计有一定的难度，下载地址https://www.axureshop.com/a/883569.html#comment-767954，祝大家做出自己喜欢的原件。