Axure教程:拖動拼圖解鎖效果制作步驟詳解

11 評論 2707 瀏覽 17 收藏 4 分鐘

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

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

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

一、元件布局

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

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

二、添加事件

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

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

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

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

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

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

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

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

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

 

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看完一篇原型設計文章啦,感覺還是不太會?

    想從0基礎開始學習Axure么?推薦你找Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    ?? 領取原型設計大禮包,多學多練,你也能成為原型設計高手哦!

    來自廣東 回復
  2. 為什么我設置的移動時跟隨,圖片不動呢

    回復
  3. 求原型圖奧 ,謝謝大神 1023810445@qq.com

    回復
  4. 請問可以求原型嗎? 感謝!!24001357@qq.com

    來自菲律賓 回復
  5. 變量和函數設置 在那個控件的什么條件下?

    來自上海 回復
  6. 請問可以求原型嗎? 感謝??!2674258163@qq.com

    來自福建 回復
    1. 發你了

      來自廣東 回復
    2. 收到了 謝謝大神?。?/p>

      來自福建 回復
    3. 求原圖,可以麻煩發我郵箱一份嗎?謝謝2737867469@qq.com

      回復
  7. 可以求原型圖嗎

    來自重慶 回復
    1. 你是想要那幾個拼圖?

      來自廣東 回復