Axure入门与基础之制作九宫格拼图
沉沙 2019-01-08 来源 : 阅读 2713 评论 0

摘要:本篇教程探讨了Axure入门与基础之制作九宫格拼图 ,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇教程探讨了Axure入门与基础之制作九宫格拼图 ,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

Axure入门与基础之制作九宫格拼图

<

    本篇文章通过原型设计工具为大家演示了9宫格拼图效果,看完后别忘了自己动手做一下!

使用工具

Axure RP 9 beta 绘制原型

Camtasia 2018 录屏及导出gif

Adobe Photoshop CC 2017 处理图片
实现逻辑
函数使用:

    [[Math.abs( )]]:取绝对值
    &&:代表“且”,a&& b 表示a与b均返回true才返回true
    || :代表“或”,a||b 表示a或b任一一个返回true就返回true,否则返回false
    [[this.x]]:元件当前横坐标位置
    [[this.y]]:元件当前纵坐标位置

逻辑描述

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

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

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

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

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

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

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

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

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

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

    新建动态面板,用于放置九宫格图片。
    接下来......算了,啰里啰嗦的描述,自己看着都累了,直接上截图

选择第一张图片

鼠标单击时,IF

设置文本:

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

移动:

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

OVER,拼图已经做完。
   

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程