case6(由Banner1至Banner2)

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

在上文自动归位的【动作】中,再加入变量设置,结果如下:

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

case6(无阻尼水平拖动)

图片 1拼图

  • 【条件】当Banner模块的X坐标>20时(Banner模块距离屏幕左侧边距为20,以下同)
  • 【动作】拖动时==>>移动Banner模块到达位置:X坐标[[4*Math.pow(TotalDragX,0.5)+20]],Y坐标[[this.y]]

Axure RP 9 beta 绘制原型

  • 【条件】Math.abs(TotalDragX)>Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为1
  • 【条件】Math.abs(TotalDragX)<Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为0

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

快速拖动自动至Banner1的情况(由Banner2至Banner1):

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

快速拖动自动至Banner3的情况(由Banner2至Banner3):

提取码:v7c7

  1. 左右拖动时,限制页面上下拖动;上下拖动时,限制Banner左右拖动

[[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]]

图片 2

图片 3

case1

图片 4

#快速拖动切换#

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

case5(右侧阻尼)

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

  • if【条件】Math.abs(TotalDragX)<Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为0

拼图游戏看似已经做完了,其实呢,美中不足,差一步:当我们拼完图后,想打乱重新来一次,有木有,无法打乱,那么怎么办呢,本期先留下一点小悬念,我们下期再出如何打乱图片的RP。

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

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

有了全局变量记录Banner模块的位数,就可以通过拖动的方向(TotalDragX的正负)和拖动的时间(DragTime),来判断需要移动的下一个Banner位数。本文快速拖动定义为400ms内拖动距离为50。

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

  1. TotalDragx和TotalDragy

设置文本:

归位Banner3的情况:

图片 5

链接: 密码:y6nw

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

  • if【条件1】当Banner模块的X坐标>20时
  • 【条件2】变量Movable值=1
  • 【动作】拖动时==>>移动Banner模块到达位置:X坐标[[4*Math.pow(TotalDragX,0.5)+20]],Y坐标[[this.y]]

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

  • else if【条件】当Banner模块的X坐标>-500
  • 【动作1】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-670,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为3。

移动:

case4(左侧阻尼)

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

图片 6

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

  • if【条件】Math.abs(TotalDragX)>Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为1

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

  • 【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX<0(移动的方向判断)
  • and【条件4】变量BannerState=1(当前Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

图片 7

选择第一张图片

  • 【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX>0(移动的方向判断)
  • and【条件4】变量BannerState=3(当前Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

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

Banner模块拖动时事件(case1~case6)

函数使用:

归位Banner1的情况:

图片 8

原型下载链接:(上传的原型文件不是完全与这次分享一致,作者后续又加了点特效,Duang!而且作者画图喜欢用动态面板封装母版,层级较多)

图片 9

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

其中,lx为元件X*100的元件文字,ly为元件Y*100的元件文字。🔹为八个图块设置同样的交互即可,X、Y、X*100、Y*100的初始值就是初始空白图块的值,应此=,(X*100,Y*100)=

此需求可以通过判断拖动时的沿X轴与Y轴的距离大小来判断。

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

  1. 用手机自带的浏览器打开链接,添加到home主屏上。

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

  1. DragTime

图片 10关注作者公众号,一起向梦想出发

快速拖动自动至Banner2的情况(由Banner1至Banner2):

OVER,拼图已经做完。

  1. 停止拖动时若为非正常位置,则自动归位

鼠标单击时,IF

case2(归位Banner1的情况)

逻辑描述

  • 【条件】当Banner模块的X坐标>-500
  • 【动作1】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-670,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为3。

Camtasia 2018 录屏及导出gif

  • 【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX<0(移动的方向判断)
  • and【条件4】变量BannerState=2(当前Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为3。

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

case5(由Banner2至Banner1)

原型文件下载链接:

  • if【条件】变量Movable值=1
  • 【动作】拖动时==>>移动:水平拖动

Good Bye!!!

图片 11

Adobe Photoshop CC 2017 处理图片

归位Banner3的情况:

case7(由Banner3至Banner2)

图片 12

case1

快速拖动自动至Banner2的情况(由Banner3至Banner2):

  • 【条件】当Banner模块的X坐标≥-500且≤-160
  • 【动作】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms

同时还需要利用变量来记录判断的结果,其相当于一个开关的作用,需加入到上文的【条件】和【动作】中。

  • 【条件】当Banner模块的X坐标<-160
  • 【动作1】拖动结束时==>>移动Banner模块到Banner1的正常位,X坐标为20,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为1。

Banner模块拖动结束时事件(case1~case8)

拖动结束时,通过判断Banner模块的X坐标来定义归位的Banner位。

在右侧的时候,阻尼的效果在Banner模块往左拖动时出现,所以其TotalDragX的值会是负数,需要加上绝对值函数。

至此,Banner模块的拖动事件以及拖动结束时间基本就可以写全了。合并后如下:

本次分享到此结束,感谢各位同学观看!

回弹效果可与自动归位效果函数写在一起,请往下看。

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

可通过鼠标拖动的距离和拖动的时间来判断。此时需要加入全局变量来记录当前Banner模块的位置数(后面会用到)。

本文由 @Cheese 原创发布于人人都是产品经理。未经许可,禁止转载

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

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

添加全局变量,如名称设为“BannerState”,默认值为1。定义值1=Banner位为1,值2=Banner位为2,值3=Banner位为3。

  1. Math.pow(x,y)

图片 13