lottie动画_极光小课堂 | 用 Lottie 实现超炫酷动画

一、简介

Lottie 是 Airbnb 开源的一个面向 iOS、Android、React Native、Web 的动画库，能分析 Adobe After Effects 导出的动画，并且能在移动设备上实现原生动画。

现在使用各平台的代码实现一套复杂的动画，是一件很困难并且耗时的事，我们需要为不同尺寸的屏幕加载不同的素材资源，还需要写大量难维护的代码。而 Lottie 可以做到同一个动画文件，在不同平台上实现相同的效果，极大减少开发时间，实现不同的动画，只需要设置不同的动画文件即可，极大减少开发和维护成本。

二、官方效果图

效果图：

三、使用方法

这里是一个教学视频，介绍了怎样去导出一个基础的动画，和怎么去加载到 html 页面中。

地址：https://www.youtube.com/watch?v=5XMUJdjI0L8

四、基础方法

可以调用 lottie.loadAnimation()启动动画。它采用以下形式将对象作为唯一参数：

animationData：具有导出的动画数据的 Object
path：动画对象的相对路径(animationData 和 path 是互斥的)

loop：true/false/number
autoplay: true/ false

name: 动画名称
renderer'svg'/'canvas'/'html'
container：在其上呈现动画的 dom 元素

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json});

五、举个栗子

本地用 serve 起一个服务， 访问该页面就可以看到效果:

关于极光

极光(Aurora Mobile，纳斯达克股票代码：JG)成立于2011年，是中国领先的开发者服务提供商。极光专注于为移动应用开发者提供稳定高效的消息推送、即时通讯、统计分析、极光分享、短信、一键认证、深度链接等开发者服务。截止到2019年12月份，极光已经为超过50万移动开发者和145.2万款移动应用提供服务，其开发工具包(SDK)安装量累计336亿，月度独立活跃设备13.6亿部。同时，极光持续赋能开发者和传统行业客户，推出精准营销、金融风控、市场洞察、商业地理服务产品，致力于为社会和各行各业提高运营效率，优化决策制定。