相关推荐
您可能对下面课程感兴趣
Axure8.0视频教程

74小节已有17870人学过

UI交互app及axure设计教程

84小节已有77695人学过

手机滑动解锁效果的制作
发布时间:2022-03-22 09:27 [ 我要自学网原创 ] 发布人: 小刘2175 阅读: 3564
在我们第一次接触iphone时,都曾醉心于iphone手指轻轻一滑世界便在掌握的爽快感受,axure作为一款强大的交互软件,我现在告诉你:这个可以有。你想要自己制作iphone的滑动解锁效果吗,笔者在这里为你提供一个很简单的用axure实现的小技巧,让我们在axure的成长道路上多多交流。

axure小技巧:iphone滑动解锁效果制作

在我们第一次接触iphone时,都曾醉心于iphone手指轻轻一滑世界便在掌握的爽快感受,axure作为一款强大的交互软件,我现在告诉你:这个可以有。你想要自己制作iphone的滑动解锁效果吗,笔者在这里为你提供一个很简单的用axure实现的小技巧,让我们在axure的成长道路上多多交流。


其实完成这一动作只需要满足两个条件:

1.iphone的一张背景图、一个滑动控件图、一个ip的screen的图片

2.设定动态面板完成拖拽时的交互


a.到达指定区域进入screen界面

b.未到达指定区域则控件返回原处


设定好了这些内容,我们就可以生成原型,欣赏自己的作品吧。好,下面笔者将详细讲解如何来制作这个功能吧。


一.选好三张图片

二.设定两个动态面板

一个动态面板的大小长度和解锁框的大小一致,另外一个可以尽量小一些仅用来判定滑动控件的位置就可以了

放在图中的1,2位置

接下来看1、2号控制面板


在1号动态面板中添加一个大小和控件大小相同的控制面板,命名为“滑动控件”,将控件图片添加进“滑动控件”面板中,接下来对“滑动控件”做相应的交互设计就可以了。


2号控制面板命名为“结束”

在交互动作中添加进这些事件

1.如用例1中:选择移动动态面板→选择“滑动控件”动态面板→移动选择沿X轴移动。就像这样:


2.接下来编辑ondragdrop事件,这个事件中我们要编写两个用例,一个用例是控件滑动到底时,一个用例是控件未滑动到底回到原位置


a.用例1

点击添加条件如下图

添加一个动作:

b.用例2

点击添加条件如下图

添加一个动作

注意:这里的动画调成 缓慢结束 800ms 效果会更好


到这里就对滑动解锁的交互完成了,是不是很简单呢!哈哈!这时候你会发现,我进入screen界面后无法返回,别急!添加一个矩形在home的位置,链接到前一个页面,这样就能够连续操作了哟!好,今天的交流就到这里。

UI交互app及axure设计教程
我要自学网商城 ¥50 元
进入购买
文章评论
0 条评论 按热度排序 按时间排序 /350
遵守中华人民共和国的各项道德法规,
承担因您的行为而导致的法律责任,
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。
V
特惠充值
联系客服
APP下载
官方微信
返回顶部
相关推荐
您可能对下面课程感兴趣
Axure8.0视频教程

74小节已有17870人学过

UI交互app及axure设计教程

84小节已有77695人学过

分类选择:
电脑办公 平面设计 室内设计 室外设计 机械设计 工业自动化 影视动画 程序开发 网页设计 会计课程 兴趣成长 AIGC