Axure变量或函数2

--本篇导航--

鼠标指针的属性（滑动解锁）

图片滑动解锁

字符串（验证手机号、邮箱，查找替换）

鼠标指针的属性

在Axure中可以控制鼠标指针的坐标、移动距离、拖拽属性。

▲滑动解锁

最终效果：

实现步骤：

基本元素如下：

由于此交互涉及到拖动元件，具有拖动交互的是动态面板，所以将滑块右键-转为动态面板了。

整体操作有：

拖动滑块：

  向右拖动（未到解锁区域）：水平移动滑块，并将底部滑块进度进行水平拉伸

  向右拖动（已经到解锁区域）：解锁成功（跳转页面或弹出提示信息）

  向左拖动：如果在起始位置（滑块左侧=背景区域左侧）再向左拖动滑块是拖动不了的，即此时将滑块位置设定在初始位置

松开滑块：

  滑块未到解锁区域：此时松开滑块，滑块应自动滑动回初始位置，底部滑块进度的长度恢复到初始值

  滑块已经到解锁区域：此时松开滑块，应解锁成功（跳转页面或弹出提示信息）

图片滑动解锁

最终效果：

实现步骤：

基本元素如下：

整体操作有：

拖动滑块：

  向右水平拖动滑块，拖动的范围为底部滑块进度的左右边界。

  拖动滑块的同时，移动区域也跟随拖动。

拖动结束：

  拖动到目标区域附近（扩大点目标区域范围，增加容错±6），则解锁成功并跳转页面。

  拖动结束未达到目标区域附近时，解锁失败，滑块和移动区域回复到初始位置，并提供解锁失败的文字提示。

字符串

▲验证手机号

最终效果：

实现步骤：

给验证按钮加判断，手机号格式判断条件如下：

长度：11

首位数字必须为：1

第二位数字必须为：3~9 之间的数，即不等于0、1、2

更丰富的如清除按钮、悬停、选中、自动获取焦点等操作，在前面《Axure交互效果1》中有涉及。

▲验证邮箱

最终效果：

实现步骤：

给验证按钮加判断，邮箱格式判断条件如下：

邮箱不能包含多个@

首位必须是字母或数字

@和 . 不能是相邻的

▲查找替换

最终效果：

实现步骤：