Lottie 动效调研与实践

2023-11-09

Lottie 概述

https://airbnb.design/lottie/ Lottie 官网

Lottie 是一个支持多端展示的动效库,相对于 OpenGL 、动画、GIF Lottie 有着他独有的一些优点和优势,例如对比原生动画 api 直接的就节省了开发很大程度上的编码工作量。只需要设计人员通过 AE 去到处他想要的效果即可,对比于 GIF GIF 相对效果差支持 8 位颜色,另外 Lottie 对于包体力增量也有很好的控制,非常值得我们去尝试和应用。

下方链接列出了 Lottie 所支持的设备平台以及功能

https://airbnb.io/lottie/#/supported-features Lottie 官网支持功能

Lottie 中文文档
https://www.yuque.com/lottie/document/readme

Lottie 当然可能也有他的一些不足点,已经有先驱给我们做了一些记录。如果我们开发过程中遇到一些 Lottie 的问题可以翻阅
https://zhuanlan.zhihu.com/p/59794085

在这里插入图片描述
Lottie 应用
Android 版本的 Lottie 目前迭代到的最新 release 版本是 3.7.0 (2021年4月),我们将居理买房 App 中的 Lottie 升级到这个版本然后对其做一个实践

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

我们改造代码,将我们熟悉的 ImageView 修改为 LottieAnimationView ,实际上 LottieAnimationView 也继承自 ImageView。

LottieAnimationView 在 xml 当中支持相当对的自定义属性,例如指定加载的 Lottie 动效文件

在这里插入图片描述
大多数自定义属性都是以 Lottie 开头,我们这里就点到为止。后面会在代码实例中介绍更多的 Lottie 属性方法。

我们将从 AE 导出的 json 文件,放置到项目的 assets 文件夹

在这里插入图片描述
然后在代码中直接这样引用。

目前引用的场景是在 App 中底部 tab 的正反选

在这里插入图片描述
我们再来思考另外一个问题,我们的 APP 有很高的多样化的需求。根据不同的活动要下发不同的样式,底部 tab 也是如此。上面实践的例子是通过加载本地如果我们要动态下发该如何做呢?

通过查询 LottieAnimationView API 我们发现这样一个方法

/**
 * Load a lottie animation from a url. The url can be a json file or a zip file. Use a zip file if you have images. Simply zip them together and
 * lottie
 * will unzip and link the images automatically.
 * <p>
 * Under the hood, Lottie uses Java HttpURLConnection because it doesn't require any transitive networking dependencies. It will download the file
 * to the application cache under a temporary name. If the file successfully parses to a composition, it will rename the temporary file to one that
 * can be accessed immediately for subsequent requests. If the file does not parse to a composition, the temporary file will be deleted.
 * <p>
 * You can replace the default network stack or cache handling with a global {@link LottieConfig}
 *
 * @see LottieConfig.Builder
 * @see Lottie#initialize(LottieConfig)
 */
public void setAnimationFromUrl(String url) {
  LottieTask<LottieComposition> task = cacheComposition ?
      LottieCompositionFactory.fromUrl(getContext(), url) : LottieCompositionFactory.fromUrl(getContext(), url, null);
  setCompositionTask(task);
}

把刚刚本地的 json 文件传到服务(此处感谢文科同学) https://ajiuxian.cn/data.json

代码中进行加载:

在这里插入图片描述

结果和本地加载一直,正常网络状态下也没有感觉比本地加载慢。弱网状态下还未做测试。
好了我们解决了动态下发的问题,我们来看看 Lottie 还有哪些局限性。

Lottie 并不是支持所有从 AE 导出的特效,官网有说明,见下图示例

在这里插入图片描述
这个没有办法直接通过文字描述知道是否支持,我们实际弄了一些效果测试。试错

我们测试了 6 ~ 7 种特效,都不是支持得特别好见下图(图片来自设计部李晟)

