Axure8.0小案例:手把手教你畫挖掘機

Bin
69 評論 40375 瀏覽 533 收藏 10 分鐘

前段時間通過Axure8.0繪制出電動機模型,并鼓勵大家繼續(xù)玩Axure8.0最好玩壞它。這幾天利用業(yè)余時間繪制了兩個好玩作品——挖掘機和坦克模型。額,別問我是不是山東來的。自從制作這個以后,感覺自己挖掘機技術(shù)已經(jīng)爐火純青了,拿到藍翔的畢業(yè)證書應(yīng)該不成問題!

廢話少說,先上挖掘機吧。

wajueji

我們先來看看這個原型難在哪。熟悉Axure8.0的童鞋不難看出:原型主要利用矩形“改變形狀”來繪制總體的和每個零件的輪廓。用“旋轉(zhuǎn)”事件來讓挖掘機動起來。沒有什么新鮮的知識點,而難點則在于細微零件的成型和各部位零件的交互事件的時間控制(當(dāng)然設(shè)計完成之后還要學(xué)會怎么操作這部挖掘機,確保它操作起來動作流暢自然)??简灥哪耸羌毿暮湍托某潭?,簡稱“匠心”!

我們來拆解一下這個原型是如何實現(xiàn)的。

一、如何成型

挖掘機由車輪、履帶、車身、機械臂四大部分組成的。

車輪

(由2個動力輪和6個小輪子組成)

如下圖所示,由矩形經(jīng)過以下幾個步驟形成動力輪。

  1. 拉出一個矩形
  2. 將矩形變形成梯形調(diào)整梯形尺寸記得細長一點這是,并復(fù)制梯形,將第二個梯形轉(zhuǎn)動180°
  3. 將兩個梯形拉在一起,底邊重合,然后選擇“合并”將兩個形狀合并形成c的形狀
  4. 將形狀c復(fù)制出一個c’,并將新復(fù)制出來的形狀c’轉(zhuǎn)動90°
  5. 將相互垂直的兩個形狀c對齊合并形狀,形成形狀e
  6. 案例中動力輪有20個齒,因此需要5個形狀e旋轉(zhuǎn)合并,360°/20=18°計算得知5個e每個旋轉(zhuǎn)角度遞增18°對齊合并
  7. 兩個圓形合并而成
  8. 將f和g通過形狀整合得出動力輪h(g和h的高度和寬度像素要同是奇數(shù)或偶數(shù),否則無法對齊)

lunzi

制作完成后將該形狀轉(zhuǎn)化為動態(tài)面板并命名為“前動力輪”,復(fù)制一個“后動力輪”。(以動態(tài)面板的形式存在是為了后續(xù)更順利地用旋轉(zhuǎn)事件驅(qū)動它),至于小輪子的形狀比較簡單在此不做詳述。

履帶

履帶轉(zhuǎn)動的原理其實只是一個錯覺,利用動態(tài)面板兩個顏色相反的狀態(tài)循環(huán)切換制造出履帶傳動的錯覺。知道了這個原理之后剩下的就是如何畫履帶的問題了。如下圖所示,履帶有abcd四個部分組成,也不難看出abcd四部分都由若干個梯形排列而成:

lvdai1

a. 對應(yīng)的是動力輪的一半,也就是說由10個梯形按照傾斜18°遞增排列出來的。而值得一提的是,由于履帶是卡在動力輪輪齒之間的,因此第一個梯形的傾斜度應(yīng)該為9°,以此類推,a這10個梯形的傾斜角度分別為9°27°45°63°81°99°117°135°153°171°

b. 當(dāng)a排列完畢后只需組合并復(fù)制一個a’將新復(fù)制出來的a’整體角度旋轉(zhuǎn)180°便可得到b

c/d. 用同等大小的梯形按照合適的距離對齊即可

