Axure8,0С.pdfVIP

  • 13
  • 0
  • 约2.81千字
  • 约 6页
  • 2018-04-15 发布于湖北
  • 举报
Axure8,0С.pdf

Axure8 .0小案例 :手把手教你画挖掘机 前段时间通过Axure8.0绘制出电动机模型 ,并鼓励大家 续玩Axure8.0最好玩坏它。这几天利用业 余时间绘制了两个好玩作品——挖掘机和坦克模型。额 ,别问我是不是山东来的。自从制作这个 以后 ,感觉自己挖掘机技术已经炉火纯青了 ,拿到蓝翔的毕业证书应该不成问题 ! 废话少说 ,先上挖掘机吧。 我们先来看看这个原型难在哪。熟悉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的高度和宽度像素要同是奇数或偶数 ,否则无法对齐 ) 制作完成后将该形状转化为动态面板并命名为“前动力轮” ,复制一个“后动力轮”。 (以动态面板的形 式存在是为了后续更顺利地用旋转事件驱动它 ),至于小轮子的形状比较简单在此不做详述。 履带 履带转动的原理其实只是一个错觉 ,利用动态面板两个颜色相反的状态循环切换制造出履带传动的 错觉。知道了这个原理之后剩下的就是如何画履带的问题了。如下图所示 ,履带有abcd四个部分 组成 ,也不难看出abcd四部分都由若干个梯形排列而成 : a. 对应的是动力轮的一半 ,也就是说由10个梯形按照倾斜18°递增排列出来的。而值得一提的是 , 由于履带是卡在动力轮轮齿之间的 ,因此第一个梯形的倾斜度应该为9° ,以此类推 ,a这10个梯形 的倾斜角度分别为9°27°4 5°63°81°99°117°135°153°171° b. 当a排列完毕后只需组合并复制一个a’将新复制出来的a’整体角度旋转180°便可得到b c/d. 用同等大小的梯形按照合适的距离对齐即可 当abcd四部分准备完毕后开始着色 ,最终形成一黑一白相间的效果 ,需要注意的是 ,整体梯形的个 数必须是偶数 ,否则会出现两个同样颜色相邻的错误。如果出现奇数建议在c或d中增减梯形个数。 abcd组装完毕后 ,再复制另一组梯形 ,着相反的颜色 ,将这两组梯形分别放在同一个动态面板的两 个状态里 (注意保持队形 ),命名为“履带”。 车身 由于车身都是有矩形通过各种变形、合并、去除、相交、排除 (元件属性的功能 ),因此在此不作 详述。 机械臂 机械臂一共有三个关节分别是“铲斗”、“前臂”、“大臂”。三个关节分别需要围绕各自的圆心做圆周 运动。由于“铲斗”同时参与了三个圆周运动因此需要最先画它 ,然后才是“前臂” ,“大臂”。 1. 事先用矩形画出“铲斗”的形状 ,根据“铲斗”转动的圆心画出最小的圆。将整个圆转换为动态面板命 名为“铲斗”。记住作为参考的圆可以设置为全透明 ,这样就感觉不到这个圆圈的存在了。 2. 按照类似的方法画出前臂、大臂并分别转换为动态面板“前臂”和“大臂”。记住 ,动态面板“前臂”应 当包含动态面板“铲斗” ,而动态面板“大臂”应该包含前两者。 二、如何让它动起来 挖掘机一共包含“前进”“后退”“勾铲斗”“松铲斗”“伸前臂”“ 缩前臂”“举大臂”“放大臂”“抖土”等几个动作。 这几个动作的核心都是旋转事件。 前进/后退 在让挖掘机动起来之前 ,必须选画布上 (操作按钮除外 )的所有元件选中 ,并一起转换为动态面板 ,命名为“挖掘机” ,因为整个挖掘机将一起移动。 (点击触发事件 ) 1. 在 X轴方向移动挖掘机250px ,移动事件为6500ms 2. 与此同时前动 轮和后动 轮逆时针转动1200° ,其他几个小轮子由于半径比较小 ,按常理说转 动的圈数肯定比较

文档评论(0)

1亿VIP精品文档

相关文档