程序员经验分享-hwhale

Lottie - 轻松实现复杂的动画效果

2023-05-16

1. Lottie 介绍

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。

Lottie 相关网站：

  • Lottie 官网
  • Lottie on Github
  • Lottie for Android
  • Lottie for iOS
  • Lottie for Web
  • Lottie for React Native

2. Lottie 使用

Lottie 支持 Jellybean (API 16) 及以上版本。最简单的使用方式是直接使用 LottieAnimationView， LottieAnimationView 直接继承自 AppCompatImageView 。

2.1 Lottie 依赖

Gradle 是唯一支持的构建配置，所以只需要在项目的 build.gradle 文件中添加依赖即可:

dependencies {
  implementation "com.airbnb.android:lottie:$lottieVersion"
}
复制代码

最新版本是：

2.2 Lottie 核心类

  • LottieAnimationView：继承自 AppCompatImageView，是加载 Lottie 动画的默认和最简单的方式。
  • LottieDrawable：具有大多数与 LottieAnimationView 相同的 API，因此可以在任何视图上使用它。

2.3 加载动画

Lottie 支持 Jellybean (API 16) 及以上版本。Lottie 动画支持从以下位置加载动画：

  • src/main/res/raw 中的 json 动画。
  • src/main/assets 中的 json 文件。
  • src/main/assets 中的 zip 文件。有关详细信息，请参阅 images docs。
  • json 或 zip 文件的 Url。
  • json 字符串。源可以来自任何东西，包括自己的网络堆栈。
  • json 文件或 zip 文件的 InputStream。

2.3.1 在 XML 中使用

最简单的使用方法是使用 LottieAnimationView。Lottie 支持加载来自 res/raw 或 assets/ 的动画资源。建议使用 res/raw，因为可以对动画通过 R 文件使用静态引用，而不只是使用字符串名称。这也可以帮助构建静态分析，因为它可以跟踪动画的使用。

LottieAnimationView 的常用属性及其功能如下：

属性功能
lottie_fileName设置播放动画的 json 文件名称
lottie_rawRes设置播放动画的 json 文件资源
lottie_autoPlay设置动画是否自动播放(默认为false)
lottie_loop设置动画是否循环(默认为false)
lottie_repeatMode设置动画的重复模式(默认为restart)
lottie_repeatCount设置动画的重复次数(默认为-1)
lottie_cacheStrategy设置动画的缓存策略(默认为weak)
lottie_colorFilter设置动画的着色颜色(优先级最低)
lottie_scale设置动画的比例(默认为1f)
lottie_progress设置动画的播放进度
lottie_imageAssetsFolder设置动画依赖的图片资源文件地址

在 res/raw (lottie_rawRes) 或 assets/ (lottie_fileName) 中存放动画的 JSON 文件，然后就可以在 xml 中直接使用，如下：

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:lottie_rawRes="@raw/hello_world"
        // or
        app:lottie_fileName="hello_world.json"

        app:lottie_loop="true"
        app:lottie_autoPlay="true" />
复制代码

2.3.2 在代码中使用

LottieAnimationView 的常用方法及其功能如下：

方法功能
setAnimation(String)设置播放动画的 json 文件名称
setAnimation(String, CacheStrategy)设置播放动画的 json 文件资源和缓存策略
setAnimation(int)设置播放动画的 json 文件名称
setAnimation(int, CacheStrategy)设置播放动画的 json 文件资源和缓存策略
loop(boolean)设置动画是否循环(默认为false)
setRepeatMode(int)设置动画的重复模式(默认为restart)
setRepeatCount(int)设置动画的重复次数(默认为-1)
lottie_cacheStrategy设置动画的缓存策略(默认为weak)
lottie_colorFilter设置动画的着色颜色(优先级最低)
setScale(float)设置动画的比例(默认为1f)
setProgress(float)设置动画的播放进度
setImageAssetsFolder(String)设置动画依赖的图片资源文件地址
playAnimation()从头开始播放动画
pauseAnimation()暂停播放动画
resumeAnimation()继续从当前位置播放动画
cancelAnimation()取消播放动画