當(dāng)abcd四部分準(zhǔn)備完畢后開始著色,最終形成一黑一白相間的效果,需要注意的是,整體梯形的個數(shù)必須是偶數(shù),否則會出現(xiàn)兩個同樣顏色相鄰的錯誤。如果出現(xiàn)奇數(shù)建議在c或d中增減梯形個數(shù)。abcd組裝完畢后,再復(fù)制另一組梯形,著相反的顏色,將這兩組梯形分別放在同一個動態(tài)面板的兩個狀態(tài)里(注意保持隊形),命名為“履帶”。

車身

由于車身都是有矩形通過各種變形、合并、去除、相交、排除(元件屬性的功能),因此在此不作詳述。

機械臂

機械臂一共有三個關(guān)節(jié)分別是“鏟斗”、“前臂”、“大臂”。三個關(guān)節(jié)分別需要圍繞各自的圓心做圓周運動。由于“鏟斗”同時參與了三個圓周運動因此需要最先畫它,然后才是“前臂”,“大臂”。

jixiebi

  1. 事先用矩形畫出“鏟斗”的形狀,根據(jù)“鏟斗”轉(zhuǎn)動的圓心畫出最小的圓。將整個圓轉(zhuǎn)換為動態(tài)面板命名為“鏟斗”。記住作為參考的圓可以設(shè)置為全透明,這樣就感覺不到這個圓圈的存在了。
  2. 按照類似的方法畫出前臂、大臂并分別轉(zhuǎn)換為動態(tài)面板“前臂”和“大臂”。記住,動態(tài)面板“前臂”應(yīng)當(dāng)包含動態(tài)面板“鏟斗”,而動態(tài)面板“大臂”應(yīng)該包含前兩者。

二、如何讓它動起來

挖掘機一共包含“前進”“后退”“勾鏟斗”“松鏟斗”“伸前臂”“ 縮前臂”“舉大臂”“放大臂”“抖土”等幾個動作。這幾個動作的核心都是旋轉(zhuǎn)事件。

前進/后退

在讓挖掘機動起來之前,必須選畫布上(操作按鈕除外)的所有元件選中,并一起轉(zhuǎn)換為動態(tài)面板,命名為“挖掘機”,因為整個挖掘機將一起移動。(點擊觸發(fā)事件)

Forward&back

  1. 在-X軸方向移動挖掘機250px,移動事件為6500ms
  2. 與此同時前動力輪后動力輪逆時針轉(zhuǎn)動1200°,其他幾個小輪子由于半徑比較小,按常理說轉(zhuǎn)動的圈數(shù)肯定比較多,因此設(shè)置為轉(zhuǎn)動3600°(可根據(jù)半徑精準(zhǔn)推算轉(zhuǎn)動圈數(shù))轉(zhuǎn)動時間與挖掘機移動時間一致為6500ms
  3. 與此同時設(shè)置“履帶”向下一個狀態(tài)循環(huán),等待6000ms(履帶循環(huán)切換6000ms)
  4. 停止循環(huán)(前進運動結(jié)束)
  5. 后退運動與前進運動類似,區(qū)別只在挖掘機的運動方向,車輪旋轉(zhuǎn)方向和履帶切換的方向。

機械臂運動

機械臂的運動根據(jù)需要在順時針和逆時針方向做一定角度的圓弧運動,具體時間如下圖所示:

jixiebishijian

  1. 大臂,舉起和放下整個機械臂,分別是順時針方向和逆時針方向旋轉(zhuǎn)20°,歷時2500ms
  2. 前臂,伸縮前臂,分別是順時針和逆時針方向旋轉(zhuǎn)30°,歷時2500ms
  3. 抖鏟斗,連續(xù)做四組正負方向10°時間100ms的旋轉(zhuǎn)運動

三、如何開挖掘機

挖掘機制作完畢,如何讓它運動得更加順暢和自然呢。在開篇gif圖中。挖掘機執(zhí)行一個前進動作、挖土動作、后退動作、放土動作、抖土動作。圖中的動態(tài)圖執(zhí)行如下運作命令:

