lottie简介移动设备和互联网。这个方案最好的地方在于它解放了前端开发者，让设计者可以直接连接github仓库地址lottie-web上的动画实现：https://github.com/airbnb/lot...lottie-ios:https://github.com/airbnb/lot...lottie-android:https://github.com/airbnb/lot...基本安装依赖yarnaddlottie-webImportlottiefrom'lottie-web'在项目中引用实例化lottie.loadAnimation({container:document.getElementById('lottie-animation'),renderer:'svg',loop:false,path:'https://gaeacdn.jiliguala.com/jlgl/pages/animation/finger02.json'})api引入了loadAnimation的参数名，描述了用于渲染的容器。通常，div可以用作渲染器。可以选择'svg'/'canvas'/'html'，亲测发现svg效果最好，兼容name动画名，用于引用loop循环autoplay自动播放pathjson路径，页面会通过一个jsonanimationData获取json动画数据http请求，和path是互斥的，推荐使用path，因为animationData中的数据会被打包进去，会导致jsbundle过大。实例化后的api名称参数说明stopnostopanimationplaynoplaybackanimationpausenopausesetSpeedNumber设置播放速度，1表示1倍速，0.5表示0.5倍速setDirectionNumber正反转播放，1表示正转，-1表示反转]跳转到某一帧或某一秒，第二个参数iFrame根据帧模式或时间，默认为falseplaySegmentsArray，[Boolean]playsegment，参数1为数组，两个元素分别为起始帧和endframe;参数2是是否立即播放片段，或者等待前面的动画完成销毁而不销毁onCompleteonLoopCompleteonEnterFrameonSegmentStarty事件你也可以使用addEventListener与以下事件：completeloopCompleteenterFramesegmentStartconfig_ready（当初始配置完成时）data_ready（当所有部分动画已经加载have)DOMLoaded（当元素已经添加到DOM时）destroyAdvancedusageModiLottie中的fy图片动态修改Lottie中的文字使用async/await来优雅地控制LottiePlayLottie更多应用方向可控动画由于Lottie动画可以通过程序控制来播放，很多营销活动页面的动画可以考虑使用Lottie实现抽奖互动形式如很常见的“大转盘”和“彩票机”。如果设计者做一个更精致的抽奖动画，我们只需要在用户点击抽奖时调用.play()来控制Lottie的播放，页面体验会比短视频更高。今年在淘宝的商品详情里，短视频已经成为一种趋势，但其实很多视频都是可以用Lottie来实现的（其实设计工具可能是AE）。一方面，文件大小更小。另一方面，Lottie的技术方案可以轻松替代动画中关键的“文案”。交互式动画是由于Lottie的JSON内容描述了动画关键帧、位移轨迹等各种细节，所以如果在动画播放时根据用户交互动态改变这些参数，就可以实现交互动画。简单的游戏甚至可以使用Lottie自带的播放控制功能。以做一些简单的游戏为例，下面是我们业务最近的一个例子，动画比如掷骰子，蚂蚁走楼梯等，使用Lottie的例子：https://www.yuque.com/lottie/。..工具库Lolita：https://design.alipay.com/lolita功能：可以用来压缩动画源文件，查看动画文件的相关属性（动画时间，帧数，画布大小...)导出不同格式的文件动画编辑魔良：https://design.alipay.com/emo...作为一站式动画制作平台，帮助零基础用户通过海量动画素材轻松完成动画制作，视觉编辑能力