如果不想用 xml 实现，可以通过代码来实现，可以直接加载本地动画资源，也可以从网络请求加载动画。

  • 从 res/raw 或 assets/ 加载动画资源：
LottieAnimationView animationView = ...

animationView.setAnimation(R.raw.hello_world);
// or
animationView.setAnimation(R.raw.hello_world.json);

animationView.playAnimation();
复制代码

该方法在后台加载文件并解析动画，并在完成后异步开始渲染。

  • 从网络请求加载动画： Lottie 的一个优点是可以从网络请求加载动画。所以，应该将网络请求的响应内容转换为字符串格式。Lottie 使用一个流化的 json 反序列化器来提高性能和内存使用率，所以不要将它转换成您自己的 JSONObject，这只会损害性能。
LottieAnimationView animationView = ...
// This allows lottie to use the streaming deserializer mentioned above.
JsonReader jsonReader = new JsonReader(new StringReader(json.toString()));
animationView.setAnimation(jsonReader);
animationView.playAnimation();
复制代码

2.4 Lottie 的缓存策略

你的应用程序中可能会有一些经常使用的动画，比如加载动画等等。为了避免每次加载文件和发序列化的开销，你可以在你的动画上设置一个缓存策略。上面所有的 setAnimation APIs都可以采用可选的第二个参数 CacheStrategy。在默认情况下，Lottie 将保存对动画的弱引用，这对于大多数情况来说应该足够了。但是，如果确定某个动画肯定会经常使用，那么请将其缓存策略更改为 CacheStrategy.Strong；或者如果确定某个动画很大而且不会经常使用，把缓存策略改成 CacheStrategy.None。

CacheStrategy 可以是None、Weak 和 Strong 三种形式来让 LottieAnimationView 对加载和解析动画的使用强或弱引用的方式。弱或强表示缓存中组合的 GC 引用强度。

2.5 直接使用 LottieDrawable

LottieAnimationView 是基于 LottieDrawable 的一个包装好的 ImageView 。LottieAnimationView 上的所有 API 都在 LottieDrawable 上进行镜像，因此可以创建自己的实例并在任何可以使用drawable的地方使用它，例如自定义 View 或菜单。

2.6 使用 LottieComposition 去预加载动画

动画的支持模型是 LottieComposition。在大多数情况下，在 LottieAnimationView 或 LottieDrawable 上调用 setAnimation(…) 便足够了。但是，如果要预加载动画以使其立即可用，则可以使用 LottieComposition.Factory API返回可以直接在 LottieAnimationView 或 LottieDrawable 设置的 LottieComposition 对象。同样，通常不需要自己添加管理 compositions 的开销。LottieAnimationView 中的默认缓存足以满足大多数用例的需要。

LottieAnimationView animationView = ...;
 ...
 Cancellable compositionLoader = LottieComposition.Factory.fromJsonString(getResources(), jsonString, (composition) -> {
     animationView.setComposition(composition);
     animationView.playAnimation();
 });

 // Cancel to stop asynchronous loading of composition
 // compositionCancellable.cancel();
复制代码

2.7 动画监听

