童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

2月6日 碧落盟投稿
  前段时间通过Axure8。0绘制出电动机模型,并鼓励大家继续玩Axure8。0最好玩坏它。这几天利用业余时间绘制了两个好玩作品挖掘机和坦克模型。额,别问我是不是山东来的。自从制作这个以后,感觉自己挖掘机技术已经炉火纯青了,拿到蓝翔的毕业证书应该不成问题!
  废话少说,先上挖掘机吧。
  我们先来看看这个原型难在哪。熟悉Axure8。0的童鞋不难看出:原型主要利用矩形“改变形状”来绘制总体的和每个零件的轮廓。用“旋转”事件来让挖掘机动起来。没有什么新鲜的知识点,而难点则在于细微零件的成型和各部位零件的交互事件的时间控制(当然设计完成之后还要学会怎么操作这部挖掘机,确保它操作起来动作流畅自然)。考验的乃是细心和耐心程度,简称“匠心”!
  我们来拆解一下这个原型是如何实现的。
  一、如何成型
  挖掘机由车轮、履带、车身、机械臂四大部分组成的。
  车轮
  (由2个动力轮和6个小轮子组成)
  如下图所示,由矩形经过以下几个步骤形成动力轮。
  拉出一个矩形
  将矩形变形成梯形调整梯形尺寸记得细长一点这是,并复制梯形,将第二个梯形转动180
  将两个梯形拉在一起,底边重合,然后选择“合并”将两个形状合并形成c的形状
  将形状c复制出一个c’,并将新复制出来的形状c’转动90
  将相互垂直的两个形状c对齐合并形状,形成形状e
  案例中动力轮有20个齿,因此需要5个形状e旋转合并,3602018计算得知5个e每个旋转角度递增18对齐合并
  两个圆形合并而成
  将f和g通过形状整合得出动力轮h(g和h的高度和宽度像素要同是奇数或偶数,否则无法对齐)
  制作完成后将该形状转化为动态面板并命名为“前动力轮”,复制一个“后动力轮”。(以动态面板的形式存在是为了后续更顺利地用旋转事件驱动它),至于小轮子的形状比较简单在此不做详述。
  履带
  履带转动的原理其实只是一个错觉,利用动态面板两个颜色相反的状态循环切换制造出履带传动的错觉。知道了这个原理之后剩下的就是如何画履带的问题了。如下图所示,履带有abcd四个部分组成,也不难看出abcd四部分都由若干个梯形排列而成:
  a。对应的是动力轮的一半,也就是说由10个梯形按照倾斜18递增排列出来的。而值得一提的是,由于履带是卡在动力轮轮齿之间的,因此第一个梯形的倾斜度应该为9,以此类推,a这10个梯形的倾斜角度分别为92745638199117135153171
  b。当a排列完毕后只需组合并复制一个a’将新复制出来的a’整体角度旋转180便可得到b
  cd。用同等大小的梯形按照合适的距离对齐即可
  当abcd四部分准备完毕后开始着色,最终形成一黑一白相间的效果,需要注意的是,整体梯形的个数必须是偶数,否则会出现两个同样颜色相邻的错误。如果出现奇数建议在c或d中增减梯形个数。abcd组装完毕后,再复制另一组梯形,着相反的颜色,将这两组梯形分别放在同一个动态面板的两个状态里(注意保持队形),命名为“履带”。
  车身
  由于车身都是有矩形通过各种变形、合并、去除、相交、排除(元件属性的功能),因此在此不作详述。
  机械臂
  机械臂一共有三个关节分别是“铲斗”、“前臂”、“大臂”。三个关节分别需要围绕各自的圆心做圆周运动。由于“铲斗”同时参与了三个圆周运动因此需要最先画它,然后才是“前臂”,“大臂”。
  事先用矩形画出“铲斗”的形状,根据“铲斗”转动的圆心画出最小的圆。将整个圆转换为动态面板命名为“铲斗”。记住作为参考的圆可以设置为全透明,这样就感觉不到这个圆圈的存在了。
  按照类似的方法画出前臂、大臂并分别转换为动态面板“前臂”和“大臂”。记住,动态面板“前臂”应当包含动态面板“铲斗”,而动态面板“大臂”应该包含前两者。
  二、如何让它动起来
  挖掘机一共包含“前进”“后退”“勾铲斗”“松铲斗”“伸前臂”“缩前臂”“举大臂”“放大臂”“抖土”等几个动作。这几个动作的核心都是旋转事件。
  前进后退
  在让挖掘机动起来之前,必须选画布上(操作按钮除外)的所有元件选中,并一起转换为动态面板,命名为“挖掘机”,因为整个挖掘机将一起移动。(点击触发事件)
  在X轴方向移动挖掘机250px,移动事件为6500ms
  与此同时前动力轮和后动力轮逆时针转动1200,其他几个小轮子由于半径比较小,按常理说转动的圈数肯定比较多,因此设置为转动3600(可根据半径精准推算转动圈数)转动时间与挖掘机移动时间一致为6500ms
  与此同时设置“履带”向下一个状态循环,等待6000ms(履带循环切换6000ms)
  停止循环(前进运动结束)
  后退运动与前进运动类似,区别只在挖掘机的运动方向,车轮旋转方向和履带切换的方向。
  机械臂运动
  机械臂的运动根据需要在顺时针和逆时针方向做一定角度的圆弧运动,具体时间如下图所示:
  大臂,举起和放下整个机械臂,分别是顺时针方向和逆时针方向旋转20,历时2500ms
  前臂,伸缩前臂,分别是顺时针和逆时针方向旋转30,历时2500ms
  抖铲斗,连续做四组正负方向10时间100ms的旋转运动
  三、如何开挖掘机
  挖掘机制作完毕,如何让它运动得更加顺畅和自然呢。在开篇gif图中。挖掘机执行一个前进动作、挖土动作、后退动作、放土动作、抖土动作。图中的动态图执行如下运作命令:
  前进伸前臂放大臂伸前臂放大臂收前臂勾铲斗收铲斗举大臂勾铲斗举大臂
  后退伸前臂放大臂伸前臂松铲斗松铲斗抖铲斗
  四、最后
  根据类似的操作方式,还可以制作出坦克,示例如下:
  最后奉上这两个作品源文件的下载地址:
  作者提供源:
  http:pan。baidu。coms1pJtMyc7
  人人官方源:
  链接:http:pan。baidu。coms1o61pRM6密码:gv4m
