知识图谱前端插件_前端-娱乐化互动

注：这个文章只是分享用的哈！大家要是感兴趣可以看下原文：
渚薰：玩转娱乐化时代|淘系互动团队几年的技术沉淀+经验都在这！
06wj：双十一喵喵舞开发
Larry：不会做动画的前端不是好开发

在人口红利开始萎缩，各个 App 都开始以娱乐化互动作为重要手段来争夺普通民众的在线时长。因此在诸如互动业务领域内，我们就需要打造核心轻量化、研发速度快、用户体验好的互动技术。它是 Web 技术的一块特定领域，它融合了图形、渲染、动画以及前端工程和软件工程等知识。

一、为什么要做娱乐化的互动

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）。这份知识树从最基础的知识到专业技能覆盖的非常全，但这肯定会“逼退”很多想要进入这个领域的前端。但我的目标是让前端开发者能开发娱乐化的互动，而不是真正的开发一款游戏，

四、需要一套适合你的工具箱

自己完全手工去基于原生接口开发动画的成本还是比较高的，所以需要把通用的能力沉淀下来，为开发者提供更高效的开发体验，这样大家才能更专注于业务本身，避免很多重复劳动。所以，最省心的做法就是选择一个现成的产品进行使用，但前提是需要选择合适的，早期有 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对它进行了适配支持。 骨骼动画具有占用资源小，动画平滑过渡，可控性好的优势，劣势是计算量大 对性能要求高。

实践：