Axure教程:拖動拼圖解鎖效果制作步驟詳解
本文詳細介紹了如何用Axure制作拼圖樣式的拖動解鎖效果,有需要的小伙伴趕緊學習起來~
用Axure制作拼圖樣式的拖動解鎖的效果:
- 拉動按鈕直線運動在一定范圍內;
- 拼圖跟隨按鈕直線運動在一定范圍內;
- 按鈕停下來,如果拼圖位置跟陰影位置的誤差在一定范圍內;
- 點擊登錄按鈕跳轉到登錄成功頁面。
一、元件布局
先用圖片處理軟件制作了三片拼圖,兩個小拼圖是一樣大的,大小拼圖兩者是能合一的,其他的圖標從網上下載,圖形可用Axure制作。
記錄下滾動條的寬度和位置,這是按鈕和拼圖移動的范圍,按鈕元件設置為動態畫板
二、添加事件
1. 按鈕沿直線在一定范圍內移動
選中動態面板添加拖動時事件,添加移動動作
2.? 拼圖跟隨沿直線在一定范圍內移動 ——同按鈕,直接添加動作即可
3. 按鈕停下來,如果拼圖位置跟陰影位置的誤差在一定范圍內(技術小白在這卡了很久)
添加事件拖動結束時,添加情形(條件),設置拼圖和拼圖陰影直接距離絕對值大于等于10,添加動作,這個條件下將產生什么動作
重點是第2步,設置變量和函數。
設置局部變量拼圖和拼圖陰影,用函數math.abs計算兩個圖形左側距離的絕對值,當大于10時,按鈕退回原處(可以設具體的位置)。
4.?點擊登錄按鈕跳轉到登錄成功頁面
總結一下:做這個效果的難點在于增加了變量和函數在里面,同時兩個判斷條件所產生的位置不同,一個是按鈕界面一個是登陸界面。
本文由 @粉小妞Holly 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
看完一篇原型設計文章啦,感覺還是不太會?
想從0基礎開始學習Axure么?推薦你找Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包
?? 領取原型設計大禮包,多學多練,你也能成為原型設計高手哦!
為什么我設置的移動時跟隨,圖片不動呢
求原型圖奧 ,謝謝大神 1023810445@qq.com
請問可以求原型嗎? 感謝!!24001357@qq.com
變量和函數設置 在那個控件的什么條件下?
請問可以求原型嗎? 感謝??!2674258163@qq.com
發你了
收到了 謝謝大神?。?/p>
求原圖,可以麻煩發我郵箱一份嗎?謝謝2737867469@qq.com
可以求原型圖嗎
你是想要那幾個拼圖?