Axure8.0小案例:手把手教你畫挖掘機(jī)
前段時(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ī)吧。
我們先來(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)力輪。
- 拉出一個(gè)矩形
- 將矩形變形成梯形調(diào)整梯形尺寸記得細(xì)長(zhǎng)一點(diǎn)這是,并復(fù)制梯形,將第二個(gè)梯形轉(zhuǎn)動(dòng)180°
- 將兩個(gè)梯形拉在一起,底邊重合,然后選擇“合并”將兩個(gè)形狀合并形成c的形狀
- 將形狀c復(fù)制出一個(gè)c’,并將新復(fù)制出來(lái)的形狀c’轉(zhuǎn)動(dòng)90°
- 將相互垂直的兩個(gè)形狀c對(duì)齊合并形狀,形成形狀e
- 案例中動(dòng)力輪有20個(gè)齒,因此需要5個(gè)形狀e旋轉(zhuǎn)合并,360°/20=18°計(jì)算得知5個(gè)e每個(gè)旋轉(zhuǎn)角度遞增18°對(duì)齊合并
- 兩個(gè)圓形合并而成
- 將f和g通過(guò)形狀整合得出動(dòng)力輪h(g和h的高度和寬度像素要同是奇數(shù)或偶數(shù),否則無(wú)法對(duì)齊)
制作完成后將該形狀轉(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è)梯形排列而成:
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)因此需要最先畫它,然后才是“前臂”,“大臂”。
- 事先用矩形畫出“鏟斗”的形狀,根據(jù)“鏟斗”轉(zhuǎn)動(dòng)的圓心畫出最小的圓。將整個(gè)圓轉(zhuǎn)換為動(dòng)態(tài)面板命名為“鏟斗”。記住作為參考的圓可以設(shè)置為全透明,這樣就感覺(jué)不到這個(gè)圓圈的存在了。
- 按照類似的方法畫出前臂、大臂并分別轉(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ā)事件)
- 在-X軸方向移動(dòng)挖掘機(jī)250px,移動(dòng)事件為6500ms
- 與此同時(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
- 與此同時(shí)設(shè)置“履帶”向下一個(gè)狀態(tài)循環(huán),等待6000ms(履帶循環(huán)切換6000ms)
- 停止循環(huán)(前進(jìn)運(yùn)動(dòng)結(jié)束)
- 后退運(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í)間如下圖所示:
- 大臂,舉起和放下整個(gè)機(jī)械臂,分別是順時(shí)針?lè)较蚝湍鏁r(shí)針?lè)较蛐D(zhuǎn)20°,歷時(shí)2500ms
- 前臂,伸縮前臂,分別是順時(shí)針和逆時(shí)針?lè)较蛐D(zhuǎn)30°,歷時(shí)2500ms
- 抖鏟斗,連續(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ù)類似的操作方式,還可以制作出坦克,示例如下:
最后奉上這兩個(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)載。
666
源文件下載下來(lái)無(wú)法打開,提示已經(jīng)損壞。 ?
?? ?? ??
陳老師你好,我想誠(chéng)心請(qǐng)教一個(gè)問(wèn)題。
不得不說(shuō),太牛逼了
城會(huì)玩
?? 老師,你做的挖掘機(jī)預(yù)覽鏟子被抖掉了,不過(guò)這里好像不能發(fā)圖
?? ?? 城里人
那些問(wèn)有什么用的真是讓人捉急,這可是個(gè)超大的思考上的破封,這意味著Axure可能做出Prezi的效果,動(dòng)態(tài)化展示的效果,只要夠有創(chuàng)意,你做出的rp文檔絕對(duì)是驚艷眾人的 ??
寫的很細(xì)致,學(xué)習(xí)中…
已驚呆。挖掘機(jī)技術(shù)確實(shí)爐火純青,可是這玩意有實(shí)際用處嘛
我想知道這個(gè)效果有什么用處,作者的能力,做出來(lái)需要多久時(shí)間呢?
閑的嗎?畫這么個(gè)費(fèi)勁的玩意。。。
欺負(fù)我物理學(xué)得不夠好么?。?!