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

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

我們先來看看這個原型難在哪。熟悉Axure8.0的童鞋不難看出：原型主要利用矩形“改變形狀”來繪制總體的和每個零件的輪廓。用“旋轉(zhuǎn)”事件來讓挖掘機動起來。沒有什么新鮮的知識點，而難點則在于細微零件的成型和各部位零件的交互事件的時間控制（當然設(shè)計完成之后還要學會怎么操作這部挖掘機，確保它操作起來動作流暢自然）。考驗的乃是細心和耐心程度，簡稱“匠心”！

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

一、如何成型

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

車輪

（由2個動力輪和6個小輪子組成）

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

1. 拉出一個矩形
2. 將矩形變形成梯形調(diào)整梯形尺寸記得細長一點這是，并復制梯形，將第二個梯形轉(zhuǎn)動180°
3. 將兩個梯形拉在一起，底邊重合，然后選擇“合并”將兩個形狀合并形成c的形狀
4. 將形狀c復制出一個c’，并將新復制出來的形狀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ù)，否則無法對齊）

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

履帶

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

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

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

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

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

車身

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

機械臂

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

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

二、如何讓它動起來

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

前進/后退

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

1. 在-X軸方向移動挖掘機250px，移動事件為6500ms
2. 與此同時前動力輪和后動力輪逆時針轉(zhuǎn)動1200°，其他幾個小輪子由于半徑比較小，按常理說轉(zhuǎn)動的圈數(shù)肯定比較多，因此設(shè)置為轉(zhuǎn)動3600°（可根據(jù)半徑精準推算轉(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ù)需要在順時針和逆時針方向做一定角度的圓弧運動，具體時間如下圖所示：

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

三、如何開挖掘機

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

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

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

四、最后

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

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

作者提供源：

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

人人官方源：

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

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