投诉 评论

Axure8。0教程:“百度一下,你就知道”搜索首页原型设计百度作为最大的中文搜索引擎,在某种程度上,有点学习google的简约至上的原则,但是给人的感觉还是不够彻底。今天,使用Axure8。0花了一下午的时间基本重现了百度搜索主页的原……Axure教程亲,来体验一下iPhone6引子这是第一次使用axure8实现的例子,之前的auxre8版本似乎有点问题,输出的html文件总是不能正常显示,新的beta版本这次好像是改进了,最近重新安装了一下。……Axure8。0小案例:电动机原型话说AxureRP8。0beta版发布相当一段时间了,由于自己好久没动手画过原型了,新版本发布之时木有及时围观。今天鬼使神差地去装了AxureRP8。0简单了解了一下它的新功能……Axure教程页面载入进度条在产品的原型设计中,进度条的意义是:第一,在页面载入中,给用户的等待过程中增加少量的乐趣;在一个追求快的环境中,这是十分关键的要素,可以减少流失率。第二,也是在告知……Axure8。0教程页面载入进度条(二)在上一篇原型设计《Axure教程页面载入进度条》中,设计中运用的技巧主要是函数、动态面板的使用;全局变量的使用、逻辑条件的设置。函数部分涉及widget。width、widge……Axure原型O2O订单流程APP交互稿分享翻出了一年半前写的一个订单流程的稿子,写的很粗糙,但大体流程表现都比较清晰,由于是写着玩的自然没有需求规则,现在拿出来分享给大家,供学习交流!整体预览:动画预览:……Axure教程为原型设计添加点动画效果应用交互效果中,动画效果是应用的锦上添花效果,比起死板的页面切换,动画过渡效果还是会让人感觉自然,不那么生硬,也是一款优秀应用的加分项。我们以几个例子来说明一下如何应用axur……Axure原型P2P金融微信体验金交互稿分享这个交互稿完成于一年前,那时刚接触Axure不久,流程图及不同场景的静态图是后补的,当时只是纯粹为了学习使用下Axure。由于只是学习作品,所以需求、逻辑及后台都不涉及,……Axure原型用Axure画流程图软件行业从业6年,流程图看过太多,大部分流程图是在考验阅读者的理解能力,近期在设计公司新版APP,对流程图的绘制也有点体会心得。用Axure绘制流程图好处是可以随时预览,……Axure8。0小案例:手把手教你画挖掘机前段时间通过Axure8。0绘制出电动机模型,并鼓励大家继续玩Axure8。0最好玩坏它。这几天利用业余时间绘制了两个好玩作品挖掘机和坦克模型。额,别问我是不是山东来的。自从制……Axure原型设计学习路径图对于一个新手来说,或者对一个桌面软件使用习惯不是很熟悉的人来说,学习一个设计软件似乎有点吃力,他们希望能有一个路径指导他们如何来学习,如何来使用,以便快速上手。下面这张图简单画……Axure原型文件下载:微信阅读原型之前学Axure,在十一期间做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1。0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给……
关于卡片设计、分割线、无框设计的思考本文作者将对不同产品界面的布局样式进行分析和梳理,希望可以给你带来一定的思考enjoy每年都会有一波又一波的设计趋势流行起来,被设计师们追随和模仿着。大家总觉得迎合着趋势……一款APP设计的从0到1之:Android设计规范篇之前U妹给大家分享了《一款APP设计的从0到1之:iOS精华篇》,今天U妹给大家带来的是Android的设计规范篇。Android的设计规范不同于iOS,Android是……交互理论深度解析尼尔森十大交互设计原则在设计中的用法JakobNielsen(雅各布尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应……2018年移动端UX设计的12个趋势移动端APP的世界真的是瞬息万变啊,各种设计技法和新鲜趋势你方唱罢我登场,想要维持住产品的热度和关注度,设计师需要不断地学习和调整设计,应对越来越严苛的挑战。接下来,我会……制作设计指南时,一定不能忽视的6个关键点设计指南是最大程度提升设计团队输出效率和确保品牌一致性的核心工具,成功的设计规范并非一蹴而就,需要注意的问题并不少。对于一个网站甚至一个品牌而言,设计指南不仅仅是一份规范……智慧出行:汽车仪表盘交互体验设计分析(一)本文将从用户体验角度切入对汽车仪表设计展开分析。当前,移动设备在消费市场得到很大的变化从手机到可穿戴设备。移动设备越来越实惠,实现了前所未有的大面积普及。慢慢地,移……深入研究GUI和VUIGUI和VUI的差异来自信息维度、信息量大小、交互方式、内容驱动、任务类型等等,今天我们一起探讨一下GUI和VUI的差异,最后重点聊一下如何将GUI转化为VUI。今天我们……服务设计思维下节点转化思考服务设计是一种顶层思考方式。什么是服务服务即流程服务即无形体验流程,用户带着一定程度目标(明确目标、半精确目标、无目标)在特定环境下与对象完成序列互动。序列就是特定……实战复盘:天猫精灵全链路营销设计设计究竟是如何赋能业务,帮助扩大产品营销的效果的呢?文章通过实际案例为你解读。在刚刚过去的2017天猫双11全球狂欢节当中,一款网红爆款横空出世天猫精灵,在很短的时间内登……设计规范Web端设计理念篇设计团队的意义是能理解分析最终用户的需求,通过专业的设计手段、方法去实现企业战略解决相关问题。设计理念是设计的核心思想与运作原则,是为了明确设计团队方向,确保围绕着核心准……设计师如何优雅地回复需求邮件本文作者将结合自身经验与你分享设计师应如何优雅地回复需求邮件,enjoy工作中回复各种邮件数不胜数,设计师回复的产品需求邮件就是一类,以前回邮件时都是比较率性而为,并没有……基础篇网易设计师教你如何系统地优化APP如何把产品打磨的更加精致是每个UI设计师的目标,但作为设计师我们如何系统的去优化APP,让产品更有趣,我们可以一起来探讨下。一。为什么要视觉优化?大多数人看来从视觉……

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界