Axure教程:如何实现爱彼迎App首页Banner的切换效果

2019-11-30 23:42 来源:未知

原标题:Axure教程:如何实现爱彼迎App首页Banner的切换效果

图片 1拼图

本文分享一个用Axure实现爱彼迎App首页Banner切换效果的方法,供大家参考,欢迎一起交流。

Axure RP 9 beta 绘制原型

图片 2

Camtasia 2018 录屏及导出gif

作者最近闲暇时间试着将爱彼迎App的Banner切换效果用Axure实现出来,网上类似的教程不多,所以给大家分享一下。本文没有将每一个步骤分享出来,而是提供一个实现的思路。对Axure的初学者来说可能有点难懂,后面会提供源文件下载。

Adobe Photoshop CC 2017 处理图片

下图是将要实现的效果截屏:

函数使用:

图片 3

[[Math.abs]]:取绝对值

几个需求点 1. 到边界时的拖动阻尼&回弹效果(见下图)

&&:代表“且”,a&& b 表示a与b均返回true才返回true

图片 4

|| :代表“或”,a||b 表示a或b任一一个返回true就返回true,否则返回false

  1. 停止拖动时若为非正常位置,则自动归位(见下图)

[[this.x]]:元件当前横坐标位置

图片 5

[[this.y]]:元件当前纵坐标位置

  1. 快速拖动时,自动切换到下一个Banner(见下图)

逻辑描述

图片 6

以上是本案例使用的函数,接下来介绍实现小图块移动的逻辑:(下边内容繁杂,不愿意阅读的同行可以直接下载原型研究哈)我们知道,拼图游戏在操作的过程中,是空白位置相邻的图片移动到空白位置,我们设置每个小图块长宽均为100,那么不难发现,可以移动到空白位置的图片坐标距离空白图片坐标距离为100,那么我们在设置移动条件的时候,就以图片距离为依据。

4. 左右拖动时,限制页面上下拖动;上下拖动时,限制Banner左右拖动(见下图)

假定某张图片的坐标为,空白图片的坐标为,^2+^2=两图片距离^2,按照这样的公式可以判断图片与空白图片的距离是否为100,考虑到这样的公式很难在Axure内表达,因此我们简化公式:

因为该Banner区域即能左右拖动,切换Banner,也能上下拖动进行页面的拖动,所以如果不做限制,则会出现拖动时Banner与页面同时移动的情况。

X1-X2=±100且Y1-Y2=0时→图块可移动

图片 7

X1-X2=0且Y1-Y2=±100时→图块可移动

需要处理的几个需求点明确了,再就是如何通过Axure的函数功能来实现了。本文会用到以下几种函数:

否则,图块无法移动,此时当鼠标单击元件时,判断是否符合移动条件,移动条件转化为Axure语言就是:

  1. TotalDragx和TotalDragy

[[Math.abs(This.y/100-ly)==0 && Math.abs(lx-This.x/100)==1 || Math.abs(This.y/100-ly)==1 &&Math.abs(lx-This.x/100)==0]]

获取拖动元件从开始到结束的沿X或Y轴移动距离

其中,lx和ly是我们设置的局部变量,具体含义下文继续描述。

  1. DragTime

图片移动的逻辑基本成型,接下来说说如何记录空白图片的位置:我们画出四个框,命名为X,Y,X*100,Y*100,分别代表当前空白位置的位置及坐标,坐标我们用距离表示,位置我们用0、1、2表示,如下图所示,图片的坐标和位置可以一一对应:

获取拖动元件从开始到结束的时间,单位毫秒ms。

图片 8

  1. Math.abs(x)

上图中写出了四个方块的位置和坐标,其他的以此类推。下面也就是最后的记录方式了,记录方式在这里不啰嗦,大家自行下载原型相信很容易便可以理解。

获取x的绝对值

另外,如何打乱图片本次先不做教程,下期再行补充。

  1. Math.pow(x,y)

新建动态面板,用于放置九宫格图片。

获取x的y次幂

接下来......算了,啰里啰嗦的描述,自己看着都累了,直接上截图

接下来,来解决刚才提到的四个需求点

选择第一张图片

本文先把四个需求的拖动事件和拖动结束事件拆分开,最后会把四个需求的事件写在一起。

鼠标单击时,IF

(设计原型屏幕尺寸为375*812)

图片 9

  1. 到边界时的拖动阻尼&回弹效果

设置文本:

拖动阻尼效果其实就是随着水平拖动距离(x轴)的增加,Banner的移动距离(Y轴)增量减少。见下图:

图片 10

图片 11

其中,lx为元件X的元件文字,ly为元件Y的元件文字。设置文本,

这个函数关系可以用函数实现。尝试了几个函数,发现函数y=4*x^(0.5)图像基本满足要求。

图片 12

图片 13

移动:

再加上条件限制就OK了:

图片 14

左侧的阻尼效果:

其中,lx为元件X*100的元件文字,ly为元件Y*100的元件文字。

TAG标签:
版权声明:本文由澳门新浦金网站发布于互联信息,转载请注明出处:Axure教程:如何实现爱彼迎App首页Banner的切换效果