返回首页

Axure手机滑动解锁效果的制作龙8娱乐官网手机版

时间:2012-12-09 22:43来源:知行网www.zhixing123.cn 编辑:麦田守望者

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

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

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

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

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

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

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

一.选好三张图片

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

二.设定两个动态面板

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

放在图中的1,2位置

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

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

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

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

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

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

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

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

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

a.用例1

点击添加条件如下图

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

添加一个动作:

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

b.用例2

点击添加条件如下图

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

添加一个动作

Axure龙8娱乐官网手机版:手机滑动解锁效果的制作

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

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

丢下一个小问题:

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

------分隔线----------------------------
标签(Tag):AxureRP AxureRP教程 AxureRP软件下载 AxureRP序列号
------分隔线----------------------------
推荐内容
  • 利用会声会影x7制作个性相册视频龙8娱乐官网手机版

    利用会声会影x7,制作个性的电子相册,制作电子相册的视频教程。 操作步骤: 1.在覆叠...

  • 如何利用会声会影婚庆视频制作软件 婚礼就是出众

    现在结婚视频个人拍摄一些就能轻松的制作出自己结婚庆典的视频了,既省钱也能根据自己...

  • 会声会影如何制作电子相册 美好青春纪念册

    由于大学新闻专业的选择,需要学习、掌握些简单的视频剪辑方法,虽然,当时学校教的视...

  • 摄影中正方形构图使用指南

    摄影时采用正方形构图已不是什么新鲜的东西了,正方形构图最早出现可以追溯到胶片时代...

  • Axure Repeater数据删除实现教程

    一、 Repeater控件设置 Repeater控件的设置跟上期完全一样,我们直接用上期的数据即可...

  • Axure Repeater数据输入实现教程

    一、 Repeater控件设置 1、拖放一个Repeater控件到主页上,默认界面如图所示 2、双击R...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8娱乐官网手机版
  • Photoshop龙8娱乐官网手机版
  • 3DMAX龙8娱乐官网手机版
  • AutoCAD龙8娱乐官网手机版
  • CorelDRAW龙8娱乐官网手机版
  • Matlab龙8娱乐官网手机版
  • 其他龙8娱乐官网手机版
  • .Net龙8娱乐官网手机版
  • Asp龙8娱乐官网手机版
  • Php龙8娱乐官网手机版
  • Jsp龙8娱乐官网手机版
  • Ajax龙8娱乐官网手机版
  • Android教程
  • 其他龙8娱乐官网手机版
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影