AxureRP8实战手册-案例14(动态面板:拖动滑块解锁①)

AxureRP8.0教程 小楼一夜听春语 19962℃ 0评论

案例14. 动态面板:拖动滑块解锁(1)

案例来源:

淘宝-注册界面

 

案例效果:

  • 拖动前:(图1-97)

1_97

 

  • 拖动中:(图1-98)

1_98

 

  • 拖动到终点后:(图1-99)

1_99

 

 

案例描述:

拖动滑块进行解锁验证。包含以下情形:

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

元件准备:

  • 页面中:(图1-100)

1_100

 

  • 动态面板“SliderPanel”中:(图1-101)

1_101

 

  • 动态面板“BackgroundPanel”中:(图102)

1_102

包含命名:

  • 动态面板(用于拖动):SliderPanel
  • 动态面板(用于显示绿色背景条):BackgroundPanel
  • 矩形(用于滑块形状):SliderShape
  • 矩形(用于绿色背景):GreenShape
  • 矩形(显示验证提示):CheckTip
  • 矩形(用于下一步按钮):NextButton
  • 热区(用于验证触点):Contact

 

思路分析:

1、本案例比较复杂的就是在同一区域的元件叠放,由最底层开始分别是:

  • 灰色矩形,作为模块的背景;
  • 动态面板“BackgroundPanel”,绿色矩形“GreenShape”在这个面板的状态中;这两个元件用于呈现绿背景,所以仅在灰色背景之上;
  • 透明矩形“CheckTip”,用于显示验证提示;
  • 动态面板“SliderPanel”,矩形滑块“SliderShape”;因为元件中只有动态面板才可拖动,所以要将矩形滑块置于其中;
  • 热区“Contact”,在整个模块右侧边缘,用于滑块触碰到此元件时,触发验证相关动作。

2、在滑块被拖动时,如果没有触碰到触点元件“Contact”,需要设置滑块为水平拖动,并添加边界限制;(操作步骤1~2)

3、否则(触碰到触点元件“Contact”),需要设置动作:

  • 设置元件“CheckTip”的元件文字为“加载中”;(操作步骤3)
  • 等待500毫秒;(操作步骤4)
  • 设置元件“CheckTip”的元件文字为“验证通过”;(操作步骤5)
  • 设置元件“SliderShape”的元件文字为“ ”;(操作步骤6)
  • 启用元件“NextButton”。(操作步骤7)

4、滑块拖动结束时,如果没有触碰到触点元件“Contact”,需要设置滑块回到初始位置;(操作步骤8)

5、滑块移动时,设置绿色的背景跟随移动。(操作步骤9)

 

操作步骤:

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

  • 条件判断设置:(图1-103)

1_103

2、设置满足条件的动作为【移动】“SliderPanel”为【水平拖动】;点击{界限}后方的【添加边界】,设置元件在x轴“80”~“381”的坐标区域内移动;“381”为模块右边界加1的位置,此位置才能够接触到触点元件“Contact”。

  • 用例动作设置:(图1-104)

1_104

3、添加不满足操作步骤1的条件时,执行的动作为【设置文本】“CheckTip”的元件文字为【富文本】,然后点击【编辑文本】,为元件上显示的文字“加载中”添加样式;

  • 用例动作设置:(图1-105)

1_105

  • 编辑文本设置:(图1-106)

1_106

4、添加动作【等待】,{等待时间}“500”毫秒;然后,后执行下一动作;

  • 用例动作设置:(图1-107)

1_107

5、添加动作【设置文本】“CheckTip”的元件文字为【富文本】,然后点击【编辑文本】,为元件上显示的文字“通过验证”添加样式(参考图1-106);

  • 用例动作设置:(图1-108)

1_108

6、添加动作【设置文本】“SliderShape”的元件文字为【富文本】,然后点击【编辑文本】,为元件添加图标字体“ ”;图标字体可通过双击图标字体元件,在编辑状态下复制获得;

 

  • 用例动作设置:(图1-109)

1_109

  • 编辑文本设置:(图1-110)

1_110

 

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

  • 用例动作设置:(图1-111)

1_111

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

 

  • 用例动作设置:(图1-112)

1_112

 

9、为动态面板“SliderPanel”的【移动时】事件添加“用例1”;设置动作为【移动】元件“GreenShape”【跟随】当前动态面板移动;

  • 用例动作设置:(图1-113)

1_113

 

通过以上步骤,就完成了拖动解锁的全部交互。

  • 事件交互设置:(图1-114)

1_114

 

 

