浅谈 做动画与前端的渊源

  前几天,写代码之余在微信公众号《前端之巅》上看到一篇《不会做动画的前端不是好开发》的文章,由此,我想在这里借这篇文章来说说做动画与前端的渊源。

  自从有了前端开发这个概念,这个岗位所做的事情都是围绕着人机交互来开展,主要包括展示信息给用户看,然后获取用户的意图并做出对应的响应(这里说的前端是指web前端,IOS和Android的客户端开发本质上也完成类似的工作,但技术栈不同,有更多底层能力);

  随着大数据时代的到来,前端工程愈来愈复杂,分工也有进一步精细化,所以同为前端工程师,负责的工作可能不尽相同,这样一来,也就造成了不同的前端工程会有不同的侧重点。在这种大背景下,做动画似乎和前端的渊源不是那么深远,但其实,身为一个前端工程师,能做出一个高质量的动画在很多情况下都大大提升用户的视觉体验,前提是使用的当并把握好度:

  1.更形象化的表现力。人们的现实世界是动态的,用静态的图片很难表达出场景的氛围,做动画做的好,在适当的时候,如双11某猫狂欢城的页面,这样一来,用户的视觉体验更佳,会有更好的购物体验;

  2.更自然的过渡效果。一个有趣的动画loading过程能给用户在等待时缓解用户的情绪,带去良好的情绪体验,就像是在等待上菜时可以看看京剧表演一样。即便是性能很6的IPhone也有很多赏心悦目的界面切换效果;

  3.更具互动性。试想一下一棵一动不动的树和一棵树叶被风吹动的的树哪一个给你的感觉是有生机的并想亲自触摸一些树叶的?

  所以,只有恰当的用好动画这个技能,用户的终端系统对动画的表现能力越来越强,将会有更多的场景大量使用的动画。由此看来,做动画和前端的渊源是相当深远的,虽然不能绝对的说不会做动画的前端不是好开发,但是会做一些动画,能让你的项目锦上添花。

  从2D到3D、从虚拟到现实,对前端团队的要求也越来越高,不再试能用JQuery的animate或者CSS的transition做个Loading就可以的时代了,正确理解做动画与前端的渊源,从做动画起,为自己的项目增添一点趣味!

  那么,要做出高质量的动画,又要主要哪些东西呢?

  1.需要如丝般顺滑的流畅,考核指标FPS性能;

  2.覆盖用户更多的场景,考核指标是设备兼容性;

  3.逼真或赏心悦目的渲染效果,如3D材质、色彩、粒子等;

  在做项目的时候,大胆尝试,不断突破,多实践才能写除更多的精品!

  《前端之巅》:《不会做动画的前端不是好开发》。

posted @ 2017-06-14 16:20  Coder~小波  阅读(290)  评论(0编辑  收藏  举报