为什么80%的码农都做不了架构师？>>>

一款Lottie的动画库，效果挺好，查了一下发现这款动画库可以支持H5。它能够同时支持iOS、Android、ReactNative和H5的开发。Lottie动画库和Bodymovin的AE插件结合，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。

Web:https://github.com/airbnb/lottie-web

iOS:https://github.com/airbnb/lottie-ios

Android:https://github.com/airbnb/lottie-android

1、Web案例：

1.1导出JSON动画文件

如何导出json文件，请查看以下联接：

https://www.cnblogs.com/zamhown/p/6688369.html

1.2下载JS文件

在GitHub下载js文件：

1.3编写HelloWorld

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bodymovin Demo</title><script src="lottie.js"></script><style>#animation{width: 300px;height: 300px;}</style>
</head>
<body><div id="animation"></div><script>bodymovin.loadAnimation({path:'data.json',   //json文件路径loop:true,autoplay:true,renderer:'svg',  //渲染方式，有"html"、"canvas"和"svg"三种container:document.getElementById('animation')});//  bodymovin.setSpeed(2);//  bodymovin.setDirection(-2);</script>
</body>
</html>

2、bodymovin.loadAnimation属性

animationData: 包含导出的动画数据的对象。
path: 动画数据文件的相对路径。 (animationData 和 path 参数是互斥的)
loop: 循环设置，值为true / false / number（循环/不循环/循环n次（n为输入值））
autoplay: 自动播放设置。true为准备就绪后自动播放，false为不自动播放。
name: 动画名，用于后续引用。
renderer: 选择渲染器，值为'svg' / 'canvas' / 'html' 。
container: 需要渲染动画的dom元素。

3、bodymovin相关方法:

bodymovin.play() -- 播放指定动画，1个参数动画名。
bodymovin.stop() -- 停止播放指定动画，1个参数动画名。
bodymovin.setSpeed() -- 第一个参数设置动画速度 (1为正常速度），第二个参数动画名可选。
bodymovin.setDirection() -- f播放方向，正数和0为正常播放，负数为倒放，第二个参数动画名可选。
bodymovin.searchAnimations() -- 检测class值为"bodymovin"的元素。
bodymovin.loadAnimation() -- 前面已有介绍，返回一个可单独控制的动画实例。
bodymovin.destroy() --销毁和释放资源。 DOM 元素将会被清空。
bodymovin.registerAnimation() -- 你可以直接用registerAnimation来注册一个自定义元素，它必须包含"data-animation-path"属性并指向data.json的地址。
bodymovin.setQuality() -- 画质设置，调整动画播放器性能。默认为高画质(high), 可选值为'high'、'medium'、'low', 或者大于1的数字。对于有的动画这些设置差别不大。

转载于:https://my.oschina.net/sdlvzg/blog/1812142

Lottie开源动画库相关推荐

AE 动画直接变原生代码：Airbnb 发布开源动画库 Lottie
原文 Airbnb 发布的 Lottie 是一个面向 iOS.Android 和 React Native 的开源动画库. 简单来说,就是可以直接利用 AE 导出的 JSON 动画文件,将其解析为原生 ...
Lottie安卓开源动画库使用
碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...
android动画帧率_Android动画进阶—使用开源动画库nineoldandroids
前言 Android系统支持原生动画,这为应用开发者开发绚丽的界面提供了极大的方便,有时候动画是很必要的,当你想做一个滑动的特效的时候,如果苦思冥想都搞不定,那么你可以考虑下动画,说不定动画轻易就搞定 ...
Facebook开源动画库 POP-POPBasicAnimation运用
动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:h ...
效果惊艳的开源动画库，不仅牛逼，还很小巧
大家好,我是老鱼!一名资深的互联网玩家,专注分享大前端领域技术.面试宝典.学习资料等~ 新年公司派给我的第一个项目就是一个小游戏,游戏中涉及到一部分动画,今天就给大家推荐一款小巧而又强大的动画库:an ...
lottie-android: 【Android】开源动画库（Airbnb开源）
Lottie支持Android.iOS.React Native平台,支持实时渲染After Effects动画,使得app中使用动画可以像使用静态资源一样简单. dependencies {impl ...
追踪app崩溃率、事件响应链、Run Loop、线程和进程、数据表的优化、动画库、Restful架构、SDWebImage的原理...
1.如何追踪app崩溃率,如何解决线上闪退当 iOS设备上的App应用闪退时,操作系统会生成一个crash日志,保存在设备上.crash日志上有很多有用的信息,比如每个正在执行线程的完整堆栈跟踪信 ...
动画库 Lottie 的使用
本文主要介绍动画开源库 Lottie 在 Android 中的使用. 前言在日常APP开发中,为了提升用户感官舒适度等原因,我们会在APP中加入适量动画. 而传统手写动画方式往往存在诸多问题: 动画 ...
lottie android 源码,Lottie动画库 Android 端源码浅析
惊艳的Lottie 前段时间airbnb开源的动画库Lottie得到了不错的反响,旨在解决Android.IOS.RN 上面开发动画成本高.表现不一致的问题,可以说降低了三端动画的开发成本. 先上几个 ...

Lottie开源动画库