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 起一个服务, 访问该页面就可以看到效果:
![e246750ee4614bdba286d5e5a367909f.png](https://i-blog.csdnimg.cn/blog_migrate/c4332089f19eedf216e942356caf90f6.png)
极光(Aurora Mobile,纳斯达克股票代码:JG)成立于2011年,是中国领先的开发者服务提供商。极光专注于为移动应用开发者提供稳定高效的消息推送、即时通讯、统计分析、极光分享、短信、一键认证、深度链接等开发者服务。截止到2019年12月份,极光已经为超过50万移动开发者和145.2万款移动应用提供服务,其开发工具包(SDK)安装量累计336亿,月度独立活跃设备13.6亿部。同时,极光持续赋能开发者和传统行业客户,推出精准营销、金融风控、市场洞察、商业地理服务产品,致力于为社会和各行各业提高运营效率,优化决策制定。