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

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

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

一、元件布局

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

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

二、添加事件

1. 按鈕沿直線在一定范圍內移動

選中動態面板添加拖動時事件，添加移動動作

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

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

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

重點是第2步，設置變量和函數。

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

4.?點擊登錄按鈕跳轉到登錄成功頁面

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

本文由 @粉小妞Holly 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議