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

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

一開始的設(shè)計

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

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

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

放大效果優(yōu)化

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

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

在放大到1:3比例時，沒有任何問題，不會影響其他效果，所以無需增加交互動作。

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

這次的優(yōu)化重點是1:2比例。我們新增了兩個文本標簽用于記錄坐標X和Y，分別命名為X和Y。可以考慮將它們設(shè)置為隱藏，方便查看效果。

優(yōu)化交互動作

首先，我們設(shè)置“動態(tài)面板：display”為局部變量LVAR1，因此X坐標為[[LVAR1.x]]，Y坐標為[[LVAR1.y]]。

優(yōu)化判定條件

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

優(yōu)化交互動作

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

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

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

移動到指定位置

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

注意事項

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

結(jié)尾

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