补充说明:

  • 本案例主要讲解动态面板拖动的相关内容,不对其它交互进行描述;
  • 本案例中滑块回到原点未添加滑动效果,该效果将在函数案例部分优化;
  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)

 特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例14(动态面板:拖动滑块解锁①)

喜欢 (31)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(55)个小伙伴在吐槽
  1. 完全步骤一样,但绿色条没有跟随移动,只是縁色矩形被抹去,找了好久找不到问题,请教。
    心雨蓝飞2016-07-06 18:28 回复
    • 我的也是
      初恋2016-10-21 12:24 回复
    • 绿色条要在动态面板里,而且水平位置:-300
      sunwayqyd2017-02-15 14:26 回复
    • 注意动态面板的显示范围,就是那个蓝色虚线框。他在X轴右侧,这样矩形才不会显示出来,因为矩形只能显示在动态面板中。我之前也是直接通过矩形建立动态面板,出现了这样的错误。
      2313432452017-03-09 16:38 回复
  2. 怎么好像不行
    Ritchey2016-07-07 15:45 回复
  3. 为什么case2没有执行呢
    老么2016-07-15 09:15 回复
    • 应该不是在check tip矩形的文本,而应该是green shape矩形的文字改变。把原件check tip改成green shape就可以
      aclsj2017-03-16 17:18 回复
    • 不是不透明那里调成0,调成0的话加载中和验证通过也会跟着透明,正确做法是把check tip填充那里的不透明改为0,就可以了
      新秦2017-11-29 15:11 回复
  4. 绿色条没有跟随移动
    yer212016-07-21 09:21 回复
    • 绿色矩形的X轴要设为-300
      孙悟饭2017-05-08 20:30 回复
  5. 按老师的步骤来的,初始状态绿色条在IE浏览器中能被看见,且“手机号”下面的“验证”被绿色条覆盖~反复试了多次,不知道哪里出错了~
    尛尛2016-07-26 15:12 回复
    • backGroundpanel这个动态布局长度需要也设定为300才可以
      毛毛2016-12-10 16:13 回复
      • 这个长度默认就是300,依然是同样的问题
        familyHu2016-12-23 13:17 回复
        • 它的位置尺寸X坐标要设为-300
          jqseven2017-08-07 15:59 回复
  6. 小楼老师,为什么我的滑块不是跟随鼠标移动,而是以鼠标2倍的速度向右移动?我没有找到怎么调整滑块移动的速度
    疯狂的啄木鸟2016-08-23 14:05 回复
    • 你肯定是一个case里面设置了2个移动,一个水平,一个拖动
      无恨心2017-01-19 18:17 回复
  7. 老师,其余都能演示,除了点击【编辑文本】,为元件添加图标字体“ ”;图标字体可通过双击图标字体元件,在编辑状态下复制获得;没办法添加那个图标字体啊
    日月星辰2016-09-07 16:13 回复
    • 现在外面复制好,再进去case里面添加,粘贴就可以了
      jqseven2017-08-07 16:02 回复
      • 你有做好的源文件吗,给以分享一下,学习学习,535357243是我的qq
        妮子2017-10-18 16:29 回复
  8. 完全没问题,我没用接触事件,用的是定位
    阿飞2016-09-22 16:58 回复
  9. SliderPanel的起点X坐标为80和BackgroundPanel终点左边为0【最右边】,一拖动滑块,绿色面板跟随其移动,但是她们之间始终空的有一节无色的空间,你们是怎么处理的?
    呵呵哦up2016-09-26 15:34 回复
  10. 我从官网下的RP8,练习时里面对于动态模版的属性没有“移动时“的交互~
    极限开水2016-09-29 23:37 回复
    • 下面更多事件里
      波波2016-10-12 17:57 回复
  11. 设置满足条件时的动作为【移动】动态面板“SliderPanel”【到达】{x}“80”{y}“180”的位置;没有到达这项!!!!!
    波波2016-10-12 17:54 回复
    • 小楼一夜听春语
      请使用本站Axure RP 8的汉化包
      小楼一夜听春语2016-10-12 19:54 回复
    • 我的也没有,用“回到拖动前位置”也是一样的,还更好理解
      jqseven2017-08-07 16:06 回复
    • 我的被翻译成绝对位置
      新秦2017-11-29 15:21 回复
      • 小楼一夜听春语
        换本站发布的汉化
        小楼一夜听春语2017-11-30 09:46 回复
  12. 求教,我按步骤做完后,绿色调没跟随移动,而且滑块也没能正常的返回原点,到底是什么情况啊?求大神指教!!!
    初恋2016-10-21 12:26 回复
    • 将CheckTip填充设置为透明,然后将backgroundPanel的填充设置为灰色,即可;
      吕雪莹2016-11-07 10:16 回复
      • 已经设置了 还是不跟随啊
        kaimy112016-12-13 22:14 回复
    • 跟随是跟随的是动态面板BackgroundPanel中的GreenShape,滑块返回时返回的是动态面板SliderPanel
      jqseven2017-08-08 09:00 回复
  13. 我的软件里面怎么没有跟随这个选项
    二胜子2016-11-19 09:41 回复
    • 小楼一夜听春语
      【移动时】-移动 才有跟随
      小楼一夜听春语2016-11-19 13:37 回复
  14. 我不太明白一点,greenspace 跟随移动,那greenspace的右端不是就移动出去了么,没法做到效果这样啊
    Terry2016-11-23 20:51 回复
    • 小楼一夜听春语
      http://www.chuanke.com/1358445-197334.html 理解不了可以购买单节视频,帮你渡劫!
      小楼一夜听春语2016-11-23 20:55 回复
  15. 把background panel添加三个状态也能实现同样的效果
    bwcq2017-01-20 14:29 回复
  16. 老师 本节比较复杂 能否加上视频 有许多小地方不知哪里出错 只达到一半效果
    勤奋小学生2017-02-15 15:48 回复
  17. GreenShape初始X坐标应为-220,同时验证文本框长度应设为80,并且该文本框层次比GreenShape高才可以实现拖动变绿色。
    硬盘2017-02-26 21:21 回复
  18. 未滑动到热区,送开鼠标,SliderPanel回到起始位置时为什么会下移呢?
    zuchu2017-03-28 14:05 回复
    • 我也遇到类似的问题,其余全实现了,就是SliderPanel我不拉到热区,松开后就没了,不能重新拉了。也没看到“加载中”的字样
      djiprvtd2017-05-11 14:44 回复
    • 我的也是下移了 你的解决了嘛?
      愿版你仗剑天涯2017-05-26 22:33 回复
      • 下移的问题,可能是拖动sliderpanel时的case1中,没有设置移动为水平移动
        Sunsting2017-06-26 17:47 回复
  19. 求教~,为什么效果都实现了,但是拖动slidershape时,slidershape和绿色矩形中间有一像素的空白啊,我的绿色矩形没有设置边框
    Sunsting2017-06-26 17:44 回复
    • 不是拖动slidershape矩形,而是整个动态面板sliderpanel动态面板
      已完成作业2017-08-01 16:58 回复
  20. 学axure这个东西只能学逻辑思维,不要跟着老师的教程一步一步去走,毕竟每个版本不一样。把逻辑学懂了,用其他方式也可以做出一样的效果。老师的这个案例采用的是元件范围来判断,我自己用了用移动的坐标数值来判断,结果是一样的。。
    肖雨乐2017-08-12 17:08 回复
  21. CheckTip 设置成全透明,拖到热区,“加载中”“验证通过”字看不见呢?还有灰色背景上的“请拖动滑块,拖动至最右边”字样是写在CheckTip上还是灰色背景矩形上;如果写在灰色矩形上,托动的时候绿色背景会覆盖掉。现在写在CheckTip矩形上并设置成半透明才能达到效果
    初雪20172017-08-18 16:00 回复
    • 我和你一样看不到提示字。。不知道咋弄
      菜小菜2017-10-18 18:23 回复
      • 我也是,拖动玩看不到提示的文字了
        安哥2017-11-27 15:35 回复
    • 这里的不透明是填充那里的不透明,不是样式的那个,“请拖动滑块,拖动至最右边”字写在CheckTip上,当划到最右边时“加载中”“验证通过”会代替“请拖动滑块,拖动至最右边”
      新秦2017-11-29 15:27 回复
  22. 我是把整个CheckTip矩形设置成透明了 ❓ ,应该是把背景设置成透明
    初雪20172017-08-18 16:17 回复
  23. 老师,我完全按着您的步骤来,但预览之后拖不动滑块,是不是少了哪个环节...
    Topsn2017-08-19 16:42 回复
  24. 步骤完全一样,但是滑块不能拖拽,小楼老师求解。
    Topsn2017-08-19 21:54 回复
  25. 老师,咱们有学术讨论的qq群吗?
    妮子2017-10-18 16:32 回复
    • 小楼一夜听春语
      导航-交流群组
      小楼一夜听春语2017-10-18 21:29 回复