项目背景在海外项目中，为了优化用户体验，添加了几个微交互动画。实现方式是设计输出合成精灵图，前端通过序列帧实现动画效果：序列帧:动画效果：序列帧：帧动画的缺点和局限性很明显。合成的精灵图像文件较大，在不同的屏幕分辨率下可能会变形。经过考察，发现Lottie是一个简单、高效、高性能的动画解决方案。Lottie是一个可以应用于Android、iOS、Web和Windows的库。它通过Bodymovin解析AE动画并导出json文件，可以在移动和Web上渲染动画。也就是说，设计师使用AE创建动画效果，然后使用Bodymovin导出相应的json文件给前端，前端使用Lottie库实现动画效果。Bodymovin插件的安装和使用关闭AE下载安装ZXP安装器https://aescripts.com/learn/z...下载最新版bodymovin插件https://github.com/airbnb/lot...把下载好的bodymovin拖.zxp到ZXP安装器打开AE，在菜单Preferences->General>Bodymovin勾选??，勾选要输出的动画，并设置输出文件目录，点击render打开输出目录，您将看到生成的JSON文件。如果动画中引入了外部图片，则JSON中引用的图片会存储在images中，供前端使用lottiestaticURLhttps://cdnjs.com/libraries/l...npmnpminstalllottie-web调用loadAnimationlottie。loadAnimation({container:element,//容器节点renderer:'svg',loop:true,autoplay:true,path:'data.json'//JSON文件路径});vue-lottie也可以在vue中使用lottieimportlottiefrom'../lib/lottie';从'../../raw/fav.json'导入*作为favAnmData；exportdefault{props:{options:{type:Object,required:true},height:Number,width:Number,},data(){return{style:{width:this.width?`${this.width}px`:'100%',height:this.height?`${this.height}px`:'100%',overflow:'hidden',margin:'0auto'}}},mounted(){this.anim=lottie.loadAnimation({container:this.$refs.lavContainer，渲染器：'svg'，循环：this.options.loop!==false，自动播放：this.options.autoplay!==false，动画数据：favAnmData，assetsPath：this.options.assetsPath，rendererSettings：this.options.rendererSettings});this.$emit('animCreated',this.anim)}}loadAnimation参数容器用于渲染动画的HTML元素，需要在调用loadAnimation时确保该元素存在渲染器，可选valueis'svg'(defaultvalue)/'canvas'/'html'svg支持的功能最多，而html性能更好，支持3d图层。默认情况下，每个选项值支持的函数列表在此循环中为真。您可以传递需要循环的特定次数。autoplay自动播放pathJSON文件路径animationDataJSON数据。传递这个参数后，就可以使用lottie命令来引用动画实例了。rendererSettings可以传递给渲染器实例的特定设置。详见Lottie动画监控Lottie提供了监控动画执行的事件：completeloopCompleteenterFramesegmentStartconfig_ready（初始配置完成）data_ready（所有动画数据加载完成）DOMLoaded（元素已经添加到DOM节点）destroy可以使用addEventListener来监听事件//动画播放完成时触发anm.addEventListener('complete',anmLaded);//当前循环播放完成时触发anm.addEventListener('loopComplete',anmComplete);//触发anm.addEventListener('enterFrame',输入框架);播放一帧动画时控制动画的播放速度和进度可以使用anm.pause和anm.play来暂停和播放动画。调用anm.stop将停止动画并返回到动画的第一帧。使用anm.setSpeed(speed)调整动画速度，anm.goToAndStop(value,isFrame)和anm.goToAndPlay可以控制具体播放的帧数，也可以结合anm.totalFrames来控制进度百分比，比如通过anm.totalFrames-1跳转到最后一帧。anm.goToAndStop(anm.totalFrames-1,1);这样做的好处是可以合并关联的json文件，通过anm.goToAndPlay可以控制动画状态的切换。下面的例子中，一个JSON文件中包含了两种动画状态的数据：图片资源JSON文件中的assets设置了对图片的引用：如果想统一修改静态资源路径或者设置为绝对路径，可以调用loadAnimation时传入assetsPath参数：lottie.loadAnimation({container:element,renderer:'svg',path:'data.json',assetsPath:'URL'//静态资源绝对路径});功能支持列表即使使用bodymovin成功输出JSON文件（没有报错），动态效果也不会达到预期。例如，这是AE内置的图片：但是页面上的渲染效果是这样的：这是因为使用了不支持的MergePaths功能。因此，对于设计师来说，制作Lottie动画不同于通常的AE动画，本文档记录了Bodymovin支持的AE功能列表。动画制作前需与设计师沟通，根据动画加载平台确认可用的AE功能。另外，设计过程尽量遵循官方文档：动画简化中的指导和建议。创建动画时，时刻记得保持json文件简洁，比如尽可能绑定父子关系，在相似图层上复制相同的关键帧会增加额外的代码，尽量不要使用带路径的关键帧动画最多的空间。auto-tracing、flutter等技术会使JSON文件变得非常大且性能密集。创建形状图层。将AI、EPS、SVG、PDF等资源转换成形状图层，否则无法在Lottie中正常使用。转换后删除资源，防止导出为JSON文件。设置大小。AE中可以设置合成大小为任意大小，但导出时需要保证合成大小和资源大小一致。不使用表达式和效果。目前不支持Lottie。注意面罩尺寸。使用alpha蒙版时，蒙版的大小会对性能产生很大影响。保持面罩尺寸尽可能小。动画调试。如果输出动画坏了，通过每次导出特定层来调试哪些层有问题。然后附上github中的layer文件提交issue，选择其他方式重构layer。不使用混合模式和亮度蒙版。没有图层样式被添加。全屏动画。将导出大小设置为大于您要支持的最宽屏幕。设置空白对象。如果您使用空白对象，请确保选中可见并将透明度设置为0%，否则它不会导出到JSON文件。预览效果由于上述功能支持问题，输出的动画效果会存在不确定性。有一个设计师和前端联合调试动画效果的过程。为了提高联调效率，设计者可以先进行效果的初步预览。然后将文件传递给前端。方法一：输出预览HTML文件，渲染前设置要渲染的文件。勾选??Demo选项，在输出文件目录下可以找到可以预览的demo.html文件。方法二：LottieFiles分享平台将生成的json文件传输到LottieFiles平台，可以播放和暂停生成文件的动画效果，可以设置图层颜色和动画速度，也可以下载lottie预览客户端进行预览它在iOS或Android上。LottieFiles平台还提供了很多网上公开的Lottie动画效果。您可以直接下载JSON文件。使用交互式hackLottie的缺点是没有相应的API来操作动画层。如果想做更细致的动画处理，只能直接操作节点。完成。比如左图播放动画进入惊奇状态后，如果想实现简单的随着鼠标移动控制右图动画层的效果：打开调试面板可以看到lottie-web使用
