在之前的文章中，我們介紹了如何使用Axure模擬地圖放大效果。然而，在設(shè)置好交互動(dòng)作后，發(fā)現(xiàn)當(dāng)圖片縮小時(shí)，會(huì)出現(xiàn)圖片消失或者顯示部分圖片的問(wèn)題。實(shí)際上，這些消失的圖片只是被隱藏在可視范圍外，那么如何將

在之前的文章中，我們介紹了如何使用Axure模擬地圖放大效果。然而，在設(shè)置好交互動(dòng)作后，發(fā)現(xiàn)當(dāng)圖片縮小時(shí)，會(huì)出現(xiàn)圖片消失或者顯示部分圖片的問(wèn)題。實(shí)際上，這些消失的圖片只是被隱藏在可視范圍外，那么如何將圖片移動(dòng)回可視范圍內(nèi)成為了一個(gè)難點(diǎn)，關(guān)鍵在于確定臨界點(diǎn)。

一開(kāi)始的設(shè)計(jì)

在最初的設(shè)計(jì)中，我們將放大比例設(shè)置為1:5。因此，當(dāng)縮小到2倍時(shí)，圖片消失會(huì)非常明顯。而縮小比率不大時(shí)，消失效果相對(duì)較少。因此，我們可以通過(guò)增加放大缺陷來(lái)解決這個(gè)問(wèn)題。

導(dǎo)入現(xiàn)有控件

首先，我們需要導(dǎo)入之前設(shè)計(jì)好的控件?？梢詤⒖家韵骆溄舆M(jìn)行操作。

放大效果優(yōu)化

在1:1比例下，還原到初始狀態(tài)，因此圖片始終位于中心位置。所以只需要新增一個(gè)移動(dòng)動(dòng)作，將“動(dòng)態(tài)面板：display”移動(dòng)到坐標(biāo)(0, 0)即可。

優(yōu)化1:3比例

在放大到1:3比例時(shí)，沒(méi)有任何問(wèn)題，不會(huì)影響其他效果，所以無(wú)需增加交互動(dòng)作。

優(yōu)化1:2比例

這次的優(yōu)化重點(diǎn)是1:2比例。我們新增了兩個(gè)文本標(biāo)簽用于記錄坐標(biāo)X和Y，分別命名為X和Y?？梢钥紤]將它們?cè)O(shè)置為隱藏，方便查看效果。

優(yōu)化交互動(dòng)作

首先，我們?cè)O(shè)置“動(dòng)態(tài)面板：display”為局部變量LVAR1，因此X坐標(biāo)為[[LVAR1.x]]，Y坐標(biāo)為[[LVAR1.y]]。

優(yōu)化判定條件

接下來(lái)，我們?cè)O(shè)置“動(dòng)態(tài)面板：display”和“動(dòng)態(tài)面板：area”為局部變量LVAR1和LVAR2。判定條件為[[LVAR1.x]] < [[LVAR2.width-LVAR1.width]]。

優(yōu)化交互動(dòng)作

如果滿足判定條件，即LVAR1.x小于等于LVAR2.width-LVAR1.width，我們將X值設(shè)置為[[LVAR2.width-LVAR1.width]]。

優(yōu)化判定條件和交互動(dòng)作

對(duì)于Y軸的優(yōu)化也是類似的。設(shè)置判定條件為[[LVAR1.y]] < [[LVAR2.height-LVAR1.height]]，如果滿足條件，則將Y值設(shè)置為[[LVAR2.height-LVAR1.height]]。

移動(dòng)到指定位置

最后，我們可以通過(guò)移動(dòng)“動(dòng)態(tài)面板：display”到指定的位置（X，Y）來(lái)實(shí)現(xiàn)優(yōu)化效果。移動(dòng)方式為到達(dá)，動(dòng)畫(huà)設(shè)置為無(wú)。

注意事項(xiàng)

需要注意的是，所有的判定條件和交互動(dòng)作都是使用if語(yǔ)句進(jìn)行判斷，而不是else if。雖然看起來(lái)判斷和交互動(dòng)作很簡(jiǎn)單，但前期的邏輯設(shè)計(jì)非常重要。我曾經(jīng)為了找回“丟失”的圖片，畫(huà)了一遍遍的示意圖，進(jìn)行了反復(fù)測(cè)試，最后才采用了這種比較笨拙的方式。

結(jié)尾

經(jīng)過(guò)優(yōu)化后，地圖放大的效果得到了解決。如果你覺(jué)得本文對(duì)你有幫助，請(qǐng)投個(gè)票并給個(gè)贊哦！