編輯導語：在前面的文章裡，作者對使用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】【底部>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 協議