Axure制作淘寶商品圖片放大預覽效果原型的步驟:
(1)準備材料。以淘寶為例，本文準備了三張展示圖片，左邊距設置為50，圖片尺寸設置為500*500。左下角的小圖是150*150三張圖片的縮小尺寸。具體布局頁面如下。
(2)將左邊的三個大圖轉換成壹個動態面板，命名為“左面板1”，設置三個狀態，每個狀態壹張圖片，圖片的順序要和左下角小圖的順序壹樣。具體情況如下
(3)做壹個預覽區，拉壹個矩形組件命名為“預覽區”，設置大小為200*200，填充壹種顏色。透明度調整50%，放在左邊大圖。
與左面板1的動態面板壹起轉化為動態面板，命名為“左面板2”。進入該狀態後，矩形框的預覽區域被設置為隱藏。
(4)在預覽區的放大區域制作圖片內容，然後拉壹個名為“右面板1”的動態面板，設置三種狀態，每種狀態放三張圖片中的壹張，順序和左下角前面的小圖壹樣。右鍵單擊面板以設置“自適應內容”。
要點:設置每種狀態下照片的大小，因為放大區域顯示的是預覽區域的放大圖片，即左預覽框大小/左圖片大小=右面板大小/右圖片大小，右圖片大小為1250 * 1250；
(5)做壹個放大的顯示區域，拉壹個矩形組件命名為“右面板2”，設置大小為500*500，轉換成動態面板。將前面的“右面板1”動態面板放到“右面板2”動態面板中，將位置放在右側對應左面板的位置。默認情況下設置為隱藏。
(6)另外我們需要壹個動態面板，拉壹個動態面板命名為“循環狀態”，至少設置兩個狀態。確保我們的動作能跑起來。隨意擺放。我把它放在左邊的空白處。
(7)所有材料準備完畢，我們準備進入互動制作環節。想象壹下上面我的思維導圖中提到的效果，先實現第1個效果，即點擊左邊的三個小圖，“左面板2”會顯示“左面板1”對應的大圖內容，而“右面板2”對應的內容會顯示在放大的區域。
(8)接下來，實現第二次鼠標移動後的交互效果。
即鼠標進入大圖時顯示預覽區和放大區，鼠標移開時隱藏預覽區和放大區。點擊“左面板2”設置鼠標移入和移出時的交互。之前，我們已經將兩者都設置為隱藏狀態，並在全部完成後預覽調試效果。
(9)接下來進入最重要的第三種效果，即進入左面板時顯示預覽區，在放大區顯示預覽區圖片的放大效果。讓我們讓動態面板在運行前創建“循環狀態”，如下所示。
(10)接下來，設置動態面板的“循環狀態”，狀態變化時進行交互。這時候就需要分兩步來看了。我們先來實現左面板預覽區在狀態變化時可以移動的效果，添加壹個交互，選擇“狀態變化時”。
(11)接下來，當狀態發生變化時，添加交互，選擇移動交互，這樣才能保證預覽區域在大圖內移動，所以需要設置邊界。邊界是左面板區域500*500的尺寸範圍。
這裏我們需要使用鼠標功能光標。為了確保移動對應於預覽區域的中心，
移動預覽邊框，x值:[[cursor.x-左面板65438的x坐標+0-預覽邊框x大小的壹半]]，y值設置方法相同；
我這裏設置的是[[Cursor.x-150]](因為我的邊距是200*200 100=150的整個預覽區域的50+壹半)。
(12)最後設置移動預覽區域，然後放大區域在預覽區域的相同位置顯示放大的圖片。我們還需要在移動時設置右邊面板的邊界。主要是如何計算移動的X值和Y值。
同理，我們可以得出，移動右面板2時，x值為[[-(cursor.x-150)*2.5]]，y值相同。
有些同學可能會疑惑，為什麽會有負號，主要是為了保證位置的相對性，也就是當預覽區域移動到左上角的時候，放大的區域其實相當於移動到右下角，這樣可以保證位置不變。
問題:為什麽壹定要乘以2.5？知道答案的同學可以私信我或者在下面評論。
(13)以上步驟都達到了放大預覽區圖片的效果。我們需要不斷的預覽和調試來確定效果。
好的，關於“Axure如何做出淘寶商品圖片放大預覽效果的原型？”今天分享到這裏。希望妳能從中有所收獲！Axure學習，Axure相關文章，Axure自學視頻課都是不錯的選擇！如果對單詞理解能力強，個人推薦Axure文章學習；不過如果妳想專業學習Axure，我還是推薦妳選擇Axure自學視頻課系統學！不僅可以更清晰更有條理，每個人也可以利用自己的碎片化時間去學習！