Axure8.0小案例:手把手教你画挖掘机

专为互联网人打造的365天成长计划,构建你的产品、运营知识体系,做个有竞争力的互联网人。查看详情

wajuejimoxing

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

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

wajueji

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

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

一、如何成型

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

车轮

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

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

  1. 拉出一个矩形
  2. 将矩形变形成梯形调整梯形尺寸记得细长一点这是,并复制梯形,将第二个梯形转动180°
  3. 将两个梯形拉在一起,底边重合,然后选择“合并”将两个形状合并形成c的形状
  4. 将形状c复制出一个c’,并将新复制出来的形状c’转动90°
  5. 将相互垂直的两个形状c对齐合并形状,形成形状e
  6. 案例中动力轮有20个齿,因此需要5个形状e旋转合并,360°/20=18°计算得知5个e每个旋转角度递增18°对齐合并
  7. 两个圆形合并而成
  8. 将f和g通过形状整合得出动力轮h(g和h的高度和宽度像素要同是奇数或偶数,否则无法对齐)

lunzi

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

履带

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

lvdai1

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组装完毕后,再复制另一组梯形,着相反的颜色,将这两组梯形分别放在同一个动态面板的两个状态里(注意保持队形),命名为“履带”。

车身

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

机械臂

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

jixiebi

  1. 事先用矩形画出“铲斗”的形状,根据“铲斗”转动的圆心画出最小的圆。将整个圆转换为动态面板命名为“铲斗”。记住作为参考的圆可以设置为全透明,这样就感觉不到这个圆圈的存在了。
  2. 按照类似的方法画出前臂、大臂并分别转换为动态面板“前臂”和“大臂”。记住,动态面板“前臂”应当包含动态面板“铲斗”,而动态面板“大臂”应该包含前两者。

二、如何让它动起来

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

前进/后退

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

Forward&back

  1. 在-X轴方向移动挖掘机250px,移动事件为6500ms
  2. 与此同时前动力轮后动力轮逆时针转动1200°,其他几个小轮子由于半径比较小,按常理说转动的圈数肯定比较多,因此设置为转动3600°(可根据半径精准推算转动圈数)转动时间与挖掘机移动时间一致为6500ms
  3. 与此同时设置“履带”向下一个状态循环,等待6000ms(履带循环切换6000ms)
  4. 停止循环(前进运动结束)
  5. 后退运动与前进运动类似,区别只在挖掘机的运动方向,车轮旋转方向和履带切换的方向。

机械臂运动

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

jixiebishijian

  1. 大臂,举起和放下整个机械臂,分别是顺时针方向和逆时针方向旋转20°,历时2500ms
  2. 前臂,伸缩前臂,分别是顺时针和逆时针方向旋转30°,历时2500ms
  3. 抖铲斗,连续做四组正负方向10°时间100ms的旋转运动

三、如何开挖掘机

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

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

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

四、最后

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

tank

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

作者提供源:

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

人人官方源:

链接: http://pan.baidu.com/s/1o61pRM6 密码: gv4m

 

本文作者@陈滨淋,国内某知名电商公司产品总监,起点学院北京1508期优秀学员。首发于人人都是产品经理,未经许可,禁止转载。

祝给予赞赏的伙伴,2017年发大财!

评论( 70

写下你的想法
  1. 666

    回复
  2. 专注助攻30年

    源文件下载下来无法打开,提示已经损坏。 :arrow:

    回复
    1. 回复

      抱歉,请到新的地址下载:http://pan.baidu.com/s/1c2JWqcS

  3. 作为一个用了axure多年的产品狗也放弃她了,现在有好的新工具好用多了
    比如mockplus、Principle等等。

    http://www.8kvv.com 上面特别全,建议看看
    :mrgreen: :mrgreen: :mrgreen: :mrgreen: :neutral: :neutral:

    回复
  4. :wink: :wink: :wink:

    回复
  5. 陈老师你好,我想诚心请教一个问题。

    回复
    1. 回复

      你好,有问题随时问。不必叫老师!

    2. 我认真地阅读了你作的这篇教程以及工程文件里的交互,深感佩服!有个小遗憾是“挖掘机”的臂、铲可以旋转360度,可以抡起绕圈儿转。
      我想了很久限制他们的旋转角度的方法,但一直没有思路。想到你是原作者,一定知道这个小问题的存在,所以才冒昧地找到你,希望如果有思路的话可以指点一下。

    3. 回复

      你好,这个问题是Axure8.0的问题,因为还在测试状态,所以只支持Axure8.0.0.3253版本才不会出现你说的问题。很抱歉,我也是后来才知道这个问题的。你了解其中的思路则可,逻辑上没有问题,因为Axure小版本兼容性确实还不稳定。希望能帮到你!

    4. 好的,万分感谢!

  6. 不得不说,太牛逼了

    回复
  7. 新华频媒运营经理

    城会玩

    回复
  8. 产品小鲜肉

    :shock: 老师,你做的挖掘机预览铲子被抖掉了,不过这里好像不能发图

    回复
    1. 回复

      你好,这个跟Axure的版本有关系,因为Axure8还不是稳定状态,我当时用的是Axure8.0.0.3253这个版本,就是人人都是产品经理社区老曹提供的那边版本。有的版本确实会有这个问题。有其他问题欢迎到我个公众号找我iambin

  9. :roll: :roll: 城里人

    回复
  10. 蜘蛛互联

    那些问有什么用的真是让人捉急,这可是个超大的思考上的破封,这意味着Axure可能做出Prezi的效果,动态化展示的效果,只要够有创意,你做出的rp文档绝对是惊艳众人的 :mad:

    回复
    1. 回复

      热泪盈眶 :roll:

  11. 某网站小编。

    写的很细致,学习中…

    回复
  12. ......

    已惊呆。挖掘机技术确实炉火纯青,可是这玩意有实际用处嘛

    回复
    1. 回复

      你好,感谢支持!案例本身可能没什么实际用处,但是案例中的思路和想象力或许大家可以借鉴。

    2. 回复

      :grin:

  13. 我想知道这个效果有什么用处,作者的能力,做出来需要多久时间呢?

    回复
  14. 闲的吗?画这么个费劲的玩意。。。

    回复
  15. Let bygones be...

    欺负我物理学得不够好么!!!

    回复
  16. 这脑洞开着好大。。。。

    回复
  17. 行走在产品道路的小白

    惊呆了

    回复
  18. 做着开发,但是一直像成为产品经理。

    话说 我一直没找到axure8里面 改变角度在哪里,用快捷键+鼠标拖拽的话 又没这么精确,谁能告诉我下啊! :roll:

    回复
    1. 回复

      在事件里头,有个“旋转”事件,与“移动”事件挨着

    2. 回复

      有些地方不懂,求赐教 :cry:

    3. 回复

      你好,哪里不清楚可以在此直接回复

  19. 反应迟钝慢半拍

    已惊呆,细致活儿

    回复
  20. 我途径这颗星球,,,,双子座,双重人格~

    已惊呆

    回复
  21. 你们用8.0 不卡吗?

    回复
    1. 卡成狗

    2. 回复

      不卡,但是过了15号就不让用了,想用的话,修改系统时间,超级麻烦!

  22. 若只如初见

    妈妈问我问什么跪着看电脑

    回复

推荐阅读