快好知 kuaihz

Axure RP8 教程:iPhone滑动解锁效果

今天带大家使用产品经理必备神器axure实现iphone滑动解锁效果,一起来看看~

一、准备素材

准备好一张背景图,绘制一个外边框命名“边框”,330*60,圆角30。

绘制一个圆形命名“滑块”,,50*50,圆角25,距离外边框各个边框距离5px。

新建一个页面,作为解锁以后进入的主页。

二、交互设置

将滑块转化为动态面板,设置动态面板载入事件,载入时设置变量location=滑块的x坐标。

设置动态面板拖动事件

1. 拖动时,设置动态面板水平拖动

这里需要注意三点:

(1)边界设置,滑块的位置应当大于等于location小于等于location + 320。这里的270是这么来的:外边框的长度-2*间距。

(2)如果拖动时候如果当前滑块x坐标小于location + 270,则水平拖动。270的由来:外边框长度 – 2*间距 – 滑块宽度。

(3)如果拖动时候如果当前滑块x坐标大于等于location + 270,则进入主页。

2. 拖动结束后如果滑块没有到达终点,滑块退回到原来位置

好了,到这里已经完全实现效果了,按下f5预览吧。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:滑动  滑动词条  效果  效果词条  教程  教程词条  iPhone  iPhone词条  Axure  Axure词条  
原型

 Axure教程:实现倒计时获取验...

在app注册或者登录时,一般需要验证手机号码,常用的方式就是向手机发送验证码。下面介绍在Axure中,通过动态面板切换、文本框文字改变两种方法实现这种效果。文章...(展开)

原型

 Axure教程:中继器基础应用—...

中继器——Axure中复杂的元件,没有之一。中继器是Axure中最强大的元件,通常用于页面效果展示时使用。但对于新手小白来说,这个元件的使用不是那么的友好,学习...(展开)

原型

 Axure教程:商品列表及排序筛...

本文带大家一起来看一下Axure中如何商品列表及排序筛选,enjoy~喜欢网购的小伙伴们可能会发现这样一种现象——我们在电商平台浏览商品的时候,这些商品会以方块...(展开)