教程宫格拼图如何制作

　　本篇文章通过原型设计工具为大家演示了9宫格拼图效果，看完后别忘了自己动手做一下！
　　效果图
　　使用工具
　　AxureRP9beta绘制原型
　　Camtasia2018录屏及导出gif
　　AdobePhotoshopCC2017处理图片
　　实现逻辑
　　函数使用：
　　〔〔Math。abs（）〕〕：取绝对值
　　aclasstaghrefwiki10008K2N。：代表且，b表示a与b均返回true才返回true
　　：代表或，ab表示a或b任一一个返回true就返回true，否则返回false
　　〔〔this。x〕〕：元件当前横坐标位置
　　〔〔this。y〕〕：元件当前纵坐标位置
　　逻辑描述
　　以上是本案例使用的函数，接下来介绍实现小图块移动的逻辑：（下边内容繁杂，不愿意阅读的同行可以直接下载原型研究哈）我们知道，拼图游戏在操作的过程中，是空白位置相邻的图片移动到空白位置，我们设置每个小图块长宽均为100，那么不难发现，可以移动到空白位置的图片坐标距离空白图片坐标距离为100，那么我们在设置移动条件的时候，就以图片距离为依据。
　　假定某张图片的坐标为（100，200），空白图片的坐标为（0，200），（X1X2）2（Y1Y2）2两图片距离2，按照这样的公式可以判断图片与空白图片的距离是否为100，考虑到这样的公式很难在Axure内表达，因此我们简化公式：
　　X1X2100且Y1Y20时图块可移动
　　X1X20且Y1Y2100时图块可移动
　　否则，图块无法移动，此时当鼠标单击元件时，判断是否符合移动条件，移动条件转化为Axure语言就是：
　　〔〔Math。abs（This。y100ly）0Math。abs（lxThis。x100）1Math。abs（This。y100ly）1Math。abs（lxThis。x100）0〕〕
　　其中，lx和ly是我们设置的局部变量，具体含义下文继续描述。
　　图片移动的逻辑基本成型，接下来说说如何记录空白图片的位置：我们画出四个框，命名为X，Y，X100，Y100，分别代表当前空白位置的位置及坐标，坐标我们用距离表示，位置我们用0、1、2表示，如下图所示，图片的坐标和位置可以一一对应：
　　上图中写出了四个方块的位置和坐标，其他的以此类推。下面也就是最后的记录方式了，记录方式在这里不啰嗦，大家自行下载原型相信很容易便可以理解。
　　另外，如何打乱图片本次先不做教程，下期再行补充。
　　实现步骤
　　新建动态面板，用于放置九宫格图片。
　　接下来算了，啰里啰嗦的描述，自己看着都累了，直接上截图
　　选择第一张图片
　　鼠标单击时，IF
　　设置文本：
　　其中，lx为元件X的元件文字，ly为元件Y的元件文字。设置文本，
　　移动：
　　其中，lx为元件X100的元件文字，ly为元件Y100的元件文字。