編輯導語：在前面的文章里，作者對使用Axure9拖動滑塊確定評分區間效果進行了展示，《Axure9 教程：拖動滑塊確定評分區間效果》。這篇文章里，作者又使用Axure9對滑塊控制圖片放大縮小進行了效果展示。讓我們一起來看一下。

圖片的放大縮小顯示是網站經常見到的效果，在之前的教程中我們已經講過滑動條的制作方法，今天我們以網站中常見的編輯頭像功能為例，使用Axure9制作一個滑塊滑動控制圖片放大縮小的效果。

一、交互效果說明

• 拖動滑塊，滑塊可在灰色背景條的范圍內滑動，并且圖片隨著滑塊滑動的距離等比例放大縮小。
• 在中間頭像預覽區域內可以拖動圖片在一定范圍內拖動，以便用戶選取所需的頭像部分。

二、元件準備

01

拖入一個動態面板，命名為「拖動區域」，調整大小為：300*300px，填充顏色為：CCCCCC。

雙擊進入動態面板，拖入一張【圖片】元件，命名為「pic」，設置大小為：300*150px，設置坐標為（0，75）。

02

只有中間區域為頭像效果預覽區域，所以我們可以拖入四個填充顏色為：ffffff，透明度為80%【矩形】元件置于「拖動區域」上層作為蒙層。

03

拖入一個【圓形】元件，調整顏色和大小，右鍵轉化為動態面板，命名為「slider」。

拖入一個【矩形】元件，長度為300px，置于「slider」下層，選中此元件及「slider」右鍵轉換為動態面板，命名為「滑動條」。

三、添加交互效果

01

給動態面板「拖動區域」添加【拖動時】的效果，目標為圖片「pic」，選擇【跟隨拖動】。

點擊【更多選項】，添加邊界【左側<75】【右側>225】【頂部<75】【底部>225】。

02

給滑塊「slider」添加【拖動時】的交互，移動「slider」【跟隨水平拖動】，點擊【更多選項】，添加邊界【左側≥0】【右側≤330】。

03

繼續在滑塊「slider」【拖動時】的交互中，添加【設置尺寸】的動作，目標為圖片「pic」，寬度值為[[This.x*2+300]]，高度值為[[pic.width/2]]。

這里我們設置圖片最大值為初始尺寸的3倍，即900*450px，我們可以得到一個等式，滑塊「slider」的x坐標值/灰色背景條總長度=圖片最大寬度-圖片當前寬度/圖片寬度最大變化值。

由此得出圖片寬度隨著滑動拖動始終為：[[This.x*2+300]]。

因為寬度始終為高度的2倍，所以圖片的高度為：[[pic.width/2]]。

本文由 @Daisy 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議