拼圖解鎖是一種出現不久的交互方式，在注冊或登錄的時候，要求用戶水平拖動按鈕，移動拼圖到正確的位置，然后才可以繼續下一步，這種方式增強了網站的安全性，防止用戶的惡意注冊。

就連我們的人人都是產品經理網站的注冊也是采用這一方式，訪問注冊頁面，可以看到如下圖所示：

拖動拼圖到正確位置才能繼續下一步，分析一下這個交互過程：

1. 鼠標移動到圓形按鈕上，上方顯示拼圖圖片
2. 按下按鈕開始向右拖動
3. 如果拼圖位置正確對上（允許一定的誤差），則顯示通過
4. 如果拼圖位置沒有對上，顯示驗證失敗，圓形按鈕和拼圖復位

圓形按鈕只會沿水平方向移動，而且只能在滑桿范圍內移動。

顯然，使用Axure也可以實現這種效果，雖然我們有時原型并不需要做得這么真實，但我們可以從中學習到一些Axure實戰技巧。

今天我們就來實現這種交互效果，從這個例子里我們可以學習到如下幾點：

1. 動態面板的應用：整體對象操作，拖動事件支持
2. 沿水平方向移動設置，移動邊界的限制
3. 動態面板拖動事件、拖動結束事件、鼠標移入/移出事件
4. 函數表達式的用法，數學函數的應用
5. 條件判斷的應用
6. 形狀的合并與去除用法

完成后的效果圖如下：

點擊這里查看在線演示

一、界面布局

1.水平滑桿

（1）添加一個灰色無邊矩形，長寬為300*45，調整圓角為28

（2）添加個圓形，調整大小為54*54，放置到矩形左側，選中，右鍵轉換為動態面板，命名為button

完成后的效果圖如下：

2. 圖片部分

我們使用一個矩形框代替圖片，使用多個形狀的合并與去除來生成拼圖

（1）在水平滑桿上方添加一個灰色矩形，大小為330*170

（2）添加一個矩形50*50，兩個圓形20*20

（3）選擇正方形和其中一個圓形，在右側的樣式里選擇合并操作

（4）繼續選擇合并后的圖片，再選擇另外一個小圓形，在右側的樣式里選擇去除操作

完成后的圖形如下，用它作為拼圖：

（5）選擇這個拼圖，命名為src，復制/粘貼一份，命名為dest，作為目標拼圖，將src順序設置為最頂層，這樣移動過去時可以覆蓋dest，為了模擬缺失效果，設置它的有內陰影效果：

（6）移動兩個拼圖到指定位置

將第一個拼圖移動到和滑桿上的圓形按鈕起始位置一致的地方，第二個拼圖保持和第一個拼圖的高度位置一致即可，將兩個拼圖和矩形選中，轉成動態面板，命名為image，右鍵設置為隱藏。

添加個文本標簽，命名為tips，顯示當前拖動狀態。

現在的界面布局如下：

二、事件處理

1.鼠標移入移出事件

鼠標經過圓形按鈕時顯示上方動態面板image，鼠標移出時隱藏image：

2. 添加拖動事件

拖動按鈕時，只沿水平方向移動按鈕，并限制移動的邊界：

1. 選中圓形按鈕動態面板
2. 添加拖動時事件
3. 添加移動動作
4. 選擇當前元件（圓形按鈕動態面板）
5. 移動方式為“水平拖動”
6. 添加邊界限制，左側>=20，右側<=300

同理選擇拼圖src，設置同樣的操作，這樣保證了拖動按鈕時的同步移動。

設置提示信息tips內容為“拖動中…”

3. 添加拖動結束事件

在拖動按鈕到右側松開鼠標前，判斷當前按鈕和拼圖src之間的距離差，如果在一定范圍內（這里是誤差在10以內）則認為拼圖正確，否則表示沒有拼上：

1. 選擇按鈕
2. 添加拖動事件
3. 添加條件判斷
4. 通過表達式計算
5. LVAR1表示拼圖src，LVAR2表示拼圖2
6. 兩個拼圖的左邊位置差的絕對值
7. 絕對值小于等于10時
8. 設置文字提示為“驗證通過”，并移動按鈕和src拼圖的左邊位置和dest左邊位置相同：

(1)(2)移動當前元件（圓形按鈕）和src

(3)通過表達式計算位置

(4)局部變量LVAR1表示目標拼圖dest

(5)設置為[[LVAR1.left]]，即保持和目標拼圖左邊位置一致

在拼圖沒有對上時，復位圓形按鈕和src拼圖到原始位置，即設置拖動結束時的另外一個事件分支：

1. 添加事件分支（雙擊“拖動結束時”事件）
2. 先設置提示文字內容為“驗證失敗”
3. 等待500毫秒
4. 移動元件
5. 移動當前元件（圓形按鈕）和拼圖src
6. 移動“回到拖動前位置”，添加線性動畫效果，時長100毫秒

4. 動態面板載入事件

考慮到每次目標拼圖dest的位置應該隨機的，我們定義一個全局變量start，然后設置一個隨機值，再將dest的x位置移動到這個隨機的位置，達到dest初始位置隨機的效果：

定義全局變量：

動態面板載入事件：

1. 選擇動態面板
2. 添加載入時事件
3. 設置全局變量
4. 選擇全局變量start
5. 設置值=[[Math.random()*190+60]]，即初始位置為60~250之間
6. 移動目標拼圖dest到(start,50)位置，y方向位置不變

三、F5預覽

到里可以預覽了，按下F5鍵，鼠標移動到圓形按鈕上，上方顯示拼圖，拖動按鈕開始拼圖：

拼圖對上后，顯示驗證通過提示。

因為內容較多，如果沒有達到效果，請仔細檢查每一步的操作哦！

整個例子已經完成，到這里去下載源文件吧：

作者鏈接: http://pan.baidu.com/s/1jHAbPK6 密碼: 5khn

官方鏈接: http://pan.baidu.com/s/1nuT8AzZ 密碼: pfzj

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。