快好知 kuaihz订阅观点

 

Axure教程:拖动拼图解锁效果制作步骤详解

本文详细介绍了如何用Axure制作拼图样式的拖动解锁效果,有需要的小伙伴赶紧学习起来~

用Axure制作拼图样式的拖动解锁的效果:

拉动按钮直线运动在一定范围内;

拼图跟随按钮直线运动在一定范围内;

按钮停下来,如果拼图位置跟阴影位置的误差在一定范围内;

点击登录按钮跳转到登录成功页面。

一、元件布局

先用图片处理软件制作了三片拼图,两个小拼图是一样大的,大小拼图两者是能合一的,其他的图标从网上下载,图形可用Axure制作。

记录下滚动条的宽度和位置,这是按钮拼图移动的范围,按钮元件设置为动态画板

二、添加事件

1. 按钮沿直线在一定范围内移动

选中动态面板添加拖动时事件,添加移动动作

2.  拼图跟随沿直线在一定范围内移动 ——同按钮,直接添加动作即可

3. 按钮停下来,如果拼图位置跟阴影位置的误差在一定范围内(技术小白在这卡了很久)

添加事件拖动结束时,添加情形(条件),设置拼图拼图阴影直接距离绝对值大于等于10,添加动作,这个条件下将产生什么动作

重点是第2步,设置变量和函数。

设置局部变量拼图拼图阴影,用函数math.abs计算两个图形左侧距离的绝对值,当大于10时,按钮退回原处(可以设具体的位置)。

4. 点击登录按钮跳转到登录成功页面

总结一下:做这个效果的难点在于增加了变量和函数在里面,同时两个判断条件所产生的位置不同,一个是按钮界面一个是登陆界面。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:拖动  拖动词条  图解  图解词条  详解  详解词条  步骤  步骤词条  效果  效果词条  
原型

 Axure教程:倒计时效果的实现

在新注册账号或者等待验证码的过程中,我们常常会见到需要等待几十秒的情况。这种自动倒计时的效果时如何实现的呢?文章讲解了如何用Axure实现倒计时效果,一起来看看...(展开)

原型

 Axure 教程:用中继器制作商...

本章主要介绍如何使用Axure中继器制作商品列表。对于商城内的产品,“商品列表页”是很关键的一环。好的布局可以让用户快速寻找到目标商品,文字or图片更优先?选择...(展开)

原型

 IBM高级设计师分享:你真的懂如...

工作中常常出现这种情况:你花了无数个小时构思、设计理论模型,到了投入生产才发现完全忘记放上标识了。事实上,我们太容易陷入一个完美的产品快照中。为了提升你的设计能...(展开)