Axure8.0小案例:手把手教你畫挖掘機(jī)

Bin
69 評(píng)論 40336 瀏覽 533 收藏 10 分鐘

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

廢話少說(shuō),先上挖掘機(jī)吧。

wajueji

我們先來(lái)看看這個(gè)原型難在哪。熟悉Axure8.0的童鞋不難看出:原型主要利用矩形“改變形狀”來(lái)繪制總體的和每個(gè)零件的輪廓。用“旋轉(zhuǎn)”事件來(lái)讓挖掘機(jī)動(dòng)起來(lái)。沒(méi)有什么新鮮的知識(shí)點(diǎn),而難點(diǎn)則在于細(xì)微零件的成型和各部位零件的交互事件的時(shí)間控制(當(dāng)然設(shè)計(jì)完成之后還要學(xué)會(huì)怎么操作這部挖掘機(jī),確保它操作起來(lái)動(dòng)作流暢自然)??简?yàn)的乃是細(xì)心和耐心程度,簡(jiǎn)稱“匠心”!

我們來(lái)拆解一下這個(gè)原型是如何實(shí)現(xiàn)的。

一、如何成型

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

車輪

(由2個(gè)動(dòng)力輪和6個(gè)小輪子組成)

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

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

lunzi

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

履帶

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

lvdai1

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

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

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

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

車身

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

機(jī)械臂

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

jixiebi

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

二、如何讓它動(dòng)起來(lái)

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

前進(jìn)/后退

在讓挖掘機(jī)動(dòng)起來(lái)之前,必須選畫布上(操作按鈕除外)的所有元件選中,并一起轉(zhuǎn)換為動(dòng)態(tài)面板,命名為“挖掘機(jī)”,因?yàn)檎麄€(gè)挖掘機(jī)將一起移動(dòng)。(點(diǎn)擊觸發(fā)事件)

Forward&back

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

機(jī)械臂運(yùn)動(dòng)

機(jī)械臂的運(yùn)動(dòng)根據(jù)需要在順時(shí)針和逆時(shí)針?lè)较蜃鲆欢ń嵌鹊膱A弧運(yùn)動(dòng),具體時(shí)間如下圖所示:

jixiebishijian

  1. 大臂,舉起和放下整個(gè)機(jī)械臂,分別是順時(shí)針?lè)较蚝湍鏁r(shí)針?lè)较蛐D(zhuǎn)20°,歷時(shí)2500ms
  2. 前臂,伸縮前臂,分別是順時(shí)針和逆時(shí)針?lè)较蛐D(zhuǎn)30°,歷時(shí)2500ms
  3. 抖鏟斗,連續(xù)做四組正負(fù)方向10°時(shí)間100ms的旋轉(zhuǎn)運(yùn)動(dòng)

三、如何開挖掘機(jī)

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

前進(jìn)-伸前臂-放大臂-伸前臂-放大臂-收前臂-勾鏟斗–收鏟斗-舉大臂-勾鏟斗-舉大臂

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

四、最后

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

tank

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

作者提供源:

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

人人官方源:

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

 

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 666

    來(lái)自湖北 回復(fù)
  2. 源文件下載下來(lái)無(wú)法打開,提示已經(jīng)損壞。 ?

    來(lái)自廣東 回復(fù)
  3. ?? ?? ??

    來(lái)自廣東 回復(fù)
  4. 陳老師你好,我想誠(chéng)心請(qǐng)教一個(gè)問(wèn)題。

    來(lái)自四川 回復(fù)
  5. 不得不說(shuō),太牛逼了

    來(lái)自四川 回復(fù)
  6. 城會(huì)玩

    來(lái)自北京 回復(fù)
  7. ?? 老師,你做的挖掘機(jī)預(yù)覽鏟子被抖掉了,不過(guò)這里好像不能發(fā)圖

    來(lái)自陜西 回復(fù)
  8. ?? ?? 城里人

    來(lái)自廣東 回復(fù)
  9. 那些問(wèn)有什么用的真是讓人捉急,這可是個(gè)超大的思考上的破封,這意味著Axure可能做出Prezi的效果,動(dòng)態(tài)化展示的效果,只要夠有創(chuàng)意,你做出的rp文檔絕對(duì)是驚艷眾人的 ??

    來(lái)自廣東 回復(fù)
  10. 寫的很細(xì)致,學(xué)習(xí)中…

    來(lái)自北京 回復(fù)
  11. 已驚呆。挖掘機(jī)技術(shù)確實(shí)爐火純青,可是這玩意有實(shí)際用處嘛

    來(lái)自廣東 回復(fù)
  12. 我想知道這個(gè)效果有什么用處,作者的能力,做出來(lái)需要多久時(shí)間呢?

    來(lái)自遼寧 回復(fù)
  13. 閑的嗎?畫這么個(gè)費(fèi)勁的玩意。。。

    來(lái)自遼寧 回復(fù)
  14. 欺負(fù)我物理學(xué)得不夠好么?。?!

    來(lái)自浙江 回復(fù)