原文:https://mp.weixin.qq.com/s?__biz=MzIxNjc0ODExMA==&mid=2247485033&idx=1&sn=54dd477b4c4cd30d12fde48eba929546&chksm=97851f48a0f2965e342a2cdf55cbefceaa20a24b887e2b79ff940ca57a17b6cb9ae999643ace#rd

设计师使用 After Effects 设计出完美的动画,然后通过 Bodymovin 插件进行简单的转换和导出成 JSON,最后工程师将 JSON 放入 App 项目中,就可以将动画 100% 还原到产品中。

缺陷:

系统版本限制,Android(Api 14+) 和 iOS(>=8.0) 都有不同的版本限制。

有一些交互动画,不被支持,哪怕导出了也无法被正常执行。

Bodymovin 插件还有待完善,有些 After Effects 实现的效果,无法被正常导出。

开始使用:

compile 'com.airbnb.android:lottie:2.0.0-beta4'

最简单的使用方式是直接使用 LottieAnimationView ,LottieAnimationView 直接继承自 AppCompatImageView 。

只需要提前将动画的 JSON 文件,放在 app/src/main/assets 目录下,在 Layout 布局文件中,可以直接使用。

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />

或者你也可以使用逻辑代码去控制 Lottie 动画的播放

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
animationView.playAnimation();

它支持几个属性:

lottie_fileName : 播放动画的 json 文件。

lottie_loop:是否循环播放,默认为 false。

lottie_autoPlay:是否加载完成之后,自动播放,默认为 false。

获取网络上的动画:

try {
JSONObject json = new JSONObject(Const.json);
LottieComposition.Factory.fromJson(getResources(), json, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
lottie1.setProgress(0);
lottie1.loop(true);
lottie1.setComposition(composition);
lottie1.playAnimation();
}
});
} catch (JSONException e) {
e.printStackTrace();
}

Lottie 使用的更多相关文章

  1. Lottie简介(翻译)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6364634.html Lottie简介(翻译) 新的向本地ap ...

  2. Lottie安卓开源动画库使用

    碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...

  3. iOS开发之 Lottie -- 炫酷的动效

    动效在软件开发中非常常见,炫酷的动画能提升应用的B格,然而由设计师的设计转化成程序猿GG的代码是个非常"痛苦"的过程.对于复杂动画,可能要花费很多时间去研究和实现.Lottie 的 ...

  4. 站在 Android 开发的角度,聊聊 Airbnb 的 Lottie!!!

    一.前言 你有没有遇上一些设计师,对一些酷炫的动画着迷,喜欢根据场景设计出可爱而流畅的动画.但是在实际工作中,哪怕开发人员也觉得这些动画非常的棒,可我们知道,越是定制化的动画,实现起来将会越麻烦和耗时 ...

  5. Lottie的使用

    一.简介 Lottie是Airbnb开源的一个面向IOS.Android.React Native的动画库,能分析Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样 ...

  6. Android之Lottie动画详解

    文章大纲 一.Lottie介绍二.Lottie实战三.项目源码下载四.参考文章   一.Lottie介绍 1. 什么是Lottie   Lottie是Android和iOS的移动库,用于解析Adobe ...

  7. 程序员也想改 Lottie 动画?是的!

    一.前言 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好.完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿 ...

  8. 使用Lottie将AE项目转换为 Web 原生动画

    使用Lottie转换AE项目为 Web 原生动画 首先打开链接https://github.com/airbnb/lottie-web/blob/master/build/extension/body ...

  9. Lottie 动画里有图片怎么办?设计师小姐姐也能帮你减少开发量!

    一.序 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整解决方案,设计师只需要使用 After Effectes (之后简称 AE)设计出动画之后,使用 Lotti ...

  10. 在vue里添加好看的lottie动画 (^_^)

    为什么用lottie ★~★ 1.能让你的程序不那么单调 2.能让一些有审美强迫症的同学好受一点 3.网上有丰富的资源 点我进入lottie资源网站 引入lottie库 (>.<) 在vu ...

随机推荐

  1. 【接口】HttpClient 处理get和post请求(二)(2019-07-14 18:41)

    一.环境准备 1.导入httpClient依赖包 <dependency> <groupId>org.apache.httpcomponents</groupId> ...

  2. 【java+selenium3】JavaScript的调用执行 (十)

    JavaScript的调用 在web自动化操作页面的时候,有些特殊的情况selenium的api无法完成,需要通过执行一段js来实现的DOM操作: //执行方式 JavascriptExecutor ...

  3. 目录扫描工具 dirsearch 使用详解

    介绍 dirsearch 是一个python开发的目录扫描工具.和我们平时使用的dirb.御剑之类的工具一样,就是为了扫描网站的敏感文件和目录从而找到突破口. 特点 多线程 可保持连接 支持多种后缀( ...

  4. 1.在项目中使用D3.js

    在项目中使用D3.js D3.js(全称:Data-Driven Documents)是一个基于数据操作文档的JavaScript库.D3帮助您使用HTML.SVG和CSS使数据生动起来.D3对web ...

  5. 手把手教你学Dapr - 5. 状态管理

    上一篇:手把手教你学Dapr - 4. 服务调用 介绍 使用状态管理,您的应用程序可以将数据作为键/值对存储在支持的状态存储中. 您的应用程序可以使用 Dapr 的状态管理 API 使用状态存储组件来 ...

  6. [python]django的mode设置表结构和serializers序列化数据

    框架使用的库版本 python3.6.5 Django-2.0.6 djangorestframework-3.8.2 mysqlclient-1.3.12 1.项目结构声明,数据库在setting. ...

  7. Git 修改已提交的commit注释

    两种情况: 1.已经将代码push到远程仓库 2.还没将代码push到远程仓库,还在本地的仓库中 这两种情况下的修改大体相同,只是第一种情况最后会多一步 下面来说怎么修改 先搞清楚你要修改哪次的提交注 ...

  8. 如何保证redis中存放的都是热点数据

    当redis使用的内存超过了设置的最大内存时,会触发redis的key淘汰机制,在redis 3.0中有6种淘汰策略: noeviction: 不删除策略.当达到最大内存限制时, 如果需要使用更多内存 ...

  9. 【Linux】解压分卷压缩的zip文件

    例如linux.zip.001, linux.zip.002, linux.zip.003. 1. cat linux.zip* > linux.zip #合并为一个zip包. 2. unzip ...

  10. C++构造函数写法

    笔记 class complex{ public: complex (double r = 0, double i = 0) : re(r), im(i) {} private: double re, ...