編輯導(dǎo)語(yǔ)：在前面的文章里，作者對(duì)使用Axure9拖動(dòng)滑塊確定評(píng)分區(qū)間效果進(jìn)行了展示，《Axure9 教程：拖動(dòng)滑塊確定評(píng)分區(qū)間效果》。這篇文章里，作者又使用Axure9對(duì)滑塊控制圖片放大縮小進(jìn)行了效果展示。讓我們一起來(lái)看一下。

圖片的放大縮小顯示是網(wǎng)站經(jīng)常見(jiàn)到的效果，在之前的教程中我們已經(jīng)講過(guò)滑動(dòng)條的制作方法，今天我們以網(wǎng)站中常見(jiàn)的編輯頭像功能為例，使用Axure9制作一個(gè)滑塊滑動(dòng)控制圖片放大縮小的效果。

一、交互效果說(shuō)明

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

二、元件準(zhǔn)備

01

拖入一個(gè)動(dòng)態(tài)面板，命名為「拖動(dòng)區(qū)域」，調(diào)整大小為：300*300px，填充顏色為：CCCCCC。

雙擊進(jìn)入動(dòng)態(tài)面板，拖入一張【圖片】元件，命名為「pic」，設(shè)置大小為：300*150px，設(shè)置坐標(biāo)為（0，75）。

02

只有中間區(qū)域?yàn)轭^像效果預(yù)覽區(qū)域，所以我們可以拖入四個(gè)填充顏色為：ffffff，透明度為80%【矩形】元件置于「拖動(dòng)區(qū)域」上層作為蒙層。

03

拖入一個(gè)【圓形】元件，調(diào)整顏色和大小，右鍵轉(zhuǎn)化為動(dòng)態(tài)面板，命名為「slider」。

拖入一個(gè)【矩形】元件，長(zhǎng)度為300px，置于「slider」下層，選中此元件及「slider」右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為「滑動(dòng)條」。

三、添加交互效果

01

給動(dòng)態(tài)面板「拖動(dòng)區(qū)域」添加【拖動(dòng)時(shí)】的效果，目標(biāo)為圖片「pic」，選擇【跟隨拖動(dòng)】。

點(diǎn)擊【更多選項(xiàng)】，添加邊界【左側(cè)<75】【右側(cè)>225】【頂部<75】【底部>225】。

02

給滑塊「slider」添加【拖動(dòng)時(shí)】的交互，移動(dòng)「slider」【跟隨水平拖動(dòng)】，點(diǎn)擊【更多選項(xiàng)】，添加邊界【左側(cè)≥0】【右側(cè)≤330】。

03

繼續(xù)在滑塊「slider」【拖動(dòng)時(shí)】的交互中，添加【設(shè)置尺寸】的動(dòng)作，目標(biāo)為圖片「pic」，寬度值為[[This.x*2+300]]，高度值為[[pic.width/2]]。

這里我們?cè)O(shè)置圖片最大值為初始尺寸的3倍，即900*450px，我們可以得到一個(gè)等式，滑塊「slider」的x坐標(biāo)值/灰色背景條總長(zhǎng)度=圖片最大寬度-圖片當(dāng)前寬度/圖片寬度最大變化值。

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

因?yàn)閷挾仁冀K為高度的2倍，所以圖片的高度為：[[pic.width/2]]。

本文由 @Daisy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議