注:这个文章只是分享用的哈!大家要是感兴趣可以看下原文:
渚薰:玩转娱乐化时代|淘系互动团队几年的技术沉淀+经验都在这!
06wj:双十一喵喵舞开发
Larry:不会做动画的前端不是好开发
在人口红利开始萎缩,各个 App 都开始以娱乐化互动作为重要手段来争夺普通民众的在线时长。因此在诸如互动业务领域内,我们就需要打造核心轻量化、研发速度快、用户体验好的互动技术。它是 Web 技术的一块特定领域,它融合了图形、渲染、动画以及前端工程和软件工程等知识。
一、为什么要做娱乐化的互动
![dd2c1c596ce7ba6cc65717d17da4da45.png](https://i-blog.csdnimg.cn/blog_migrate/8223df6df4c90f95f303cdf81e4bfec2.png)
2020财年阿里巴巴投资者大会上,PPT 中,列举了不少淘系内的大型互动产品,比如金币庄园、淘宝人生,以及叠猫猫和双11战队等大促互动。这些互动无外乎是吸引用户、持续“消耗”用户时间的有效手段。
互动并不是一种事物,娱乐化互动也并不是游戏,它是一种有趣、好玩的获得目标事物的过程。这个过程,用趣味的场景或玩法是非常有效的手段。
二、实现动画的方法
那前端可以使用哪些技术来实现动画呢?
1、对程序员而言最省事的就是视频或者 gif 图片了,而且目前在很多情况下也在广泛使用,优点是对业务方来说没有太多限制,沟通成本低,缺点是在色彩、透明度的表现力上不如 PNG,而且交互性差,不过也可以通过碎片组装的创新方式达到可以互动的效果;
2、又爱又恨的 Flash,具备成熟易用的 IDE 与强大的 ActionScript,简直就是为动画而生,而且兼容 IE。可是依赖插件、耗资源、安全性等问题让它在手机端几乎寸步难行,我想这个技术其实已经没有再考虑的必要了;
3、通过 JS 改变 Dom 节点的 css 属性应该是集开发成本低、兼容性好、具备互动性,加上 PNG 图片很好的色彩与透明度的表现力基本能满足很多动画需求,也是目前大部分前端使用的方法。但是在复杂的大场景中性能较差,并不是特别流畅;
4、Canvas 的到来仿佛是上帝为前端同学提供了神来之笔,而且是众多大厂推崇的官方标准,不需要插件,浏览器内核支持,可以绘制各种图形以及具备高性能的图片渲染能力,而且能比 flash 更好的与页面中其他元素交互等等,但纯手工编写 canvas 程序的成本其实较高(原因可以 google),动画实现起来较为繁琐,但可以通过封装一些方法进行解决;
5、大厂对 WebGL 的支持相当于为前端的那支神来之笔赋予了新的魔法,在 Canvas 的基础之上增加了 OpenGL ES 的 3D 绘制能力,并且能开启硬件 3D 加速渲染,让前端动画的世界充满了更多想象的空间,天猫双 11 狂欢城、年货节以及众多 AR 项目中已经在大规模尝试基于 Web3D 的渲染技术。
三、技术知识图谱
要开发互动 H5,到底需要学习多少知识?网传曾有怎么一份知识树(出自 miloyip 的 Game Programmer)。这份知识树从最基础的知识到专业技能覆盖的非常全,但这肯定会“逼退”很多想要进入这个领域的前端。但我的目标是让前端开发者能开发娱乐化的互动,而不是真正的开发一款游戏,
![3e46b3f0620cabca0be4693aa2decdc2.png](https://i-blog.csdnimg.cn/blog_migrate/d0e045b2236d728f1de67bcbfc9ecac7.png)
四、需要一套适合你的工具箱
自己完全手工去基于原生接口开发动画的成本还是比较高的,所以需要把通用的能力沉淀下来,为开发者提供更高效的开发体验,这样大家才能更专注于业务本身,避免很多重复劳动。所以,最省心的做法就是选择一个现成的产品进行使用,但前提是需要选择合适的,早期有 Egret、Pixi、unity、Cocos、three.js 等相关的动画引擎的产品,大家可以自己的需求进行选择。当然,如果发现没有非常适合的,可以选择进行扩展或者自己研发,以便满足自己团队的业务需要。
在 2014 年阿里选择了自研一个叫 Hilo 的引擎,根本原因是我们没找到一个适合电商业务的动画引擎
学习开发模式可以从学习该领域的一个框架开始,就像你在学习一个 MVVM 框架(React、Vue、Angular)一样。业界这样的框架或引擎有很多,比如大名鼎鼎的Unity,以及 Web Game 中有着广泛好评的Phaser、Egret、Laya,以及阿里已开源的Hilo和孵化中的EVA。
案例:双十一喵喵舞开发
喵喵舞g.alicdn.com人物动画
知乎 - 安全中心g.alicdn.com人物使用了Hilo DragonBones做骨骼动画。DragonBones是一套开源的2D骨骼动画框架和工具,Hilo对它进行了适配支持。 骨骼动画具有占用资源小,动画平滑过渡,可控性好的优势,劣势是计算量大 对性能要求高。
实践:
![0c159b33a807d6cfeedbd898d2f1f408.png](https://i-blog.csdnimg.cn/blog_migrate/2d5d33d8db36698ec14c25e8733cba9c.jpeg)