优化Axure设计：解决“地图放大”中图片消失的问题
在之前的文章中，我们介绍了如何使用Axure模拟地图放大效果。然而，在设置好交互动作后，发现当图片缩小时，会出现图片消失或者显示部分图片的问题。实际上，这些消失的图片只是被隐藏在可视范围外，那么如何将图片移动回可视范围内成为了一个难点，关键在于确定临界点。
一开始的设计
在最初的设计中，我们将放大比例设置为1:5。因此，当缩小到2倍时，图片消失会非常明显。而缩小比率不大时，消失效果相对较少。因此，我们可以通过增加放大缺陷来解决这个问题。
导入现有控件
首先，我们需要导入之前设计好的控件。可以参考以下链接进行操作。
放大效果优化
在1:1比例下，还原到初始状态，因此图片始终位于中心位置。所以只需要新增一个移动动作，将“动态面板：display”移动到坐标(0, 0)即可。
优化1:3比例
在放大到1:3比例时，没有任何问题，不会影响其他效果，所以无需增加交互动作。
优化1:2比例
这次的优化重点是1:2比例。我们新增了两个文本标签用于记录坐标X和Y，分别命名为X和Y。可以考虑将它们设置为隐藏，方便查看效果。
优化交互动作
首先，我们设置“动态面板：display”为局部变量LVAR1，因此X坐标为[[LVAR1.x]]，Y坐标为[[LVAR1.y]]。
优化判定条件
接下来，我们设置“动态面板：display”和“动态面板：area”为局部变量LVAR1和LVAR2。判定条件为[[LVAR1.x]] < [[LVAR2.width-LVAR1.width]]。
优化交互动作
如果满足判定条件，即LVAR1.x小于等于LVAR2.width-LVAR1.width，我们将X值设置为[[LVAR2.width-LVAR1.width]]。
优化判定条件和交互动作
对于Y轴的优化也是类似的。设置判定条件为[[LVAR1.y]] < [[LVAR2.height-LVAR1.height]]，如果满足条件，则将Y值设置为[[LVAR2.height-LVAR1.height]]。
移动到指定位置
最后，我们可以通过移动“动态面板：display”到指定的位置（X，Y）来实现优化效果。移动方式为到达，动画设置为无。
注意事项
需要注意的是，所有的判定条件和交互动作都是使用if语句进行判断，而不是else if。虽然看起来判断和交互动作很简单，但前期的逻辑设计非常重要。我曾经为了找回“丢失”的图片，画了一遍遍的示意图，进行了反复测试，最后才采用了这种比较笨拙的方式。
结尾
经过优化后，地图放大的效果得到了解决。如果你觉得本文对你有帮助，请投个票并给个赞哦！
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
