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

文章描述: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的位置,链接到前一个页面,这样就能够连续操作了哟!好,今天的交流就到这里。

丢下一个小问题:

这个时候我们的控件是能够左右移动无限距离的,能不能让控件只在框内移动呢?我们在以后的axure小技巧中来为大家解答!

作者:lucky

时间: 2024-10-29 09:09:57

axure小技巧:iphone的滑动解锁效果的相关文章

Axure实战小技巧:iPhone滑动解锁效果制作

在我们第一次接触iphone时,都曾醉心于iphone手指轻轻一滑世界便在掌握的爽快感受,axure作为一款强大的交互软件,我现在告诉你:这个可以有.你想要自己制作iphone的滑动解锁效果吗,笔者在这里为你提供一个很简单的用axure实现的小技巧,让我们在axure的成长道路上多多交流. 其实完成这一动作只需要满足两个条件: 1.iphone的一张背景图.一个滑动控件图.一个ip的screen的图片 2.设定动态面板完成拖拽时的交互 a.到达指定区域进入screen界面 b.未到达指定区域则控

JS+CSS实现带小三角指引的滑动门效果_javascript技巧

本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代

关于这个手机滑动解锁效果为什么会限制不了,

问题描述 关于这个手机滑动解锁效果为什么会限制不了, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机解锁效果</title> <style type="text/css"> #phone{ position:relative; width:426px; height:

三星S6如何设置滑动解锁效果?s6滑动解锁设置方法

若想为滑动屏幕解锁设置效果,请按以下步骤操作:  1.在待机页面下,点击[应用程序].    2.点击[设定].    3.点击[锁定屏幕与安全].    4.点击[解锁效果].    5.选择您喜欢的效果,这里以[闪闪发光的泡泡]为例.      6.滑动解锁效果已更改,在锁定屏幕以任意方向.位置滑动屏幕解锁时,即可显示闪闪发光的泡泡效果.   

三星A7000如何设置滑动解锁效果?

若想为滑动屏幕解锁设置效果,请按以下步骤操作:  1.在待机页面下,点击[应用程序].    2.点击[设定].    3.向上滑动屏幕,点击[锁定屏幕].    4.点击[解锁效果].(注:当屏幕锁定方式为"滑动"时,才可设置解锁效果.若您的锁定屏幕设置为节日墙纸时,解锁效果无法使用.)    5.您喜欢的效果,这里以[水彩画]为例.    6.点击[保存].            7.滑动解锁效果.   

JavaScript小技巧制作的跑马灯效果

javascript|技巧 以下是我们所制作的跑马灯效果的源程序 <html> <head> <script language="JavaScript"> <!-- Hide var scrtxt="这儿的讯息可以改为你要告诉别人的话 "+" 或是注意事项 ..."; var lentxt=scrtxt.length; var width=100; var pos=1-width; function sc

WPS文字中三招排版小技巧

  在工作或学习中,编辑完文档后,常常会对多页的文档进行页码的设置,不然装订或者阅读起来比较麻烦.而在WPS编辑文字,一点小技巧会达到事半功倍的效果,下面就为大家讲讲页码的插入以及排版的小技巧. 1.用A4纸排版的文档,要打印在16开纸上,重新排版太麻烦,要用原来的排版效果,只需要在打印设置面板中的"并打和缩放"下"按纸型绽放"后设置为"16开"即可. 打印设置 2.看到WPS文字(或WPS表格.WPS演示均可)有你喜爱的图片时,只需右击图片,在

iphone手机Touch ID指纹识别的小技巧

苹果在iPhone5S上推出的指纹识别系统--Touch ID现在已经成为了iOS设备不可或缺的重要部分.解锁.密码.支付,方方面面少了它都不行.不过有的时候你会发现,使用起来Touch ID会卡卡的,慢慢的,这该怎么办呢?今天小编就向大家介绍两个关于Touch ID的小技巧,或者说小花招也可以.     只存一个指纹 我们知道,iOS设备的Touch ID允许人们存储五个指纹.那么我们可以利用这一点,让五个备选栏中都存入自己最常使用的那根手指的指纹,这样就能够有效提高 Touch ID 对于指

Win8.1使用滑动关机的小技巧

"滑动关机"是Win8.1系统的一项新的隐藏功能,类似于手机解锁,其初衷是针对Win8触控屏用户,普通用户也可以通过鼠标滑动关机.由于该功能属于隐藏功能,默认是关闭的,因此我们无法直接找到,这是很多Win8.1用户找不到滑动关机的原因,其实我们简单设置一下就可以找到了,下面小编分享一些使用滑动关机的小技巧. 最简单的方法是:到系统设置中开启"滑屏以关闭你的PC"选项,还有一个就是建立快捷方式,随开随用(间接的快速关机)! 方法如下: Win+X,选择运行: 输入sl