拼圖解鎖是一種出現(xiàn)不久的交互方式，在注冊或登錄的時候，要求用戶水平拖動按鈕，移動拼圖到正確的位置，然后才可以繼續(xù)下一步 ， 這種方式增強了網(wǎng)站的安全性，防止用戶的惡意注冊 。
文章插圖
就連我們的人人都是產(chǎn)品經(jīng)理網(wǎng)站的注冊也是采用這一方式，訪問注冊頁面，可以看到如下圖所示：
文章插圖
拖動拼圖到正確位置才能繼續(xù)下一步，分析一下這個交互過程：
- 鼠標(biāo)移動到圓形按鈕上，上方顯示拼圖圖片
- 按下按鈕開始向右拖動
- 如果拼圖位置正確對上（允許一定的誤差），則顯示通過
- 如果拼圖位置沒有對上，顯示驗證失敗，圓形按鈕和拼圖復(fù)位
顯然，使用Axure也可以實現(xiàn)這種效果，雖然我們有時原型并不需要做得這么真實，但我們可以從中學(xué)習(xí)到一些Axure實戰(zhàn)技巧 。
今天我們就來實現(xiàn)這種交互效果，從這個例子里我們可以學(xué)習(xí)到如下幾點：
- 動態(tài)面板的應(yīng)用：整體對象操作，拖動事件支持
- 沿水平方向移動設(shè)置，移動邊界的限制
- 動態(tài)面板拖動事件、拖動結(jié)束事件、鼠標(biāo)移入/移出事件
- 函數(shù)表達式的用法，數(shù)學(xué)函數(shù)的應(yīng)用
- 條件判斷的應(yīng)用
- 形狀的合并與去除用法
文章插圖
一、界面布局1.水平滑桿（1）添加一個灰色無邊矩形，長寬為300*45，調(diào)整圓角為28
（2）添加個圓形，調(diào)整大小為54*54 ， 放置到矩形左側(cè) ， 選中，右鍵轉(zhuǎn)換為動態(tài)面板，命名為button
完成后的效果圖如下：
2. 圖片部分我們使用一個矩形框代替圖片，使用多個形狀的合并與去除來生成拼圖
（1）在水平滑桿上方添加一個灰色矩形，大小為330*170
（2）添加一個矩形50*50，兩個圓形20*20
文章插圖
（3）選擇正方形和其中一個圓形，在右側(cè)的樣式里選擇合并操作
文章插圖
（4）繼續(xù)選擇合并后的圖片，再選擇另外一個小圓形，在右側(cè)的樣式里選擇去除操作
文章插圖
完成后的圖形如下，用它作為拼圖：
文章插圖
（5）選擇這個拼圖，命名為src，復(fù)制/粘貼一份，命名為dest ， 作為目標(biāo)拼圖，將src順序設(shè)置為最頂層，這樣移動過去時可以覆蓋dest，為了模擬缺失效果，設(shè)置它的有內(nèi)陰影效果：
文章插圖
（6）移動兩個拼圖到指定位置
將第一個拼圖移動到和滑桿上的圓形按鈕起始位置一致的地方，第二個拼圖保持和第一個拼圖的高度位置一致即可 ， 將兩個拼圖和矩形選中，轉(zhuǎn)成動態(tài)面板 ， 命名為image，右鍵設(shè)置為隱藏 。
添加個文本標(biāo)簽，命名為tips，顯示當(dāng)前拖動狀態(tài) 。
現(xiàn)在的界面布局如下：
文章插圖
二、事件處理1.鼠標(biāo)移入移出事件鼠標(biāo)經(jīng)過圓形按鈕時顯示上方動態(tài)面板image，鼠標(biāo)移出時隱藏image：
文章插圖
2. 添加拖動事件拖動按鈕時，只沿水平方向移動按鈕，并限制移動的邊界：
文章插圖
- 選中圓形按鈕動態(tài)面板
- 添加拖動時事件
- 添加移動動作
- 選擇當(dāng)前元件（圓形按鈕動態(tài)面板）
- 移動方式為“水平拖動”
- 添加邊界限制 ， 左側(cè)>=20 ， 右側(cè)<=300
設(shè)置提示信息tips內(nèi)容為“拖動中…”
3. 添加拖動結(jié)束事件在拖動按鈕到右側(cè)松開鼠標(biāo)前 ， 判斷當(dāng)前按鈕和拼圖src之間的距離差，如果在一定范圍內(nèi)（這里是誤差在10以內(nèi)）則認為拼圖正確，否則表示沒有拼上：
文章插圖
- 選擇按鈕
- 添加拖動事件
- 添加條件判斷
- 通過表達式計算
- LVAR1表示拼圖src，LVAR2表示拼圖2
- 兩個拼圖的左邊位置差的絕對值
- 絕對值小于等于10時
- 設(shè)置文字提示為“驗證通過”，并移動按鈕和src拼圖的左邊位置和dest左邊位置相同：
文章插圖
(1)(2)移動當(dāng)前元件（圓形按鈕）和src
(3)通過表達式計算位置
(4)局部變量LVAR1表示目標(biāo)拼圖dest
(5)設(shè)置為[[LVAR1.left]]，即保持和目標(biāo)拼圖左邊位置一致
在拼圖沒有對上時 ， 復(fù)位圓形按鈕和src拼圖到原始位置，即設(shè)置拖動結(jié)束時的另外一個事件分支：
文章插圖
- 添加事件分支（雙擊“拖動結(jié)束時”事件）
- 先設(shè)置提示文字內(nèi)容為“驗證失敗”
- 等待500毫秒
- 移動元件
- 移動當(dāng)前元件（圓形按鈕）和拼圖src
- 移動“回到拖動前位置” ， 添加線性動畫效果，時長100毫秒
4. 動態(tài)面板載入事件考慮到每次目標(biāo)拼圖dest的位置應(yīng)該隨機的，我們定義一個全局變量start，然后設(shè)置一個隨機值，再將dest的x位置移動到這個隨機的位置，達到dest初始位置隨機的效果：
定義全局變量：
文章插圖
動態(tài)面板載入事件：
文章插圖
- 選擇動態(tài)面板
- 添加載入時事件
- 設(shè)置全局變量
- 選擇全局變量start
- 設(shè)置值=[[Math.random()*190+60]] ， 即初始位置為60~250之間
- 移動目標(biāo)拼圖dest到(start,50)位置 ， y方向位置不變
三、F5預(yù)覽到里可以預(yù)覽了，按下F5鍵 ， 鼠標(biāo)移動到圓形按鈕上，上方顯示拼圖，拖動按鈕開始拼圖：
文章插圖
拼圖對上后，顯示驗證通過提示 。
因為內(nèi)容較多，如果沒有達到效果，請仔細檢查每一步的操作哦！
以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!
「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：- Excel自動填充學(xué)號的便捷方法
- Photoshop中的不透明度和填充不透明度有何區(qū)別？
- Excel 2013的自動填充和快速填充功能提升辦公效率
- Excel VBA程序?qū)崿F(xiàn)選擇相同值單元格自動填充顏色
- 利用PS矩形工具實現(xiàn)漸變填充技巧
- 如何在電腦釘釘表格中巧妙運用自動填充功能
- 使用PS智能填充背景，讓照片完美呈現(xiàn)
- 如何在CAD中添加自定義填充圖案
- CorelDRAW軟件圖案填充隨大小縮放教程
- 制作無填充顏色的英文字母教程