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亿部。同时，极光持续赋能开发者和传统行业客户，推出精准营销、金融风控、市场洞察、商业地理服务产品，致力于为社会和各行各业提高运营效率，优化决策制定。

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

极光推送请检查参数合法性_极光小课堂 | 极光推送在人脸识别终端管理系统中的应用...
项目背景最近开发的一款人脸识别终端管理系统,主要包括运营平台.企业后台管理系统.APP 端.智能人脸识别终端模块. 下图是系统的架构图: 其中各个模块之间都需要即时通讯,比如: APP 端用户注册完 ...
接口入参形式_极光小课堂|手把手教你做接口测试
接口测试是项目测试过程中非常重要的一环,测试的对象是接口,所以提早介入测试,对代码逻辑进行全面验证,就会更早的发现程序的问题.同时,接口测试比UI测试效率更高,并且更容易验证极端和异常的情况. 那么什 ...
android 动画后动画效果,Android5.0之后 VectorDrawable实现超炫酷动画效果
标签介绍: , , , 项目中还是用到了一些动画的标签,这里就不做展示了 path android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径 android:pat ...
android lottie字体json,从json文件到炫酷动画-Lottie实现思路和源码分析
从json文件到炫酷动画-Lottie实现思路和源码分析,Lottie是最近Airbnb开源的动画项目,支持Android.iOS.ReactNaitve三个平台,本文分析主要Lottie把json文 ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
高级UI- 属性动画炫酷动画案例+淘宝动画+源码解析+策略模式使用
文章目录属性动画源码: 案例1 案例2 最终效果思路 : 代码 TODU 案例3 加载的炫酷动画. 以及策略模式的使用效果图思路动画分析先实现小圆的旋转动画, 开始在ondraw里面写动画 ...
【Qt炫酷动画】专栏导航目录
历时小半年,经过总结积累,详细剖析了Qt框架如何制作动画. 通过本专栏学习,可以学会如何diy窗体动画.控件动画 Qt动画 [Qt炫酷动画]专栏导航目录 [Qt炫酷动画]0.动画类简介 [Qt炫酷动画 ...
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
6个超炫酷的HTML5电子书翻页动画【转】
6个超炫酷的HTML5电子书翻页动画 WebGL 演示网址:http://bookcase.chromeexperiments.com 相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏 ...
Android 炫酷动画APP,21 款炫酷动画开源框架，照亮你的APP
原标题:21 款炫酷动画开源框架,照亮你的APP 2017年安卓巴士全球开发者论坛-上海站前言最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对 ...

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

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

最新文章

热门文章