一比一高保真滑动拼图解锁教程。 获赏10金币 基础教程

大马猴 超级版主 2020-1-10 8160

大家好,我是大马猴,又见面了,今天给大家带来一个滑动拼图解锁元件,及2段教程。

如果大家对我的教程及作品感兴趣,可以到我的商城店铺去看看其他作品,都是高保真制作。
商城地址https://www.axureshop.com/shop/3602欢迎大家一起交流学习


效果演示(教程在下面)

一、滑动教程:
1、首先准备5个元件(看个人喜好,5个矩形也是可以的,起名字也随意,大小按照下方给的数值来参考,熟练掌握后,大小随意修改,大小跟公式想对应)
①文本标签,用于数值获取,内容填0,起名数值获取
②矩形,用于主背景,300x35,起名字主背景
③矩形,用于拖动时背景颜色填充,50x35,起名字填充
④矩形,用于拖动按钮,50x35,起名字拖动
⑤矩形,用于再滑一次按钮,起名字在滑一次


真正F5查看的时候要把这些元件归位,如下:


2、把拖动转换为动态面板,这样可以触发拖动时的时间,然后设置水平移动,设置边界左侧>主背景,右侧=<=主背景(主背景用作局部变量)



3、同时设置文字数字获取等于[[Math.floor((LVAR2.x-LVAR1.x)/2.5)]]意思是获取拖动时横坐标减去背景的横坐标除以2.5取整数值(可以理解为拖动按钮从起点到终点移动的距离为250x/2.5=100


4、接下来还是在移动时设置填充背影的尺寸,横坐标等于他减去自身的宽度加上数值获取乘以3(为什么要乘以3,因为数值获取最大数为100,乘以3就是300宽度,咱们的主背景就是300的宽度。好理解吧),设置高度默认35。

以上就可以自由拖动了,而且填充背景也会随着拖动变长,变短,能伸能缩。。。
但是我们要考虑拖拽到头的时候应该提示验证成功对吧。

所以接下来我们还要进行完善。
5、我们发现是拉到头的时候数值获取应该是100,所以我们要加入一个判断,
if 文字于 数值获取 < "100" 可以只用拖动,如果等于100了 就不可以拖动了,并且让再滑一次显示出来(之前要给再滑一次隐藏了)然后设置填充文字为验证成功。


6、拉到头在滑一次就显出出来了,也显示验证成功了,那点击再滑一次没反应,所以接下来要给再滑一次设置一些事件,首先加入判断数值获取==100的时候,设置填充文字为空,移动拖动按钮回到起点,设置填充尺寸50x35设置数值获取=0,隐藏滑动按钮。


好的以上就完全可以成型了。可以拖动,可以点击再滑一次恢复到原点。
什么?你要滑动没到头的时候松开会自动返回初始位置。。。
好吧,那接下来继续往下看。
7、松开手的时候也就是拖动结束时,所以在这里设置判断,
如果数值
<100,设置拖动按钮移动到起始位置,并且触发效果为线性200ms,设置填充为50x35,数值获取为0


好的,以上就完完全全成型了。大家可以自己多多练习。



二、滑动拼图解锁教程
找到一个你喜欢的图片,如果会PS可以把图扣成下面的图这样。
然后把上面那个制作好的滑动解锁复制下来,在这个基础上继续完善这个滑动拼图解锁。
1、要准备的元件有:
①文本标签,用于数值获取,内容填0,起名数值获取
②矩形,用于主背景,300x35,起名字主背景
③矩形,用于拖动时背景颜色填充,50x35,起名字填充
④矩形,用于拖动按钮,50x35,起名字拖动
⑤矩形,用于再滑一次按钮,起名字在滑一次

以上是复制下来的
新增的元件有:
⑥主图,
⑦移动的小图,起名叫小手吧
⑧一个文本框,用来计时读秒,起名叫计时
⑨两个个文本标签,内容就是厉害了,验证成功,击败老多人了。然后把文本框放这2个文本标签之间,给这个标签和上面的文本框组合。起名字叫验证成功


2、首先我们要知道,拖动按钮时需要设置小手也一起移动,所以我们要添加事件,
当拖动按钮移动时,设置小手跟随


然后给小手做个隐藏,当拖动按钮拖动时,显示小手,拖动结束时候隐藏。并且判断数值获取等100的时候也隐藏小手,并且设置填充背景文字为“要不您带个眼镜试试。”(随意写,哈哈)请看下面


3、接下来我们要判断小手是不是准确的滑动到缺口那里。
因为我们有数值获取,尝试之后发现小手停到缺口的位置是77~80之间,所以我们这样判断当拖动结束时,数值获取>=77and<=80and!=100时,显示验证成功组合,显示再滑一次,显示小手。


4接下来,我们来做计时,计时文本框转换动态面板,并且复制一个,起名计时1,计时2


然后添加判断,如下


然后我们回到拖动按钮,设置事件,当拖动时,设置计时动态面板next


这样就设定好了计时。
5、再滑一次按钮事件增加了2

6、拖动按钮整体事件


好了,大家可以多多练习,熟练掌握。

上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (265)
  • 2014023 普通用户 3天前
    0 引用 266
    棒棒棒
  • 91男模一号 普通用户 1月前
    0 引用 265
    感谢
  • Y_0 普通用户 1月前
    0 引用 264
    666
  • 来自北极的企鹅先生 普通用户 2月前
    0 引用 263
    感谢分享
  • zgc_81 普通用户 2月前
    0 引用 262
    666,感谢分享
  • fmr 普通用户 5月前
    0 引用 261
    谢谢
  • 瓦达瓦大 普通用户 6月前
    0 引用 260
    玩个服务FE3 
  • youzimatt 普通用户 7月前
    0 引用 259

  • chloe03 普通用户 7月前
    0 引用 258
    好好好
  • 小王子king 普通用户 2022-6-20
    0 引用 257
    666
  • Amanda001 普通用户 2022-6-17
    0 引用 256
    666
  • 颠三倒四 普通用户 2022-6-16
    0 引用 255
    太好用了11111
  • pandakill 普通用户 2022-6-16
    0 引用 254
    6666
  • 435433465 普通用户 2022-5-29
    0 引用 253
    666
  • 浅音 普通用户 2022-5-27
    0 引用 252
    非常感谢
  • abacadscz 普通用户 2022-5-25
    0 引用 251
    66
  • 18809860773 普通用户 2022-4-22
    0 引用 250
    zhen 6
  • li0206 普通用户 2021-12-12
    0 引用 249
    666
  • lykkans 普通用户 2021-12-6
    0 引用 248
    感谢分享
  • 天河北乔峰 普通用户 2021-12-1
    0 引用 247
    666
  • Terry_24 普通用户 2021-11-2
    0 引用 246
    太高级了
  • SuperAdminMan 普通用户 2021-11-2
    0 引用 245
    666,感谢分享
  • 伍声与 普通用户 2021-10-15
    0 引用 244
    感谢
  • linsansui 普通用户 2021-9-18
    0 引用 243
    谢谢分享
  • 諰繘 普通用户 2021-9-15
    0 引用 242
    1
  • 土豆爱吃鱼 普通用户 2021-6-1
    0 引用 241
    谢谢分享
  • 699279889 普通用户 2021-5-8
    0 引用 240
    666
  • MrDu 普通用户 2021-4-27
    0 引用 239
    感谢
  • RunTu 普通用户 2021-4-25
    0 引用 238
    感谢分享
  • whatwhy 普通用户 2021-4-20
    0 引用 237
    6666666
  • QYB 普通用户 2021-4-19
    0 引用 236
    1
  • Wargon 普通用户 2021-4-14
    0 引用 235
    很需要,收藏
  • 茅嘉懿他老子 普通用户 2021-3-30
    0 引用 234
    学习
  • zhuhao 普通用户 2021-3-24
    0 引用 233
    1
  • open565 普通用户 2021-3-24
    0 引用 232
    真原型,感谢
  • 权权 普通用户 2021-3-22
    0 引用 231
    感谢分享
  • noya2020 普通用户 2021-3-21
    0 引用 230
    感谢分享,学习了~ 
  • qzl123 普通用户 2021-3-16
    0 引用 229
    感谢分享
  • yh_h 普通用户 2021-2-24
    0 引用 228
    xx
  • SaSaas 普通用户 2021-2-23
    0 引用 227
    谢谢
  • zhenzhenyang 普通用户 2021-1-22
    0 引用 226
    感谢分享
  • ydf 普通用户 2020-11-15
    0 引用 225
    6666666666
  • caoyang2511 普通用户 2020-11-15
    0 引用 224
    秀儿 是你么
  • Fl_1597142615 普通用户 2020-11-11
    0 引用 223
    没看懂  看看源文件
  • 刘源 普通用户 2020-11-10
    0 引用 222
    感谢分享
  • mcgreed 普通用户 2020-11-6
    0 引用 221
    感谢分享
  • 道阻且长 普通用户 2020-11-2
    0 引用 220
    666
  • 2508957142 普通用户 2020-11-2
    0 引用 219
    66666
  • 如果 普通用户 2020-11-2
    0 引用 218
    优秀
  • 如果 普通用户 2020-11-2
    0 引用 217
    多层次
  • 鲍彦卫 普通用户 2020-10-22
    0 引用 216
    你好啊
  • 统一晴岚阿萨姆 普通用户 2020-10-20
    0 引用 215
    6666666666666
  • 几猴体 普通用户 2020-10-15
    0 引用 214
    好好
  • loveelva30 普通用户 2020-9-27
    0 引用 213
    这个太66666了。喜欢。多洗。
  • 18500560534 普通用户 2020-9-25
    0 引用 212
    感谢楼主
  • 飞奔的母猪 普通用户 2020-9-18
    0 引用 211
    感谢作者
  • Jennifer_1589507415 普通用户 2020-9-18
    0 引用 210
    感谢楼主 
  • Hely 普通用户 2020-9-16
    0 引用 209
    感谢分享
  • luckyphp 普通用户 2020-9-16
    0 引用 208
    第一次使用,先看看源码
  • adrian123456 普通用户 2020-9-14
    0 引用 207
    感谢分享
  • 欧翍 普通用户 2020-9-11
    0 引用 206
    谢谢楼主分享~~
  • 李萌_1599398834 普通用户 2020-9-6
    0 引用 205
    学习一下
  • SJ_1599183616 普通用户 2020-9-4
    0 引用 204
    感谢分享
  • 夏时, 普通用户 2020-9-3
    0 引用 203
    试一下
  • 陈靖 普通用户 2020-9-3
    0 引用 202
    谢谢
  • 黄馨 普通用户 2020-8-25
    0 引用 201
    谢谢分享
  • 宸枫 普通用户 2020-8-21
    0 引用 200
    6666666
  • yanning 普通用户 2020-8-20
    0 引用 199
    用心非常,感谢
  • Q 糖 普通用户 2020-8-18
    0 引用 198
    感谢分享
  • Boowy 普通用户 2020-8-17
    0 引用 197
    感谢分享,学习
  • Wz_1582594346 普通用户 2020-8-10
    0 引用 196
    膜拜
  • 于赛龙 普通用户 2020-8-7
    0 引用 195
    666
  • 632508968 普通用户 2020-8-6
    0 引用 194
    学习
  • HeiHei_1596696186 普通用户 2020-8-6
    0 引用 193
    我是没看懂说明,还是看看源文件吧
  • lihepeng1188 普通用户 2020-8-6
    0 引用 192
    厉害啊,用心了
  • 九丝城主 普通用户 2020-8-2
    0 引用 191
    不错的特效
  • 我爱喝果汁 普通用户 2020-7-31
    0 引用 190
    2
  • 123456ZZZ 普通用户 2020-7-29
    0 引用 189
    666
  • zaki2019 普通用户 2020-7-29
    0 引用 188
    666
  • ECHO_1591846968 普通用户 2020-7-27
    0 引用 187
    感谢分享
  • 一月 普通用户 2020-7-25
    0 引用 186
    谢谢
  • Lv·7 普通用户 2020-7-23
    0 引用 185
    感谢老师分享
  • ToMaTo_J 普通用户 2020-7-23
    0 引用 184

    感谢分享

  • 猴神大叔(千千岩求女) 普通用户 2020-7-23
    0 引用 183

    感谢分享

  • 陈晓聪 普通用户 2020-7-23
    0 引用 182
    谢谢
  • ShineeyeHu 普通用户 2020-7-21
    0 引用 181
    感谢分享
  • 冯天宇。 普通用户 2020-7-21
    0 引用 180
    感谢分享
  • youngY5121364 普通用户 2020-7-21
    0 引用 179
    感谢楼主分享
  • xiayuxiong 普通用户 2020-7-16
    0 引用 178
    谢谢
  • _1594864316 普通用户 2020-7-16
    0 引用 177
    还可以哦
  • juan001 普通用户 2020-7-16
    0 引用 176
    666
  • 梅花老King 普通用户 2020-7-15
    0 引用 175
    感谢分享
  • 纳洛酮。 普通用户 2020-7-14
    0 引用 174
    666
  • beyondzr 普通用户 2020-7-13
    0 引用 173
    感谢
  • qing_yun 普通用户 2020-7-12
    0 引用 172
    666
  • anmu168 普通用户 2020-7-9
    0 引用 171
    感谢分享
  • A_1593482917 普通用户 2020-7-8
    0 引用 170
    66666
  • 六耳 普通用户 2020-7-7
    0 引用 169
    谢谢
  • JeanKerr 普通用户 2020-7-6
    0 引用 168
    666
  • 冲天飞 普通用户 2020-6-28
    0 引用 167
    不错不错
返回