Axure8.0小案例：大神手把手教你画挖掘机

　　前段时间通过Axure8.0绘制出电动机模型，并鼓励大家继续玩Axure8.0最好玩坏它。这几天利用业余时间绘制了两个好玩作品――挖掘机和坦克模型。额，别问我是不是山东来的。自从制作这个以后，感觉自己挖掘机技术已经炉火纯青了，拿到蓝翔的毕业证书应该不成问题!

　　废话少说，先上挖掘机吧。

　　我们先来看看这个原型难在哪。熟悉Axure8.0的童鞋不难看出：原型主要利用矩形“改变形状”来绘制总体的和每个零件的轮廓。用“旋转”事件来让挖掘机动起来。没有什么新鲜的知识点，而难点则在于细微零件的成型和各部位零件的交互事件的时间控制(当然设计完成之后还要学会怎么操作这部挖掘机，确保它操作起来动作流畅自然)。考验的乃是细心和耐心程度，简称“匠心”!

　　我们来拆解一下这个原型是如何实现的。

　　一、如何成型

　　挖掘机由车轮、履带、车身、机械臂四大部分组成的。

　　车轮

　　(由2个动力轮和6个小轮子组成)

　　如下图所示，由矩形经过以下几个步骤形成动力轮。

　　拉出一个矩形

　　将矩形变形成梯形调整梯形尺寸记得细长一点这是，并复制梯形，将第二个梯形转动180°

　　将两个梯形拉在一起，底边重合，然后选择“合并”将两个形状合并形成c的形状

　　将形状c复制出一个c'，并将新复制出来的形状c'转动90°

　　将相互垂直的两个形状c对齐合并形状，形成形状e

　　案例中动力轮有20个齿，因此需要5个形状e旋转合并，360°/20=18°计算得知5个e每个旋转角度递增18°对齐合并

　　两个圆形合并而成

　　将f和g通过形状整合得出动力轮h(g和h的高度和宽度像素要同是奇数或偶数，否则无法对齐)

　　制作完成后将该形状转化为动态面板并命名为“前动力轮”，复制一个“后动力轮”。(以动态面板的形式存在是为了后续更顺利地用旋转事件驱动它)，至于小轮子的形状比较简单在此不做详述。

　　履带

　　履带转动的原理其实只是一个错觉，利用动态面板两个颜色相反的状态循环切换制造出履带传动的错觉。知道了这个原理之后剩下的就是如何画履带的问题了。如下图所示，履带有abcd四个部分组成，也不难看出abcd四部分都由若干个梯形排列而成：

　　a. 对应的是动力轮的一半，也就是说由10个梯形按照倾斜18°递增排列出来的。而值得一提的是，由于履带是卡在动力轮轮齿之间的，因此第一个梯形的倾斜度应该为9°，以此类推，a这10个梯形的倾斜角度分别为9°27°45°63°81°99°117°135°153°171°

　　b. 当a排列完毕后只需组合并复制一个a'将新复制出来的a'整体角度旋转180°便可得到b

　　c/d. 用同等大小的梯形按照合适的距离对齐即可

　　当abcd四部分准备完毕后开始着色，最终形成一黑一白相间的效果，需要注意的是，整体梯形的个数必须是偶数，否则会出现两个同样颜色相邻的错误。如果出现奇数建议在c或d中增减梯形个数。abcd组装完毕后，再复制另一组梯形，着相反的颜色，将这两组梯形分别放在同一个动态面板的两个状态里(注意保持队形)，命名为“履带”。

　　车身

　　由于车身都是有矩形通过各种变形、合并、去除、相交、排除(元件属性的功能)，因此在此不作详述。

　　机械臂

　　机械臂一共有三个关节分别是“铲斗”、“前臂”、“大臂”。三个关节分别需要围绕各自的圆心做圆周运动。由于“铲斗”同时参与了三个圆周运动因此需要最先画它，然后才是“前臂”，“大臂”。

　　事先用矩形画出“铲斗”的形状，根据“铲斗”转动的圆心画出最小的圆。将整个圆转换为动态面板命名为“铲斗”。记住作为参考的圆可以设置为全透明，这样就感觉不到这个圆圈的存在了。

　　按照类似的方法画出前臂、大臂并分别转换为动态面板“前臂”和“大臂”。记住，动态面板“前臂”应当包含动态面板“铲斗”，而动态面板“大臂”应该包含前两者。

　　二、如何让它动起来

　　挖掘机一共包含“前进”“后退”“勾铲斗”“松铲斗”“伸前臂”“ 缩前臂”“举大臂”“放大臂”“抖土”等几个动作。这几个动作的核心都是旋转事件。

　　前进/后退

　　在让挖掘机动起来之前，必须选画布上(操作按钮除外)的所有元件选中，并一起转换为动态面板，命名为“挖掘机”，因为整个挖掘机将一起移动。(点击触发事件)

　　在-X轴方向移动挖掘机250px，移动事件为6500ms

　　与此同时前动力轮和后动力轮逆时针转动1200°，其他几个小轮子由于半径比较小，按常理说转动的圈数肯定比较多，因此设置为转动3600°(可根据半径精准推算转动圈数)转动时间与挖掘机移动时间一致为6500ms

　　与此同时设置“履带”向下一个状态循环，等待6000ms(履带循环切换6000ms)

　　停止循环(前进运动结束)

　　后退运动与前进运动类似，区别只在挖掘机的运动方向，车轮旋转方向和履带切换的方向。

　　机械臂运动

　　机械臂的运动根据需要在顺时针和逆时针方向做一定角度的圆弧运动，具体时间如下图所示：

　　大臂，举起和放下整个机械臂，分别是顺时针方向和逆时针方向旋转20°，历时2500ms

　　前臂，伸缩前臂，分别是顺时针和逆时针方向旋转30°，历时2500ms

　　抖铲斗，连续做四组正负方向10°时间100ms的旋转运动

　　三、如何开挖掘机

　　挖掘机制作完毕，如何让它运动得更加顺畅和自然呢。在开篇gif图中。挖掘机执行一个前进动作、挖土动作、后退动作、放土动作、抖土动作。图中的动态图执行如下运作命令：

　　前进-伸前臂-放大臂-伸前臂-放大臂-收前臂-勾铲斗--收铲斗-举大臂-勾铲斗-举大臂

　　后退-伸前臂-放大臂-伸前臂-松铲斗-松铲斗-抖铲斗四、最后

　　根据类似的操作方式，还可以制作出坦克，示例如下：

　　最后奉上这两个作品源文件的下载地址：

　　作者提供源：

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

　　本文作者@陈滨淋，国内某知名电商公司产品总监，起点学院北京1508期优秀学员。首发于人人都是产品经理，本文链接：http://www.woshipm.com/rp/235196.html