起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure9 教程：滑塊控制圖片放大縮小效果
編輯導語：在前面的文章里，作者對使用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 協議
源文件下載: https://pan.baidu.com/s/1TAJQqZ6N5JpKmfg2j947dg 密碼: 3blf