Axure教程:原型實戰之模擬拼圖效果(變量、動態面板、參數…全面實戰應用)

18 評論 17180 瀏覽 62 收藏 7 分鐘

文章分享的這個原型設計涉及到了許多Axure的核心知識模塊,對于Axure的使用有了非常深層次的認知,本案例適合Axure高級使用者觀看學習。

背景介紹

這是一個可玩性不高的拼圖游戲,但是貴在用Axure做出來,中間涉及到了許多Axure的核心知識模塊,比如:中繼器、各類函數、時間、動態面板等等,對于Axure的使用有了非常深層次的認知,本案例適合Axure高級使用者觀看學習。

 

實現步驟

一、準備工作

準備工作,主要分為幾個模塊:

1.1、準備原材料

準備拼圖的原始圖片,自己上網下載(也可下載本文提供的材料附件)。

1.2、切割分區

將原圖均勻的切割為9宮格(利用Axure自帶的切割工具即可完成切割)

 

1.3、正確排布圖制作

將原圖縮小為150×150(大小可自定義),然后按照九宮格的形式,標記上數字,分別為1、2、3、4、5、6、7、8、9,圖片下方寫上提示文字(文本控件),命名為point(用來展示拼圖結果),在提示文字的下方做一個文本計時器,默認初始值為120S,命名為time-count(計時器通過控制動態面板的顯示和隱藏來實現),控制計時器的動態面板命名為d-command。

1.4、制作實時位置表

首先創建9個新的全局變量,分別代表九宮格的九張圖片,依次為num1=1、num2=2、num3=3、num4=4、num5=5、num6=6、num7=7、num8=8、num9=9,默認num1+num2+…num3=45,拼圖完成,成功。(不理解這段話,請看排布成功的圖)

1.5、創建拼圖區域

將原圖切割為九宮格,并按照排布正確的縮略圖進行標號,將圖8刪除,拖入一個同樣大小的矩形框,用來代替圖8.

1.6、設置拼圖規則

圖8為空白色塊,請拖動其他色塊朝色塊8移動。色塊8本身不能移動。拼圖的時長為120S。

二、實現效果

2.1、倒計時鐘表+實時位置表

當動態面板d-command顯示時,兩種情況:1、如果time-count>0時,設置time-count每隔一秒自動遞減1,用到公式[[LVAR1-1]]。2、如果num1=1…num9=9,設置提示文字point內容為“恭喜你,拼對了!”

2.2、拖動效果實現

首先搞明白一點,九宮格的每一塊都有四種拖動可能:向左拖動、向右拖動、向上拖動、向下拖動,因此除了圖8,對于其他幾塊圖形,都要進行邏輯判斷,判斷的依據就是拖動結束后,被拖動的色塊位于什么位置,位于哪個位置,代表色塊的變量的值就等于幾,依據此,實現對拖動效果的判斷。

以色塊6為例進行說明,色塊6拖動的過程中,可能出現在九宮格的任何地方,因此就要對所有的情況進行條件判斷,同時無論色塊6出現在什么地方,色塊8肯定是和它相鄰的,因此依據此,就可以判斷拖動的結果是否和正確的排布相同。(條件非常多,有點復雜,這里就不一一截取了,具體可以下載原文件查看)

向左移動條件判斷如下:

向右移動條件判斷如下:

向上拖動條件判斷如下:

向下拖動條件判斷:

還有很重要的一點,就是1,4,7不能向左拖動,1,2,3不能向上拖動,3,6,9不能向右移動,7,8,9不能向下移動。

源文件下載:拼圖game.rp

 

本文由 @神奈川00 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 作者你好,這個rp文件錯誤,無法下載

    來自四川 回復
  2. 你好

    來自四川 回復
  3. 我是新手求帶,這些有點看不懂

    回復
  4. 打不開

    回復
  5. 我居然學會了 哎媽呀

    來自廣東 回復
    1. 可以,厲害????????????????

      回復
    2. rp文件不能下載,作者,能發一份嘛

      來自四川 回復
    3. 請教個問題 那種三位數是啥意思 像什么696,581

      來自上海 回復
  6. 這有啥用?炫技?

    來自廣東 回復
  7. 實現的確實挺好的,但是個人覺得不要只局限于畫原型,它只是一個表達工具。不要在工具上花費太多的時間。

    來自浙江 回復
  8. 這有啥用?

    來自浙江 回復
  9. 倪馬海 倪馬海~~~

    來自廣東 回復
  10. 6到飛起~~~~~~~~~ ??

    來自江蘇 回復
  11. 666

    來自廣東 回復
  12. 666666

    來自北京 回復
  13. 666

    來自河南 回復
  14. 666

    來自河北 回復
  15. 999

    來自河南 回復