前進-伸前臂-放大臂-伸前臂-放大臂-收前臂-勾鏟斗–收鏟斗-舉大臂-勾鏟斗-舉大臂

后退-伸前臂-放大臂-伸前臂-松鏟斗-松鏟斗-抖鏟斗

四、最后

根據(jù)類似的操作方式,還可以制作出坦克,示例如下:

tank

最后奉上這兩個作品源文件的下載地址:

作者提供源:

http://pan.baidu.com/s/1pJtMyc7

人人官方源:

鏈接: http://pan.baidu.com/s/1o61pRM6 密碼: gv4m

 

本文作者@陳濱淋,國內(nèi)某知名電商公司產(chǎn)品總監(jiān),起點學(xué)院北京1508期優(yōu)秀學(xué)員。首發(fā)于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這腦洞開著好大。。。。

    來自廣西 回復(fù)
  2. 驚呆了

    來自湖北 回復(fù)
  3. 話說 我一直沒找到axure8里面 改變角度在哪里,用快捷鍵+鼠標(biāo)拖拽的話 又沒這么精確,誰能告訴我下??! ??

    來自四川 回復(fù)
  4. 已驚呆,細致活兒

    來自四川 回復(fù)
  5. 已驚呆

    來自北京 回復(fù)
  6. 你們用8.0 不卡嗎?

    來自廣東 回復(fù)
    1. 卡成狗

      來自福建 回復(fù)
  7. AXURE8哪家強,起點學(xué)院找學(xué)員

    來自廣東 回復(fù)
  8. 哈哈 今后藍翔就靠大神了! ??

    來自北京 回復(fù)
  9. 汝甚刁

    來自江蘇 回復(fù)
  10. 請收下我的膝蓋!

    來自廣東 回復(fù)
  11. 大師,請問您是在藍翔學(xué)的Axure么~

    來自陜西 回復(fù)
  12. ?? 為什么這么強

    來自河南 回復(fù)
  13. 汝甚吊

    來自安徽 回復(fù)
  14. 還沒看完,先獻上我的膝蓋。

    來自廣東 回復(fù)
  15. 當(dāng)時我就震驚了。。。

    來自廣東 回復(fù)
  16. 獻上膝蓋

    來自北京 回復(fù)
  17. 也是有時間

    來自上海 回復(fù)
  18. 真心牛啊~至少我不會做~

    來自陜西 回復(fù)
  19. 閑的蛋疼啊

    來自北京 回復(fù)
  20. 你還保留一顆童心 :mrgreen: :mrgreen:

    來自廣東 回復(fù)
  21. 太有才了,此子必有大作為!

    來自河北 回復(fù)
  22. ?? ??

    來自北京 回復(fù)
  23. 哈哈。。。 ??

    來自安徽 回復(fù)
  24. 大哥你太牛逼了

    來自廣東 回復(fù)
  25. 擦 。。。這得閑的有多蛋疼 ????

    來自北京 回復(fù)
  26. ?? 這哥們真會玩

    來自上海 回復(fù)
  27. 太牛 ??

    來自北京 回復(fù)
  28. 逆天啊

    來自廣東 回復(fù)
  29. 我的測試版過期了,不能用,怎么辦?

    來自浙江 回復(fù)
    1. 我先頭也是,到官網(wǎng)下載安裝包更新就行了,不過得翻墻。下載后的安裝包我放到百度網(wǎng)盤了http://pan.baidu.com/s/1hqvw6IK(mac)
      http://pan.baidu.com/s/1hq33ZQs(win)

      來自湖南 回復(fù)
    2. 嗯,非常感謝

      來自浙江 回復(fù)
  30. Axure8.0還能用嗎,我這都打不開了 ?? ?? ??

    來自湖南 回復(fù)