在通常的业务发展中，我们可以看到不同程度的动画互动。在公共H5事件页面上加载，移动应用启动页面上的动画以及一些交互式迷你游戏卷，大至某些E -shopping ScenarioStactiostive游戏，例如Xingxiu Cat和Meow Sugar.at在某些实现方法中，，前端更多是在“手动装备”时代。它主要基于CSS +图片和JS辅助实现。实际上，前端字段中还有许多其他工具可以帮助我们实现功能并更快地满足业务。
在H5浏览器中，无论是2D还是3D，都有几种主流营销方法：
在上述方法中，无论是GIF还是CSS3，都很难在动画中添加事件。如果强行使用SettiMeout，至少不准确地将游戏逻辑不准确，则很难准确实现目标。
JS框架动画是在连续的钥匙帧中分解动画运动，并在时间轴的每个帧上绘制不同的内容，以使其连续播放以完成动画。，框架动画具有非常出色的灵活性，几乎可以表达您要执行的任何内容。
任务队列+时间队列被封装在代码上。例如，当我们设计代码时，我们在设计代码时将加载图和更改任务添加到任务链中。执行起始方法后，每个任务都将执行您应该执行的操作。完成此任务后，它将通过下一个方法更改其索引价值，然后跳到下一个任务。它是同步任务或异步时序任务。适合其业务场景的帧动画已经可以满足大多数情况，但不够普遍。
像脊柱一样，龙骨，洛蒂（Lottie）目前是市场上H5动画和游戏开发的主流方法。它并不是通过图片切换ORCanvas而不断地重新绘制的，而是通过材料本身的骨骼分离，将每个动态关节分开，和每个动态关节和分开重新绘制所需的联合零件，以实现低功率高性能动画。
如前所述，主流市场中使用的动画方法是脊柱和龙骨。这两个也是许多游戏引擎使用它的原因。
以手为例，从10年前开始，双手的互动业务开始建立一组互动生态系统。他们的首选是脊柱。游戏引擎很方便，从Hilo（https://hiloteam.github.io/）到当前的evajs（https://eva-engine.gite.io/tutorials/tutorials/introworials/introworials/introworials/introworeplo）。有两个是自我研究的一组工具链。但是，就其内部动画加载实现而言，它们是第一个支持脊柱和龙骨的人。以及汉达（Handao）的十一座建筑物，618列火车，而《星猫》（Star Cats）是2D游戏（全部2D）通过脊柱和龙骨（全2D）制造
阿里巴巴的方案：https：//eva-engine.gitee.io.io/#/tutorials/intro他们的解决方案是react + canvas（evajs），可以将其视为参考。
备注：软件费用（与下载PS相同）简介：您可以使用evajs hoil pixi Phaser Egret Layabox Cocos U3D UE4和其他常见的游戏引擎（2d 3D支持）。运行和渲染游戏，跑步的效果就像脊柱一样。可以直接通过API访问数据。您可以使用API在游戏中操作骨骼，组合动画并创建等效效果。
网站：https：//dragonbones.github.io/cn/index.html
备注：间接免费使用：它属于厄格时代。首先，它主要与白生白鹭一起使用。现在可以与其他工具或库单独使用。它也是一个非常强大的动画工具。
无论时间脊柱或龙骨，在开发过程中，我都会让UI同学或自己下载PS，将其切成小块，将其切成较小的粒状材料PNG。动画材料的便利性（PNG+ JSON）是便利的小型+高性能+高性能动画交互。因为您可以为每个关节骨绑定ID，增加所需的事件恢复，并控制每个骨架的过程到每个帧的过程。您不必调整UI每次同学。
网站：<https：//svga.io/
使用文档：https：//github.com/svga/svgaplayer-web
材料预览：http：//svga.8zuu.com/preview/index.html？BD_VID = 8908464425087532102
该材料可以通过SVGA插头加载，可以通过一些API获得一些API，以加载，更新，停止和卸载几个生命周期。缺点是，SVGA材料本身的大小略大于PNG的原始材料，该材料需要更多的时间来加载，并且在某些情况下，负载故障（开发人员需要自行判断和重试））。暂时没有很好的解决方案。在同一时间，当SVGA在页面上加载时，它等同于绘制画布。当页面上的多个SVGA共存时，会发生崩溃（显然，当某些游戏项目放大时，该页面被卡住了）。
URL：https：//github.com/airbnb/lottie-web
官方网站示例：https：//images3.c-ctrip.com/marketing/2022/05/gamengine/lottie/index.html
Lottie是Airbnb开源的一组完整的动画效果解决方案。设计师可以使用Adobe After Effects设计精美的动画，并使用Lottic提供的Bodymovin插头将设计的动画导出到JSON格式中，您可以直接使用。其他其他操作也支持微信迷你节目，可以加载Lottie-Miniprograph，这也可以在画布中渲染。
备注：注意性能，但是由于SVG或Lottie本身，您需要特别注意性能和兼容性问题：
1.需要及时需要Lottie动画组件，尤其是在应用程序环境中，Lottie动画不会增加卸载引起的CPU，并且页面上没有动画，但是Lottie一直在呼吁requestAnimationframe。隐藏在CSS上。
2.但是，由于单个活动页面特别取决于动画，因此每次必须破坏开关页面时，必须破坏乐谱实体，这可以像这样操作：
①使用webpack插件-in生成在构造项目时真正需要缓存的配置列表（图片列表和data.json lottie的json列表）；
②软件包预载库，请求图片和data.json资源，存储在indexdb中；
③包装Lottie加载配置类，区分缓存读取或直接网络获取。阅读缓存，创建图片blob URL，替换原始data.json中的图片参考，然后生成新的data.json。
①。使用骨动画和DOM进行交互式效果时，请确保注意页面层
②。如果您的项目具有大量的游戏链接，建议使用多个场景的概念封装SceneManager类（类似于路由，但是页面显示仍然是页面，URL尚未更改），并动态加载每个页面场景场景通过LRU算法，在适当的时间内释放现场的资源。
③。在市场上，进行动画和游戏时的前端学生使用了一些工具：evajs，hoil，spritejs，createjs，pixijs，pixijs，phaser，egret，egret，layabox，cocos，u3d，ue4.consinessinessines inconsimponsion和ue.4.consines inconsions in业务代码的结合，最常用的可能是Lottie和SVGA，在使用Lottie时需要特别注意。
以上是我一年四季开发互动营销方面的一些经验。欢迎批评大家。我将跟进并优化后续的交互式营销列，并计划编写多个时间真实的互动游戏（React+Animation库。），希望您能为我提供更多的指导。
原始：https：//juejin.cn/post/7101702808063180831