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

专为互联网人打造的365天成长计划,500门视频课程随便看,构建你的产品、运营知识体系。查看详情

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. 无德又无能,无霜亦无尘

    AXURE8哪家强,起点学院找学员

    回复
  2. 哈哈 今后蓝翔就靠大神了! :roll:

    回复
  3. balabala

    汝甚刁

    回复
  4. 不高估你的现在,不低估你的未来

    请收下我的膝盖!

    回复
  5. 开启新世界的大门~

    大师,请问您是在蓝翔学的Axure么~

    回复
    1. 回复

      哈哈 blue shit

    2. 回复

      明明在起点学院 :!:

  6. 思于心,笃于行

    :mad: 为什么这么强

    回复
  7. 正在产品汪的路子上艰难前行着

    汝甚吊

    回复
  8. 目前销售狗,想转产品狗。

    还没看完,先献上我的膝盖。

    回复
  9. 基本功!基本功很重要!

    当时我就震惊了。。。

    回复
  10. 献上膝盖

    回复
  11. 互联网信息架构师

    也是有时间

    回复
  12. 主要看看,偶尔说说

    真心牛啊~至少我不会做~

    回复
  13. 10年产品人

    闲的蛋疼啊

    回复
  14. PM 修炼ing

    你还保留一颗童心 :mrgreen: :mrgreen:

    回复
  15. 不断改变自我的产品

    太有才了,此子必有大作为!

    回复
  16. 你有问题我帮忙,我住隔壁我姓王

    起点学员真牛逼 :?:

    回复
  17. :shock: :shock:

    回复
  18. 进阶的产品小白!

    :razz: :razz: 真会玩!!

    回复
  19. Axure原型设计工场,欢迎关注

    哈哈。。。 :eek:

    回复
  20. 有一颗金融心的PM

    大哥你太牛逼了

    回复
  21. 人人都不是产品经理专栏作家

    你们城里的产品经理真会玩

    回复
  22. 我不是随便的人 ~

    擦 。。。这得闲的有多蛋疼 ????

    回复
  23. 如果大海可以输入15个字

    :shock: 这哥们真会玩

    回复
  24. https://github.com/chenzhangliang

    霸气~ 碉堡了~

    回复
  25. 产品汪,关注社交领域和互联网新动态。欢迎讨论。微信:airlven

    会玩……

    回复
  26. PM

    太牛 :twisted:

    回复
  27. 在路上的产品汪

    逆天啊

    回复
  28. 我的测试版过期了,不能用,怎么办?

    回复
    1. 回复

      我先头也是,到官网下载安装包更新就行了,不过得翻墙。下载后的安装包我放到百度网盘了http://pan.baidu.com/s/1hqvw6IK(mac)
      http://pan.baidu.com/s/1hq33ZQs(win)

    2. 回复

      嗯,非常感谢

  29. 爱学习,爱生活

    Axure8.0还能用吗,我这都打不开了 :cry: :cry: :cry:

    回复
  30. 投稿、稿件问题联系Q:419297645

    :razz: :razz: 我擦,碉堡了~

    回复

推荐阅读