在这里插入图片描述
所以实际应用中什么时候用 Lottie 用 gif apng 原生动画我们需要看场景。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Lottie 动效调研与实践 的相关文章

  • 如何在 Flutter 中为 Button 添加渐变?

    有没有办法改变ElevatedButton背景颜色渐变 如果没有一些小瑕疵或问题 例如缺少涟漪效应 不需要的边框 不尊重主题的内容 上述所有解决方案都无法真正发挥作用minWidth对于按钮 The 下面的解决方案没有上述问题 关键部分是使
  • JKS、BKS 和 PKCS12 文件格式

    我正在设置一个无头服务器 该服务器使用用户提供的数据 JS CSS HTML 密钥库 为 Android 构建 Phonegap 混合应用程序 我想进行一些基本的客户端检查 以确保上传的密钥库有效 对于 JKS 文件 我发现可以通过确保提供
  • WifiConfiguration 在 Lollipop 中启用网络

    我正在研究 Wifi 项目 有一个模块可以让用户以编程方式加入 wifi 在 kitkat 及以下版本中它可以成功工作 但在 Lollipop 中它不起作用 这是代码 WifiManager wifiManager WifiManager
  • 关于android Sqlite在多进程情况下的安全性

    在我的应用程序中 存在多个进程 并且在每个进程中 我需要访问同一个SQLite数据库 当然 这意味着超过2个线程 所以我不仅担心SQLite的线程安全性 还担心SQLite的线程安全性 还有过程安全 这种情况的一种解决方案是使用内容提供者
  • 不支持动态值作为注释中的属性 - AspectJ Android [AOP Android]

    我正在使用自定义注释来记录用户单击的 id 但我收到一个错误 属性值必须是常量 我的代码片段如下 mAssetId Asset getContentId TrackEvent track event ArrayParams Params k
  • 应用程序启动时立即隐藏导航栏

    基于以下代码片段 我能够隐藏状态栏当应用程序启动时 但不是导航栏 由后退 主页和任务管理器按钮组成的栏 因为它隐藏了稍后在 MainActivity 的线程完成加载后 这是清单
  • 如何以编程方式从 mipmap 文件夹加载图像? [复制]

    这个问题在这里已经有答案了 如何从 加载图像mipmap以编程方式保存文件夹 与可绘制对象一样 img setImageResource imageId 我使用的是Android Studio 1 2 1 In 安卓工作室我们有mipmap
  • 找不到 RecyclerView 类 android.support.v7.recyclerview.R$styleable

    我在我的应用程序上使用 RecyclerView 但在运行时应用程序崩溃并且我的 logcat 读取 java lang RuntimeException Unable to start activity ComponentInfo com
  • 无法打开本地终端

    我尝试在 Android Studio 中初始化我的终端 但它给了我错误 它说 无法打开本地终端 java io IOException 无法创建 PTY 我的电脑运行的是 Windows 10 如何解决这个问题 当您从 Github 存储
  • Droid 3 上的列表视图背景为灰色

    我有一个带有自定义背景的列表框 它在黑色背景的两侧显示一条细白线 在我所有的测试手机 Galaxy Captivate Vibrant Nexus 1 G Tablet Archos 32 Droid 上运行良好 我刚买了一台 Droid
  • 适用于 Droid 手机的数学或 LaTeX 引擎 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 Android 手机有可用的数学或 LaTeX 引擎吗 我最喜欢的抽认卡应用程序 AnyMemo 似乎
  • 无法调整 Android React Native 模块中线性布局子项的大小

    完整代码在这里 https github com sbaar ResizableLLRN 这里有关于 java 中正确行为和 React Native 中错误行为的视频 https drive google com file d 0Bxl2
  • 创建用于 Android 库分发的 JAR

    我正在开发一个 android 库 并希望导出一个 JAR 文件 我可以分发该文件供其他人在他们的应用程序中使用 我不想分发源代码 因为它包含有关发布到我的网络服务器的详细信息 我尝试使用在 bin 目录中创建的 JAR 文件并将该 jar
  • 在 Android 5 上支持 BLE 外设角色的芯片组 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 Android 5 0 Lollipop 引入的新 BLE 外设模式将不会在 Nexus 4 5 或 7 上启用 https code
  • 为什么设置 MediaRecorder 时显示错误 IllegalStateException?

    我的代码设置 MediaRecorder 它显示行集质量错误 mMediaRecorder new MediaRecorder Step 1 Unlock and set camera to MediaRecorder mCamera st
  • Android Youtube API 可用吗? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有适用于 Android 的 YouTube API 吗 如果不是 除了通过网络浏览器之外 如何从 Yo
  • Android - 具有可序列化对象的 SharedPreferences

    我知道 SharedPreferences 有putString putFloat putLong putInt and putBoolean 但我需要存储一个类型的对象Serializable in SharedPreferences 我
  • Android 如何从我的应用程序使用 SD 卡中的文件路径预览图像

    文件存在于sdcard image jpg我想创建我自己的应用程序 活动 按下按钮时 需要使用内置图像查看器显示存储在 SD 卡中的图像 按图像查看器中的后退按钮后 它应该返回到我正在运行的应用程序 需要一些帮助 您可以为此创建一个具有适当
  • Android EditText 不起作用,android:imeOptions="actionNext" android:inputType="phone"

    我已经尝试过了 只有删除android inputType phone 键盘回车可以跳转到下一个EditText 不知道大家之间是否有过一些冲突android imeOptions actionNext and android inputT
  • 如何为背景图像添加内边距

    我有一个LinearLayout其中有一个背景图像 一个 9 修补的 png 文件 如何向左和右添加填充 以使背景图像不占据整个宽度 我努力了android paddingLeft and android paddingRight 但这并没

