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

大马猴 超级版主 2月前 1362

大家好,我是大马猴,又见面了,今天给大家带来一个滑动拼图解锁元件,及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、拖动按钮整体事件


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

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (78)
  • 刘宇皓_1585920994 普通用户 5小时前
    0 引用 79
    很棒,谢谢分享
  • 沃尔夫 普通用户 2天前
    0 引用 78
    感谢分享
  • !!! 普通用户 2天前
    0 引用 77
    牛逼de
  • Matsuri 普通用户 2天前
    0 引用 76
    6666
  • C1512111454 普通用户 4天前
    0 引用 75
    牛逼,去你的商城看了其他作品  确实不错,希望有不懂的能帮我解答下。
  • 羋儿 普通用户 4天前
    0 引用 74
    感谢分享
  • 普通用户 4天前
    0 引用 73
    111
  • 元一 普通用户 6天前
    0 引用 72
    6666太牛逼了
  • xucj 普通用户 7天前
    0 引用 71
    牛逼,去你的商城看了其他作品  确实不错,希望有不懂的能帮我解答下。
  • shuijiyanying 普通用户 8天前
    0 引用 70
    感谢分享
  • 竹间 普通用户 8天前
    0 引用 69
    感谢分享
  • L2H 普通用户 9天前
    0 引用 68
    感谢分享
  • amine 普通用户 9天前
    0 引用 67
    感谢!
  • 小小的小小L 普通用户 10天前
    0 引用 66
    谢谢分享
  • JIANGJO 普通用户 10天前
    0 引用 65
    ganxie
  • cheng12345678 普通用户 11天前
    0 引用 64
    很可以
  • challenger800 普通用户 14天前
    0 引用 63
    好东西
  • wowo 普通用户 14天前
    0 引用 62
    感谢
  • MMMMM 普通用户 14天前
    0 引用 61
    谢谢分享
  • 节操 普通用户 15天前
    0 引用 60
    牛逼
  • yezicheng 普通用户 16天前
    0 引用 59
    感谢分享。
  • 缪前剪 普通用户 16天前
    0 引用 58
    感谢分享
  • TING. 普通用户 17天前
    0 引用 57
    感谢分享
  • 金少 普通用户 18天前
    0 引用 56
    感谢,学习了
  • 294最好啦 普通用户 18天前
    0 引用 55
    感谢分享
  • 一只安静的驴子 普通用户 19天前
    0 引用 54
    666666666
  • 风过千山 普通用户 21天前
    0 引用 53
    感谢分享,楼主太牛了
  • ghj_1584080658 普通用户 21天前
    0 引用 52
    不错
  • 'Jessica' 普通用户 22天前
    0 引用 51
    感谢
  • 敬远 普通用户 22天前
    0 引用 50
    感谢大牛分享
  • Yinqiao 普通用户 22天前
    0 引用 49
    感谢
  • 程维维 普通用户 23天前
    0 引用 48
    非常好,学习。。。
  • 真以航(熊岳南京) 普通用户 24天前
    0 引用 47
    好看
  • 王力_1583808818 普通用户 24天前
    0 引用 46
    挺好玩的
  • 洲_1583480880 普通用户 25天前
    0 引用 45
    感谢
  • Bobolll 普通用户 28天前
    0 引用 44
    牛逼
  • girl 普通用户 28天前
    0 引用 43
    感谢分享!
  • 3.5.7 普通用户 1月前
    0 引用 42
    跟着大神走
  • jiangyang 普通用户 1月前
    0 引用 41
    11
  • 无颜 普通用户 1月前
    0 引用 40
    666
  • Ethereal 普通用户 1月前
    0 引用 39
    感谢分享
  • 杰哥nb. 普通用户 1月前
    0 引用 38
    感谢分享
  • wyr 普通用户 1月前
    0 引用 37
    666666666666666
  • fans634364097 普通用户 1月前
    0 引用 36
    厉害
  • 小草莓 普通用户 1月前
    0 引用 35
    谢谢
  • 大马猴 超级版主 1月前
    0 引用 34
    31楼,你加我微信75009945,详细说下你遇到的问题,咱们一起学习交流,并且解决这个问题。
  • vaper 普通用户 1月前
    0 引用 33
    有用的资料
  • 单单 普通用户 1月前
    0 引用 32
    感谢
  • BiRD 普通用户 1月前
    0 引用 31
    学习的时候碰到了点问题,setsize对于widget无法实现固定宽度、只调整长度的效果,而是整体缩放。
  • 哈哈一笑 普通用户 1月前
    0 引用 30
    感谢
  • 无味 普通用户 1月前
    0 引用 29
    666
  • suxiaobao 普通用户 1月前
    0 引用 28
    谢谢
  • jack0518 普通用户 1月前
    0 引用 27
    访谈人物他
  • shishishi 普通用户 1月前
    0 引用 26
    厉害啊!!!
  • 刘恒 普通用户 1月前
    0 引用 25
    谢谢
  • 小杰_1582616374 普通用户 1月前
    0 引用 24
    牛逼还是不错值得 学习的
  • 你猜…… 普通用户 1月前
    0 引用 23
    非常好,学习。。。
  • 菜菜子 普通用户 1月前
    0 引用 22
    厉害了
  • rong_1582549234 普通用户 1月前
    0 引用 21
    谢谢
  • cdsok 普通用户 1月前
    0 引用 20
    谢谢
  • sakura_1582461715 普通用户 1月前
    0 引用 19
    感谢分享
  • lulu123455555 普通用户 1月前
    0 引用 18
    zhenbang
  • 简单_1582300597 普通用户 1月前
    0 引用 17
    感谢感谢
  • brotherhu 普通用户 1月前
    0 引用 16
    小楼老师好帅
  • Wujungang 普通用户 1月前
    0 引用 15
    优秀
  • Mr.Nobody 普通用户 1月前
    0 引用 14
    感谢分享哈
  • Karen321 普通用户 1月前
    0 引用 13
    谢谢
  • szuzsq 普通用户 1月前
    0 引用 12
    ok,真的很好.
  • wmy0316 普通用户 2月前
    0 引用 11
    厉害了
  • 普通用户 2月前
    0 引用 10
    感谢
  • 普通用户 2月前
    0 引用 9
    牛    高人真多
  • 拾日 普通用户 2月前
    0 引用 8
    厉害厉害,学习了
  • V同学 普通用户 2月前
    0 引用 7
    感谢分享
  • 爱谁谁 普通用户 2月前
    0 引用 6
    感谢
  • Jameshuang 普通用户 2月前
    0 引用 5
    厉害了
  • 沈十三 管理员 2月前
    0 引用 4
    感谢分享,已获得10金币奖励!
  • vigo 普通用户 2月前
    0 引用 3
    666666666666666
  • Q愚仔 普通用户 2月前
    1 引用 2
    牛逼,去你的商城看了其他作品  确实不错,希望有不懂的能帮我解答下。
返回
发新帖
axure商城