起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：拖動(dòng)拼圖解鎖效果制作步驟詳解
本文詳細(xì)介紹了如何用Axure制作拼圖樣式的拖動(dòng)解鎖效果，有需要的小伙伴趕緊學(xué)習(xí)起來(lái)~
用Axure制作拼圖樣式的拖動(dòng)解鎖的效果：
- 拉動(dòng)按鈕直線運(yùn)動(dòng)在一定范圍內(nèi)；
- 拼圖跟隨按鈕直線運(yùn)動(dòng)在一定范圍內(nèi)；
- 按鈕停下來(lái)，如果拼圖位置跟陰影位置的誤差在一定范圍內(nèi)；
- 點(diǎn)擊登錄按鈕跳轉(zhuǎn)到登錄成功頁(yè)面。
一、元件布局
先用圖片處理軟件制作了三片拼圖，兩個(gè)小拼圖是一樣大的，大小拼圖兩者是能合一的，其他的圖標(biāo)從網(wǎng)上下載，圖形可用Axure制作。
記錄下滾動(dòng)條的寬度和位置，這是按鈕和拼圖移動(dòng)的范圍，按鈕元件設(shè)置為動(dòng)態(tài)畫板
二、添加事件
1. 按鈕沿直線在一定范圍內(nèi)移動(dòng)
選中動(dòng)態(tài)面板添加拖動(dòng)時(shí)事件，添加移動(dòng)動(dòng)作
2.? 拼圖跟隨沿直線在一定范圍內(nèi)移動(dòng) ——同按鈕，直接添加動(dòng)作即可
3. 按鈕停下來(lái)，如果拼圖位置跟陰影位置的誤差在一定范圍內(nèi)（技術(shù)小白在這卡了很久）
添加事件拖動(dòng)結(jié)束時(shí)，添加情形（條件），設(shè)置拼圖和拼圖陰影直接距離絕對(duì)值大于等于10，添加動(dòng)作，這個(gè)條件下將產(chǎn)生什么動(dòng)作
重點(diǎn)是第2步，設(shè)置變量和函數(shù)。
設(shè)置局部變量拼圖和拼圖陰影，用函數(shù)math.abs計(jì)算兩個(gè)圖形左側(cè)距離的絕對(duì)值，當(dāng)大于10時(shí)，按鈕退回原處（可以設(shè)具體的位置）。
4.?點(diǎn)擊登錄按鈕跳轉(zhuǎn)到登錄成功頁(yè)面
總結(jié)一下：做這個(gè)效果的難點(diǎn)在于增加了變量和函數(shù)在里面，同時(shí)兩個(gè)判斷條件所產(chǎn)生的位置不同，一個(gè)是按鈕界面一個(gè)是登陸界面。
本文由 @粉小妞Holly 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
看完一篇原型設(shè)計(jì)文章啦，感覺(jué)還是不太會(huì)？
想從0基礎(chǔ)開(kāi)始學(xué)習(xí)Axure么？推薦你找Axure實(shí)戰(zhàn)班的助教小可愛(ài)@CC-起點(diǎn)學(xué)院（微信：qidiancc520），回復(fù)關(guān)鍵詞：大禮包
?? 領(lǐng)取原型設(shè)計(jì)大禮包，多學(xué)多練，你也能成為原型設(shè)計(jì)高手哦！
為什么我設(shè)置的移動(dòng)時(shí)跟隨，圖片不動(dòng)呢
求原型圖奧 ，謝謝大神 1023810445@qq.com
請(qǐng)問(wèn)可以求原型嗎？ 感謝?。?4001357@qq.com
變量和函數(shù)設(shè)置 在那個(gè)控件的什么條件下？
請(qǐng)問(wèn)可以求原型嗎？ 感謝?。?674258163@qq.com
發(fā)你了
收到了 謝謝大神?。?/p>
求原圖，可以麻煩發(fā)我郵箱一份嗎？謝謝2737867469@qq.com
可以求原型圖嗎
你是想要那幾個(gè)拼圖？