随机推荐

  • java的windows脱机,Win32 API LogonUser对本地帐户的脱机访问

    是否有一系列标志允许 LogonUser 在计算机未连接到网络时返回可用于冒充本地用户的令牌 但所有帐户已在本地存在 我有域帐户执行应用程序 MYDOMAIN FooUser 而我正试图获得一个假冒令牌 MYLAPTOP TestUser
  • Kubernetes快速入门

    前言 本文旨在为Kubernetes入门使用者 提供使用Kubernetes需要掌握的基本知识 1 基础概念 1 1 集群与节点 kubernetes是一个开源的容器引擎管理平台 实现容器化应用的自动化部署 任务调度 弹性伸缩 负载均衡等功
  • 罗剑锋透视HTTP协议学习笔记---26

    26 信任始于握手 TLS1 2连接过程解析 TLS的几种子协议及结构 一个TLS报文由若干记录层 Record Layer 组成 记录层相当于是一个消息容器 承载其它协议 它包括一个TVL 描述其承载的其它协议 如上图 这是一个Serve
  • git 拉取上游仓库tag并同步

    git remote add upstream https github com xxxx xxxx git git fetch upstream tag vX X git tag git push origin refs tags vX
  • 拦截验证每个请求的权限

    前面做的虽然在界面内看不见没有权限的链接 但可以直接在地址栏输入链接进行访问 所以我们这里要使用拦截器拦截每个访问action的请求 1 struts配置
  • C++ 实现守护进程

    文章目录 1 守护进程概念 1 什么是守护进程 2 守护进程的特点 3 如何查看linux系统中已存在的守护进程 2 守护进程编写的步骤 3 示例 1 守护进程概念 1 什么是守护进程 Linux Deamon守护进程是运行在后台的一种特殊
  • 爬虫高级应用(14. 可见即可爬Selenium)

    本章主要内容 1 安装Selenium和WebDriver 2 Selenium的基本使用方法 3 查找节点 4 节点交互 5 管理Cookie 6 执行JavaScript代码 7 改变节点属性值 Selenium的主要功能 1 打开浏览
  • C++bitset处理二进制位的神器

    初始化 string str1 abc tftf 初始化 bitset lt 20 gt b1 bitset lt 20 gt b2 0xaa bitset lt 20 gt b3 str1 4 4 f t 字符串 起始位置 数量 代表0的
  • 重磅!Cloud Ace 在硅谷设立第一家美国办事处!

    Cloud Ace Corporation 总部位于东京千代田区 Makoto Aoki 总裁 于 2023 年 4 月 12 日成立了一家美国公司 作为其母公司 Yoshidumi Holdings Inc 的子公司 Cloud Ace
  • DBC编辑问题——无法设置报文发送类型和周期

    DBC编辑问题 无法设置报文发送类型和周期 提示 以下为实际CANdb Editor界面 均为置灰状态 无法设置 文章目录 DBC编辑问题 无法设置报文发送类型和周期 前言 一 自定义属性 二 修改发送方式和周期 1 回到message 2
  • 斯坦福密码学课程-笔记-02-Stream Ciphers流密码

    斯坦福密码学课程笔记 02 流密码 Stream Ciphers The One Time Pad Symmetric Ciphers definition The One Time Pad Vernam 1917 Information
  • yml注入map

    记录一次yml文件注入Map 首先是配置类 Component Configuration PropertySource value classpath application yml encoding utf 8 Configuratio
  • tensorflow 模型文件

    我的书 购买链接 京东购买链接 淘宝购买链接 当当购买链接 tensorflow生成的模型文件主要有三个 meta index和 data 分成三个文件的原因是tensorflow将计算图结构和变量值存储在不同的文件里 meta文件描述的是
  • 优雅地理解线程池源码

    线程池源码 网上的一些博客对线程池的讲解都是逐行解读源码 看起来可能会比较费力 本文从功能角度出发 以整个流程为切入点 省去一些没必要的源码 带你逐层抽丝剥茧 理解线程池设计的精髓所在 前置知识 几个常量和变量 ctl是一个int类型的组合
  • FreeRTOS_中断

    传送门 博客汇总帖 传送门 Cortex M3 中断 异常 传送门 Cortex M3笔记 基础 笔记内容参考 正点原子的FreeRTOS开发手册 cortex m3权威指南 Cortex M3和Cortex M4权威指南等 文中stm32
  • 判断某字符串是否是有效的十进制数(leetcode算法题)

    判断某字符串是否是有效的十进制数 问题来源于自 leetcode 有效字符算法题 问题描述 验证给定的字符串是否可以解释为十进制数字 例如 0 gt true 0 1 gt true abc gt false 1 a gt false 2e
  • 【Docker】如何运行容器?

    文章目录 容器操作 容器相关命令 创建并运行一个容器 docker命令解析 nacos启动成功 访问 进入容器 修改配置文件 总结 接上集 CentOS 7安装Docker https blog csdn net qq 39017153 a
  • C#实现鸽巢排序

  • ESP32S2+VOIP移植- 481 call/transaction does not exist

    ESP32 SIP调试时一定注意 481 call transaction does not exist 问题 除了要注意Request URI Call ID Tag等一致性问题还有一个关键就是 CANCEL ACK 的CSeq 后的数字
  • Lottie 动效调研与实践

    Lottie 概述 https airbnb design lottie Lottie 官网 Lottie 是一个支持多端展示的动效库 相对于 OpenGL 动画 GIF Lottie 有着他独有的一些优点和优势 例如对比原生动画 api