动态面板：拖动滑块解锁（1）

案例描述：

拖动滑块进行解锁验证。包含以下情形：
拖动滑块时，滑块仅允许水平拖动，且不可超出灰色边框两端；
拖动滑块时，有绿色的背景随滑块移动；
拖动滑块时，如果滑块到达最右端，显示白色文字“加载中”，等待半秒钟后显示白色文字“验证通过”，并且滑块上的图标变为绿色对勾；同时，启用“获取短信验证码”的按钮；
拖动结束时，如果滑块未到达最右端，滑块回到拖动前的位置。

拖动前

拖动后

注意
Background动态面板中的绿色背景要与动态面板分开，动态面板位置要和滑块开始到结束位置重叠，绿色背景在动态面板外面。

点中动态面板“SliderPanel”，为其【拖动时】事件添加“情形1”，用例中添加条件，判断【元件范围】“SliderPanel”【未接触】【元件范围】“Contact”

设置满足条件(即未接触热区时)的动作为【移动】“SliderPanel”为【水平拖动】；点击{界限}后方的【添加边界】，设置元件在x轴“174”~“468”的坐标区域内移动；“467”为模块右边界加1的位置，此位置才能够接触到触点元件“Contact”(即滑块开始到结束的x轴位置)

情形1的意思是：未接触热区(Contact)，设置动态面板动作为移动

情形2的意思是：接触热区(Contact)，设置动态面板动作为设置文本

添加动作【等待】，{等待时间}“500”毫秒；然后，后执行下一动作

在元件“NextButton”属性中为元件添加【禁用】状态的交互样式，并勾选默认的【禁用】选项；然后，继续上一步，添加动作【启用】元件“NextButton”

默认选中禁用
右键——禁用

为动态面板“SliderPanel”的【拖动结束时】事件添加“情形1”，用例中添加条件，判断【元件范围】“SliderPanel”【未接触】【元件范围】“Contact” （参考操作步骤1）；设置满足条件时的动作为【移动】动态面板“SliderPanel”【到达】{x}“80”{y}“180”的位置

条件为真时返回原来位置(x轴173 y轴170)
为动态面板“SliderPanel”的【移动时】事件添加“用例1”；设置动作为【移动】元件“GreenShape”【跟随】当前动态面板移动

补充说明：
本案例主要讲解动态面板拖动的相关内容，不对其它交互进行描述；
本案例中滑块回到原点未添加滑动效果，该效果将在函数案例部分优化；

完成！

动态面板：拖动滑块解锁（1）相关推荐

axure rp 9 嵌套动态面板拖动
嵌套的动态面板,里外两层都有拖动事件时,只会触发内部动态面板的拖动事件,而不会触发外部动态面板的拖动事件.不像html那样冒泡. 解决方案:内层动态面板的拖动事件中手工触发外部动态面板的拖动事件.
Axure教程:如何使用动态面板？动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板动态面板是a ...
Axure RP使用攻略--动态面板的用途（8）
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于动态面板动态面板是axure原 ...
axure内联框架和动态面板_Axure教程:如何使用动态面板？动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板动态面板是a ...
JavaScript实现拖动滑块验证
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提之前在优化别人写的登录界面时,遇到了滑动解锁成功后发送短信验证码的场景,因为涉及到改动,所以必须要明白它是怎么实现的 ...
axure选中后横线切换_Axure8.0｜动态面板内容简单切换技巧
无论做web段还是移动端,常常会用到动态面板固定在某个区域来变换内容,达到节省空间的作用,今天分享的就是如何实现这种方式. 预览效果: 一.元件准备以IT/互联网.设计创作.职场金融这三组为例,所涉 ...
xcode动态改变窗口大小_详细的理论要点+3个经典案例，帮助你深入理解动态面板...
什么是动态面板动态面板是Axure的高级交互元件,由不同的状态面板组成,是我们制作交互过程中运用频率最高的元件,很多交互效果需要依赖动态面板实现.动态面板的状态面板就像是一个容器,我们可以在里面放置 ...
ligertoolbar 动态加载按钮_Axure利用动态面板实现环形加载进度条
先来看下效果. 基本原理上面是组合效果,主要包含三个部分,左半圆.右半圆和中间的百分加载部分.左.右半圆的实现原理很简单,就是利用动态面板的遮挡功能,将一个完整的圆遮挡一半,然后在显示的那一半上面添 ...
axure原型怎么让文字自动换行_Axure动态面板教程（快速入门+轮播图案例）
动态面板(Dynamic Panel)是Axure的核心功能之一,但很多初学者都反馈理解有难度,今天用一个简单的例子让大家快速掌握它,并且学会做一个常用的轮播图. 12月21日更新:B站视频版教程: ...

动态面板：拖动滑块解锁（1）

动态面板：拖动滑块解锁（1）相关推荐

最新文章

热门文章