animationView.addAnimatorUpdateListener((animation) -> {
    // do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
    // do something.
}
...
animationView.setProgress(0.5f);
...
复制代码

在更新侦听器回调中：

  • animation.getAnimatedValue() 将返回动画的播放进度，而不考虑当前设置的最小/最大帧[0,1]。
  • animation.getAnimatedFraction() 将返回动画的播放进度，同时考虑设置的最小/最大帧[minFrame，maxFrame]。

2.8 控制 Lottie 动画执行的速度和时长

尽管 playAnimation() 对于绝大多数用例来说已足够，但可以在更新回调中调用 setProgress(...) 方法为自己的动画设置进度。

// Custom animation speed or duration.
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
animator.addUpdateListener(animation -> {
    animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
复制代码

2.9 循环播放

可以像使用 ValueAnimator 一样通过 setRepeatMode(...) 或 setRepeatCount(...) 方法控制动画的循环播放，或者你直接在 xml 中使用 lottie_loop="true" 开启循环播放。

2.10 动画尺寸（px vs dp）

Lottie 将 After Effects 中的所有 px 值转换为设备上的 dps，以便在设备上以相同的大小呈现所有内容。这意味着它不是在 After Effects 中制作1920x1080的动画，而是在After Effects中更像411x731px，它大致对应于当今大多数手机的dp屏幕尺寸。

但是，如果您的动画不是完美尺寸，则有两种选择：

2.10.1 ImageView scaleType

LottieAnimationView 是一个包装好的 ImageView，它支持 centerCrop 和 centerInside，所以可以像使用其他 image 一样使用这两个工具方法。

2.10.2 Lottie setScale(...)

LottieAnimationView 和 LottieDrawable 都有 setScale(float) API，可以使用它来手动放大或缩小动画。这很少有用，但可以在某些情况下使用。

如果动画执行缓慢，请务必查看有关性能的文档。但是，可以尝试使用 scaleType 缩放动画，这将减少 Lottie 每帧渲染的数量。如果你有大的 mask 和 mattes，这将特别有用。

2.11 播放动画片段

播放/循环动画的单个部分通常很方便。例如，动画的前半部分可能处于“开启”状态，下半部分处于“关闭”状态。LottieAnimationView 和 LottieDrawable 有用于控制当前段的 API：

setMinFrame(...)

setMaxFrame(...)

setMinProgress(...)

setMaxProgress(...)

setMinAndMaxFrame(...)

setMinAndMaxProgress(...)
复制代码

循环API将遵循此处设置的最小/最大帧。

3. 原理介绍

3.1 Lottie 动画 Json 文件结构

Lottie动画Json结构分为4层：

  1. 结构层：可以读取到动画画布的宽高，帧数，背景色，时间，起始关键帧，结束帧等信息。
  2. asset：图片资源信息集合，这里放置的是 制作动画时引用的图片资源。
  3. layers：图层集合，这里可以获取到多少图层，每个图层的开始帧 结束帧等。
  4. shapes：元素集合，可以获取到每个图层都包含多个动画元素。

3.2 Lottie 分层渲染原理

LottieComposition 负责将 json 文件解析成数据对象， LottieDrawable 负责将 LottieComposition 解析的对象 绘制成 drawable 显示在 View 上。

3.3 Lottie 动画运行流程图

4. 使用准备

4.1 下载安装 After Effects

下载并安装最新版本的 Adobe After Effects。

下载地址：www.adobe.com/cn/products…

4.2 下载安装 Bodymovin

下载并安装最新版本的 After Effects Bodymovin Extension。

  1. 如果打开，关闭 After Effects；

  2. 安装 ZXP Installer 安装程序；

下载地址：aescripts.com/learn/zxp-i…

  1. 下载最新的 bodymovin 扩展；

下载地址：github.com/airbnb/lott…

  1. 打开 ZXP Installer 并将 bodymovin 扩展名拖到窗口中；

  2. 打开 After Effects。

在“Window> Extensions”菜单下，您应该看到“Bodymovin”

4.3 Lottiefiles 示例应用程序

可以自己构建示例应用程序，也可以从 Google Play 或 App Store 上下载 Lottie 示例应用程序。示例应用程序包含一些内置动画，但也允许您从内部存储或从 url 加载动画。

在完成这三件事之后，请在 SVG / Sketch 到 Lottie 演练 或 Illustrator 到 Lottie 演练 中查看一些工作流程概述。

5 LottieFiles

LottieFiles 提供了很多设计师上传的 Lottie 动画，并提供预览的效果，并且可以直接下载成 JSON ，或者生成二维码，可供 Lottie App 扫描看效果，非常的方便。

LottieFiles：www.lottiefiles.com/

Lottie-editor：github.com/sonaye/lott…

LottieFiles 本身已经支持使用 Lottie-editor 去编辑动画。如果需要对某个动画进行修改，只需要在动画的预览界面，点击右上角的 Customize with Bodymovin Editor，即可直接对该动画进行编辑。

6. 致谢

  1. airbnb.io/lottie
  2. 程序员也想改 Lottie 动画？是的！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Lottie

轻松实现复杂的动画效果

Lottie - 轻松实现复杂的动画效果 的相关文章

  • vue使用lottie web插件渲染动画

    1 先安装相应的插件 npm install lottie web save 2 引入插件 我这里是局部引入的 import lottieWeb from 39 lottie web 39 3 使用 xff0c 整体代码如下 xff0c 我

  • Android中使用lottie资源

    lottie资源的使用 1 下载lottie文件的网址 xff1a https lottiefiles com xff0c 下载的文件为 json的文件 2 存放在Android的位置为 3 在应用级别的 build gradle 文件中添

  • 一款非常好用的动画库Lottie

    简介 Lottie是Android和iOS的移动图书馆 xff0c 用于解析Adobe After Effects动画 xff0c 并以Bodymovin作为json导出 xff0c 并在手机和网络上本机呈现 该项目在GitHub已经获得三

  • Lottie源码分析

    简介 我们使用Lottie的时候 xff0c 最关键的类就是LottieAnimationView 继承自ImageView 和LottieDrawable 继承自Drawable xff0c Lottie的描述文件最终会解析成一系列的La

  • Lottie进阶和原理分析

    简介 Lottie是aribnb发布的开源库 xff0c 它可以将AE制作的动画在Android iOS和RN代码中渲染出来 Lottie的功能及其强大 xff0c 只需要设计师使用AE设计动画 xff0c 用bodymovin导出 xff

  • Lottie - 轻松实现复杂的动画效果

    1 Lottie 介绍 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案 xff0c 设计师可以使用 Adobe After Effects 设计出漂亮的动画之后 xff0c 使用 Lottic 提供的 Bodymo

  • android lottie字体json,Lottie 读取 JSON 文件实现动画

    Lottie Lottie 是 Airbnb 开源的一个动画项目 xff0c 它支持 iOS mac OS Android RN xff0c 由于某些复杂动画的实现 xff0c 往往会写很多的 code 来实现它 xff0c 而且调试动画的

  • json格式的动图播放--Lottie插件

    在vue里添加的lottie动画 简书

  • Lottie—json文件解析

    Lottie主要类图 xff1a Lottie对外通过控件LottieAnimationView暴露接口 xff0c 控制动画 LottieAnimationView继承自ImageView xff0c 通过当前时间绘制canvas显示到界

  • 在vue项目中使用Lottie动画(随看随用)

    前言 xff1a Lottie是一个IOS xff0c Android和React Native库 xff0c 可以实时渲染动画 xff0c 动画被转化成JSON文件 xff0c 节省了很多资源 xff0c 允许应用程序像使用静态图像一样轻

  • Lottie动画 轻松使用

    Android 敏捷开发助手 Lottie动画 轻松使用PNG JPG等普通图片高保真转SVG图Android 完美的蒙层方案Android MMKV框架引入使用强大无匹的自定义下拉列表Google Protobuf 实践使用开发 Andr

  • React、Ant Desgin自定义加载动画，lottie-web 将json解析成动画

    在项目中 xff0c 遇到需要在网页首屏 xff0c 展示动画的需求 xff0c 你会想到怎么做 xff1f 思路一 xff1a 设计师导出gif图片 xff0c 用img进行展示 缺点 xff1a 图片失真 xff0c 影响效果 思路二

  • Lottie动画

    Lottie动画 2018 1 17 13 19 08 地址 https github com airbnb lottie androidhttps www lottiefiles com Lottie是什么 xff1f Lottie 中文

  • Lottie 动画AE+Bodymovin导出的JSON文件解读

    lottie动画的json配置object 名称定义v使用bodymovin的版本assetes图片集合layers图层集合w视图的宽度h视图的高度ip起始关键帧op结束关键帧fr帧率 动画时间 61 op ip fr 在AE制作视频是的开

  • 洛蒂和 RecyclerView

    我在用着Lottie https github com airbnb lottie androidRecyclerView 的 ViewHolder 内的动画 滚动时 帧速率太低 即使动画暂停也会发生这种情况 对这个问题有什么建议或解决方案

  • Flutter Web：Lottie 动画在 Android Chrome 上被裁剪，但 Windows Chrome 没问题

    我使用 Lotie 动画 将 Flutter 编译并部署为 Web 应用程序 它在桌面 chrome 上运行良好 但在 android chrome 上运行不佳 有人知道问题所在吗 Flutter Channel 稳定版 3 3 1 在 M

  • 使用 Lottie 自定义 UIRefreshControl

    我的目标是替换默认的微调器UIRefreshControl与洛蒂动画 我的问题是 当我拉下动画时 动画不会立即播放UICollectionView其子视图是UIRefreshControl 仅当我稍微向下滚动并暂停手指时才会播放动画 当我再

  • 在 Flutter 中使用 After Effects 文件

    我知道如何导出Rive在 Flutter 应用程序中使用的 Flare 文件 但我怎样才能import Adobe 后遗症文件到 Rive 我知道可以这样做Lottie但我无法弄清楚如何准确地做到这一点 您可以轻松导入 bodymovin

  • 如何获取 Lottie 动画中可用的总帧数？

    我在我的 Android 应用程序中使用随机 Lottie 动画 我需要知道 Lottie 动画中使用的总帧数 根据总帧数 我想将动画从第一帧循环到特定帧 例如 如果 Lottie 文件包含 60 帧 那么我想执行从 1 到 我正在使用以下

  • 如何在MVVM架构中将animationview play与LottieForms绑定？

    所以我在列表视图中处理动画 并且我想随时播放一次 所以我想控制它 这是图书馆https github com martijn00 LottieXamarin https github com martijn00 LottieXamarin

随机推荐

  • 设计模式之(十三)备忘机制Memento

    Memento备望录模式定义 memento是一个保存另外一个对象内部状态拷贝的对象 这样以后就可以将该对象恢复到原先保存的状态 Memento模式相对也比较好理解 我们看下列代码 public class Originator publi

  • 从点击Button到弹出一个MessageBox， 背后发生了什么

    思考一个最简单的程序行为 xff1a 我们的Dialog上有一个Button xff0c 当用户用鼠标点击这个Button时 xff0c 我们弹出一个MessageBox 这个看似简单的行为 xff0c 谁能说清楚它是如何运行起来的 xff

  • Windows 7 封装篇（一）【母盘定制】[手动制作]定制合适的系统母盘

    Windows 7 封装篇 xff08 一 xff09 母盘定制 手动制作 定制合适的系统母盘 http www win10u com article html 10 html Windows 7 封装篇 xff08 一 xff09 母盘定

  • #ifdef __cplusplus 倒底是什么意思？

    时常在cpp的代码之中看到这样的代码 ifdef cplusplus extern 34 C 34 endif 一段代码 ifdef cplusplus endif 这样的代码到底是什么意思呢 xff1f 首先 xff0c cplusplu

  • ping过程详细解读

    0 前言 在讲解ping过程之前 xff0c 我们需要了解以下概念 1 何为ping PING Packet Internet Groper xff0c 因特网包探索器 xff0c 用于测试网络连通性的程序 Ping发送一个ICMP Int

  • 使用源码安装MariaDB

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 系统 xff1a CentOS 6 5 x86 64 为什么源码安装 xff1f 自定义编译参数 xff0c 编译器优化 xff0c 自定义安装位置 源码安装系统需求 xf

  • VS2015配置Linux开发远程调试

    VS2015配置Linux开发远程调试 简介 vs2015支持跨平台开发 软件环境 VS2015 update3 Visual C 43 43 for Linux Development VC Linux exe 安装步骤 安装VS2015

  • 将linux文件中的tab更换为空格的三种方法

    将linux文件中的tab更换为空格的三种方法 1 xff0c 用sed命令 sed s t g filename gt filename1 2 用tr命令 cat filename tr 34 t 34 34 34 gt filename

  • React生命周期-踩坑记_10

    React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态 xff1a Mounting xff1a 已插入真实 DOMUpdating xff1a 正在被重新渲Unmounting xff1a 已移出真实 DOMcom

  • 转录组入门（5）： 序列比对

    欢迎来GitHub上fork xff0c 一起进步 xff1a https github com xuzhougeng 比对软件很多 xff0c 首先大家去收集一下 xff0c 因为我们是带大家入门 xff0c 请统一用hisat2 xff

  • amavisd 规则备忘

    邮件服务器在做内容过滤 xff0c 结果误杀好多邮件 xff0c 有一些常用规则再现 xff0c 记录一下 20150113 初版 amavisd 版本为2 6 4 https wiki apache org spamassassin Ru

  • TensorFlow Lite 支持移动 GPU，速度推测提升4-6倍

    最近 xff0c 开源机器学习框架 TensorFlow Lite 更新 xff0c 新版更新支持了 GPU 支持 GPU 原因 虽然移动设备的处理能力和功率都有限 虽然 TensorFlow Lite 提供了不少的加速途径 xff0c 比

  • Linux开机启动顺序简述

    Linux的开机启动顺序 第一步 xff1a 当然是加电了 第二步 xff1a 加载BIOS设置 xff0c 选择启动盘 这是因为因为BIOS中包含了CPU的相关信息 设备启动顺序信息 硬盘信息 内存信息 时钟信息 PnP特性等等 在此之后

  • IdentityServer4 实现 OpenID Connect 和 OAuth 2.0

    关于 OAuth 2 0 的相关内容 xff0c 点击查看 xff1a ASP NET WebApi OWIN 实现 OAuth 2 0 OpenID 是一个去中心化的网上身份认证系统 对于支持 OpenID 的网站 xff0c 用户不需要

  • 使用MakeSureDirectoryPathExists 创建多级目录

    The MakeSureDirectoryPathExists function creates all the directories in the specified DirPath beginning with the root BO

  • gnome桌面显示计算机,使用 GNOME 桌面

    Fedora 12 默认使用 GNOME 作为窗口管理器 Window Manager xff0c GNOME 的目标是基于自由软件 xff0c 为 Unix 或者类 Unix 操作系统构造一个功能完善 操作简单以及界面友好的桌面环境 xf

  • jQuery匹配各种条件的选择器用法

    hidden 匹配所有的不可见元素 xff0c input 元素的 type 属性为 34 hidden 34 的话也会被匹配到 Matches all elements that are hidden or input elements

  • 加ing形式的单词有哪些_利用英语原版教材轻松记单词快乐学语法

    英语中 xff0c 不定冠词有a和an两种形式 区别在an多了一个辅音字母n xff0c 其作用是在元音之间起分隔作用 强烈建议家长和小朋友一起重点学习英语中的五个元音并牢记相应的音标 很多朋友发音不好 xff0c 重要原因是元音不到位 x

  • linux 批量登录脚本,批量登陆linux主机脚本

    test sh bin bash dir 61 home test while read line do host 61 96 echo line awk print 1 96 passwd 61 96 echo line awk prin

  • Lottie - 轻松实现复杂的动画效果

    1 Lottie 介绍 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案 xff0c 设计师可以使用 Adobe After Effects 设计出漂亮的动画之后 xff0c 使用 Lottic 提供的 Bodymo

热门标签