本文詳細(xì)介紹了如何用Axure制作拼圖樣式的拖動解鎖效果，有需要的小伙伴趕緊學(xué)習(xí)起來~

用Axure制作拼圖樣式的拖動解鎖的效果：

1. 拉動按鈕直線運(yùn)動在一定范圍內(nèi)；
2. 拼圖跟隨按鈕直線運(yùn)動在一定范圍內(nèi)；
3. 按鈕停下來，如果拼圖位置跟陰影位置的誤差在一定范圍內(nèi)；
4. 點擊登錄按鈕跳轉(zhuǎn)到登錄成功頁面。

一、元件布局

先用圖片處理軟件制作了三片拼圖，兩個小拼圖是一樣大的，大小拼圖兩者是能合一的，其他的圖標(biāo)從網(wǎng)上下載，圖形可用Axure制作。

記錄下滾動條的寬度和位置，這是按鈕和拼圖移動的范圍，按鈕元件設(shè)置為動態(tài)畫板

二、添加事件

1. 按鈕沿直線在一定范圍內(nèi)移動

選中動態(tài)面板添加拖動時事件，添加移動動作

2.? 拼圖跟隨沿直線在一定范圍內(nèi)移動 ——同按鈕，直接添加動作即可

3. 按鈕停下來，如果拼圖位置跟陰影位置的誤差在一定范圍內(nèi)（技術(shù)小白在這卡了很久）

添加事件拖動結(jié)束時，添加情形（條件），設(shè)置拼圖和拼圖陰影直接距離絕對值大于等于10，添加動作，這個條件下將產(chǎn)生什么動作

重點是第2步，設(shè)置變量和函數(shù)。

設(shè)置局部變量拼圖和拼圖陰影，用函數(shù)math.abs計算兩個圖形左側(cè)距離的絕對值，當(dāng)大于10時，按鈕退回原處（可以設(shè)具體的位置）。

4.?點擊登錄按鈕跳轉(zhuǎn)到登錄成功頁面

總結(jié)一下：做這個效果的難點在于增加了變量和函數(shù)在里面，同時兩個判斷條件所產(chǎn)生的位置不同，一個是按鈕界面一個是登陸界面。

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

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