音视频开发之旅（62) -Lottie 源码分析之json解析

2024-06-12 06:18
文章标签 分析 源码 开发 json 解析 之旅 音视频 lottie 62

本文主要是介绍音视频开发之旅（62) -Lottie 源码分析之json解析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  1. Lottie能做什么
  2. Lottie 动画使用调用流程
  3. Json字段介绍
  4. 解析为LottieComposition
  5. 资料
  6. 总结

一、Lottie能做什么

在实现动画方面，原生的方式开发成本比较高，airbnb开源的lottie有Android、iOS、RN等多个版本的支持，设计师通过AE设计好动画后，通过AE插件Bodymovin导出json和素材文件。

可以上 https://lottiefiles.com/popular 看看一些流行的 Lottie 动效

客户端通过加载解析渲染播放 即可实现对应的动画效果，这个思路和设计非常值得学习借鉴。接下来两篇我们对其进行学习分析，欢迎讨论交流。

二、Lottie 动画使用调用流程

Lottie 的动画调用流程

1. 创建LottieAnimationView
2. 创建LottieDrawable
3. 解析json文件为LottieComposition对象
4. lottieDrawable.setComposition(lottieComposition)lottieAnimationView.setImageDrawable(lottieDrawable)
5. 播放动画playAnimation()
在onValueChanged时，各个创建好的Drawable会根据需求进行重绘，达到动画的效果。

对于开发者使用非常简单, 可以参考lottie源码中sample的使用。

三、Json字段介绍

我们以Lottie-android提供的demo中的AndroidWave.json和anima.json 为例来学习
object

下面我们看下assets中的字段
object->assets：资源

可以看到object中有layers ,assets中也可能有layers，那边layers这个图层字段包含了什么信息呐。
object->layers：图层

object->layers->ty：图层类型

object->layers->ks：图层变换

“o 、r、 p、 a、 s”中字段相同，都是a、k、x、ix 下面对a、k做说明。x、ix也不知道什么用处。
object->layers->ks-> o 、r、 p、 a、 s

Lottie json的字段基本解释完，下面我们结合Lottie-android的源码看下解析为LottieComposition的过程

四、 解析为LottieComposition

json的解析器，解析为LottieComposition对象

 

4.1 LottieComposition解析的过程

LottieComposition对象

json的解析器，解析为LottieComposition对象

//lottie json的解析器，解析为LottieComposition对象
public class LottieCompositionMoshiParser {private static final JsonReader.Options NAMES = JsonReader.Options.of("w", // 0"h", // 1"ip", // 2"op", // 3"fr", // 4"v", // 5"layers", // 6"assets", // 7"fonts", // 8"chars", // 9"markers" // 10);public static LottieComposition parse(JsonReader reader) throws IOException {float scale = Utils.dpScale();float startFrame = 0f;float endFrame = 0f;float frameRate = 0f;final LongSparseArray<Layer> layerMap = new LongSparseArray<>();final List<Layer> layers = new ArrayList<>();int width = 0;int height = 0;Map<String, List<Layer>> precomps = new HashMap<>();Map<String, LottieImageAsset> images = new HashMap<>();Map<String, Font> fonts = new HashMap<>();List<Marker> markers = new ArrayList<>();SparseArrayCompat<FontCharacter> characters = new SparseArrayCompat<>();LottieComposition composition = new LottieComposition();reader.beginObject();while (reader.hasNext()) {switch (reader.selectName(NAMES)) {case 0:width = reader.nextInt();break;case 1:height = reader.nextInt();break;case 2:startFrame = (float) reader.nextDouble();break;case 3:endFrame = (float) reader.nextDouble() - 0.01f;break;case 4:frameRate = (float) reader.nextDouble();break;case 5:String version = reader.nextString();String[] versions = version.split("\\.");int majorVersion = Integer.parseInt(versions[0]);int minorVersion = Integer.parseInt(versions[1]);int patchVersion = Integer.parseInt(versions[2]);if (!Utils.isAtLeastVersion(majorVersion, minorVersion, patchVersion,4, 4, 0)) {composition.addWarning("Lottie only supports bodymovin >= 4.4.0");}break;case 6://重点看下parseLayers的实现parseLayers(reader, composition, layers, layerMap);break;case 7:parseAssets(reader, composition, precomps, images);break;case 8:parseFonts(reader, fonts);break;case 9:parseChars(reader, composition, characters);break;case 10:parseMarkers(reader, markers);break;default:reader.skipName();reader.skipValue();}}// w、h会根据像素密度自动适配int scaledWidth = (int) (width * scale);int scaledHeight = (int) (height * scale);Rect bounds = new Rect(0, 0, scaledWidth, scaledHeight);//json内容解析完之后，调用composition的init进行LottieComposition字段的赋值，完成json对LottieComposition的工作composition.init(bounds, startFrame, endFrame, frameRate, layers, layerMap, precomps,images, characters, fonts, markers);return composition;}private static void parseLayers(JsonReader reader, LottieComposition composition,List<Layer> layers, LongSparseArray<Layer> layerMap) throws IOException {int imageCount = 0;reader.beginArray();//遍历解析每个layer图层，while (reader.hasNext()) {//图层解析Layer layer = LayerParser.parse(reader, composition);if (layer.getLayerType() == Layer.LayerType.IMAGE) {imageCount++;}//加入到layers和map提高效率layers.add(layer);layerMap.put(layer.getId(), layer);}reader.endArray();}

4.2 layers图层的解析过程

被解析为Layer对象

通过LayerParser把json中layers解析为Layer对象

//通过LayerParser把json中layers解析为Layer对象
public class LayerParser {//对应 json中layers的字段private static final JsonReader.Options NAMES = JsonReader.Options.of("nm", // 0"ind", // 1"refId", // 2"ty", // 3"parent", // 4"sw", // 5"sh", // 6"sc", // 7"ks", // 8"tt", // 9"masksProperties", // 10"shapes", // 11"t", // 12"ef", // 13"sr", // 14"st", // 15"w", // 16"h", // 17"ip", // 18"op", // 19"tm", // 20"cl", // 21"hd" // 22);private static final JsonReader.Options TEXT_NAMES = JsonReader.Options.of("d","a");private static final JsonReader.Options EFFECTS_NAMES = JsonReader.Options.of("ty","nm");public static Layer parse(JsonReader reader, LottieComposition composition) throws IOException {// This should always be set by After Effects. However, if somebody wants to minify// and optimize their json, the name isn't critical for most cases so it can be removed.String layerName = "UNSET";Layer.LayerType layerType = null;String refId = null;long layerId = 0;int solidWidth = 0;int solidHeight = 0;int solidColor = 0;int preCompWidth = 0;int preCompHeight = 0;long parentId = -1;float timeStretch = 1f;float startFrame = 0f;float inFrame = 0f;float outFrame = 0f;String cl = null;boolean hidden = false;BlurEffect blurEffect = null;DropShadowEffect dropShadowEffect = null;Layer.MatteType matteType = Layer.MatteType.NONE;AnimatableTransform transform = null;AnimatableTextFrame text = null;AnimatableTextProperties textProperties = null;AnimatableFloatValue timeRemapping = null;List<Mask> masks = new ArrayList<>();List<ContentModel> shapes = new ArrayList<>();reader.beginObject();while (reader.hasNext()) {switch (reader.selectName(NAMES)) {case 0:layerName = reader.nextString();break;case 1:layerId = reader.nextInt();break;case 2:refId = reader.nextString();break;case 3:int layerTypeInt = reader.nextInt();//看下Layer.LayerType的值 对应json中tyif (layerTypeInt < Layer.LayerType.UNKNOWN.ordinal()) {layerType = Layer.LayerType.values()[layerTypeInt];} else {layerType = Layer.LayerType.UNKNOWN;}break;case 4:parentId = reader.nextInt();break;case 5:solidWidth = (int) (reader.nextInt() * Utils.dpScale());break;case 6:solidHeight = (int) (reader.nextInt() * Utils.dpScale());break;case 7:solidColor = Color.parseColor(reader.nextString());break;case 8://图层变换，动画的 这个重点看下 transform = AnimatableTransformParser.parse(reader, composition);break;case 9:int matteTypeIndex = reader.nextInt();if (matteTypeIndex >= Layer.MatteType.values().length) {composition.addWarning("Unsupported matte type: " + matteTypeIndex);break;}matteType = Layer.MatteType.values()[matteTypeIndex];switch (matteType) {case LUMA:composition.addWarning("Unsupported matte type: Luma");break;case LUMA_INVERTED:composition.addWarning("Unsupported matte type: Luma Inverted");break;}composition.incrementMatteOrMaskCount(1);break;case 10://蒙层解析reader.beginArray();while (reader.hasNext()) {masks.add(MaskParser.parse(reader, composition));}composition.incrementMatteOrMaskCount(masks.size());reader.endArray();break;case 11:reader.beginArray();while (reader.hasNext()) {ContentModel shape = ContentModelParser.parse(reader, composition);if (shape != null) {shapes.add(shape);}}reader.endArray();break;case 12:reader.beginObject();while (reader.hasNext()) {switch (reader.selectName(TEXT_NAMES)) {case 0:text = AnimatableValueParser.parseDocumentData(reader, composition);break;case 1:reader.beginArray();if (reader.hasNext()) {textProperties = AnimatableTextPropertiesParser.parse(reader, composition);}while (reader.hasNext()) {reader.skipValue();}reader.endArray();break;default:reader.skipName();reader.skipValue();}}reader.endObject();break;case 13://特效reader.beginArray();List<String> effectNames = new ArrayList<>();while (reader.hasNext()) {reader.beginObject();while (reader.hasNext()) {switch (reader.selectName(EFFECTS_NAMES)) {case 0:int type = reader.nextInt();if (type == 29) {blurEffect = BlurEffectParser.parse(reader, composition);} else if (type == 25) {dropShadowEffect = new DropShadowEffectParser().parse(reader, composition);}break;case 1:String effectName = reader.nextString();effectNames.add(effectName);break;default:reader.skipName();reader.skipValue();}}reader.endObject();}reader.endArray();composition.addWarning("Lottie doesn't support layer effects. If you are using them for " +" fills, strokes, trim paths etc. then try adding them directly as contents " +" in your shape. Found: " + effectNames);break;case 14:timeStretch = (float) reader.nextDouble();break;case 15:startFrame = (float) reader.nextDouble();break;case 16:preCompWidth = (int) (reader.nextInt() * Utils.dpScale());break;case 17:preCompHeight = (int) (reader.nextInt() * Utils.dpScale());break;case 18:inFrame = (float) reader.nextDouble();break;case 19:outFrame = (float) reader.nextDouble();break;case 20:timeRemapping = AnimatableValueParser.parseFloat(reader, composition, false);break;case 21:cl = reader.nextString();break;case 22:hidden = reader.nextBoolean();break;default:reader.skipName();reader.skipValue();}}reader.endObject();List<Keyframe<Float>> inOutKeyframes = new ArrayList<>();// Before the in frameif (inFrame > 0) {Keyframe<Float> preKeyframe = new Keyframe<>(composition, 0f, 0f, null, 0f, inFrame);inOutKeyframes.add(preKeyframe);}// The + 1 is because the animation should be visible on the out frame itself.outFrame = (outFrame > 0 ? outFrame : composition.getEndFrame());Keyframe<Float> visibleKeyframe =new Keyframe<>(composition, 1f, 1f, null, inFrame, outFrame);inOutKeyframes.add(visibleKeyframe);Keyframe<Float> outKeyframe = new Keyframe<>(composition, 0f, 0f, null, outFrame, Float.MAX_VALUE);inOutKeyframes.add(outKeyframe);if (layerName.endsWith(".ai") || "ai".equals(cl)) {composition.addWarning("Convert your Illustrator layers to shape layers.");}//根据上面解析的值，生成对应的Layer对象。这个对象是进行绘制return new Layer(shapes, composition, layerName, layerId, layerType, parentId, refId,masks, transform, solidWidth, solidHeight, solidColor, timeStretch, startFrame,preCompWidth, preCompHeight, text, textProperties, inOutKeyframes, matteType,timeRemapping, hidden, blurEffect, dropShadowEffect);}
}

4.3 ks图层变换的解析过程

被解析为对象AnimatableTransform

通过AnimatableTransformParser把json中ks解析为AnimatableTransform对象

//通过AnimatableTransformParser把json中ks解析为AnimatableTransform对象
public class AnimatableTransformParser {private static final JsonReader.Options NAMES = JsonReader.Options.of("a",  // 1"p",  // 2"s",  // 3"rz", // 4"r",  // 5"o",  // 6"so", // 7"eo", // 8"sk", // 9"sa"  // 10);private static final JsonReader.Options ANIMATABLE_NAMES = JsonReader.Options.of("k");public static AnimatableTransform parse(JsonReader reader, LottieComposition composition) throws IOException {AnimatablePathValue anchorPoint = null;AnimatableValue<PointF, PointF> position = null;AnimatableScaleValue scale = null;AnimatableFloatValue rotation = null;AnimatableIntegerValue opacity = null;AnimatableFloatValue startOpacity = null;AnimatableFloatValue endOpacity = null;AnimatableFloatValue skew = null;AnimatableFloatValue skewAngle = null;boolean isObject = reader.peek() == JsonReader.Token.BEGIN_OBJECT;if (isObject) {reader.beginObject();}while (reader.hasNext()) {switch (reader.selectName(NAMES)) {case 0: // areader.beginObject();while (reader.hasNext()) {switch (reader.selectName(ANIMATABLE_NAMES)) {case 0:anchorPoint = AnimatablePathValueParser.parse(reader, composition);break;default:reader.skipName();reader.skipValue();}}reader.endObject();break;case 1: // pposition =AnimatablePathValueParser.parseSplitPath(reader, composition);break;case 2: // sscale = AnimatableValueParser.parseScale(reader, composition);break;case 3: // rzcomposition.addWarning("Lottie doesn't support 3D layers.");case 4: // rrotation = AnimatableValueParser.parseFloat(reader, composition, false);if (rotation.getKeyframes().isEmpty()) {rotation.getKeyframes().add(new Keyframe<>(composition, 0f, 0f, null, 0f, composition.getEndFrame()));} else if (rotation.getKeyframes().get(0).startValue == null) {rotation.getKeyframes().set(0, new Keyframe<>(composition, 0f, 0f, null, 0f, composition.getEndFrame()));}break;case 5: // oopacity = AnimatableValueParser.parseInteger(reader, composition);break;case 6: // sostartOpacity = AnimatableValueParser.parseFloat(reader, composition, false);break;case 7: // eoendOpacity = AnimatableValueParser.parseFloat(reader, composition, false);break;case 8: // skskew = AnimatableValueParser.parseFloat(reader, composition, false);break;case 9: // saskewAngle = AnimatableValueParser.parseFloat(reader, composition, false);break;default:reader.skipName();reader.skipValue();}}if (isObject) {reader.endObject();}if (isAnchorPointIdentity(anchorPoint)) {anchorPoint = null;}if (isPositionIdentity(position)) {position = null;}if (isRotationIdentity(rotation)) {rotation = null;}if (isScaleIdentity(scale)) {scale = null;}if (isSkewIdentity(skew)) {skew = null;}if (isSkewAngleIdentity(skewAngle)) {skewAngle = null;}//根据解析的属性生成AnimatableTransform对象return new AnimatableTransform(anchorPoint, position, scale, rotation, opacity, startOpacity, endOpacity, skew, skewAngle);}

五、资料

  1. Lottie 的使用
  2. Lottie实现思路和源码分析
  3. 如何看懂json参数
  4. Lottie—json文件解析
  5. Lottie 还可以做这些？

六、收获

通过本篇的学习

  1. 了解Lottie动画的流程
  2. 了解lottie json的中每个字段的含义
  3. 分析lottie json解析过程

感谢你的阅读
下一篇我们分析学习Layer渲染和动画部分的实现，欢迎关注公众号“音视频开发之旅”，一起学习成长。
欢迎交流

这篇关于音视频开发之旅（62) -Lottie 源码分析之json解析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1053411。

相关文章

python panda库从基础到高级操作分析

python panda库从基础到高级操作分析

《pythonpanda库从基础到高级操作分析》本文介绍了Pandas库的核心功能,包括处理结构化数据的Series和DataFrame数据结构,数据读取、清洗、分组聚合、合并、时间序列分析及大数据... 目录1. Pandas 概述2. 基本操作：数据读取与查看3. 索引操作：精准定位数据4. Group
阅读更多...
Spring Boot集成/输出/日志级别控制/持久化开发实践

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置（INFO/DEBUG等）,输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用
阅读更多...
深度解析Spring Security 中的 SecurityFilterChain核心功能

深度解析Spring Security 中的 SecurityFilterChain核心功能

《深度解析SpringSecurity中的SecurityFilterChain核心功能》SecurityFilterChain通过组件化配置、类型安全路径匹配、多链协同三大特性,重构了Spri... 目录Spring Security 中的SecurityFilterChain深度解析一、Security
阅读更多...
MySQL中EXISTS与IN用法使用与对比分析

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比
阅读更多...
MySQL 内存使用率常用分析语句

MySQL 内存使用率常用分析语句

《MySQL内存使用率常用分析语句》用户整理了MySQL内存占用过高的分析方法,涵盖操作系统层确认及数据库层bufferpool、内存模块差值、线程状态、performance_schema性能数据... 目录一、 OS层二、 DB层1. 全局情况2. 内存占js用详情最近连续遇到mysql内存占用过高导致
阅读更多...
全面解析Golang 中的 Gorilla CORS 中间件正确用法

全面解析Golang 中的 Gorilla CORS 中间件正确用法

《全面解析Golang中的GorillaCORS中间件正确用法》Golang中使用gorilla/mux路由器配合rs/cors中间件库可以优雅地解决这个问题,然而,很多人刚开始使用时会遇到配... 目录如何让 golang 中的 Gorilla CORS 中间件正确工作一、基础依赖二、错误用法（很多人一开
阅读更多...
Python进行JSON和Excel文件转换处理指南

Python进行JSON和Excel文件转换处理指南

《Python进行JSON和Excel文件转换处理指南》在数据交换与系统集成中,JSON与Excel是两种极为常见的数据格式,本文将介绍如何使用Python实现将JSON转换为格式化的Excel文件,... 目录将 jsON 导入为格式化 Excel将 Excel 导出为结构化 JSON处理嵌套 JSON：
阅读更多...
Mysql中设计数据表的过程解析

Mysql中设计数据表的过程解析

《Mysql中设计数据表的过程解析》数据库约束通过NOTNULL、UNIQUE、DEFAULT、主键和外键等规则保障数据完整性,自动校验数据,减少人工错误,提升数据一致性和业务逻辑严谨性,本文介绍My... 目录1.引言2.NOT NULL——制定某列不可以存储NULL值2.UNIQUE——保证某一列的每一
阅读更多...
深度解析Nginx日志分析与499状态码问题解决

深度解析Nginx日志分析与499状态码问题解决

《深度解析Nginx日志分析与499状态码问题解决》在Web服务器运维和性能优化过程中,Nginx日志是排查问题的重要依据,本文将围绕Nginx日志分析、499状态码的成因、排查方法及解决方案展开讨论... 目录前言1. Nginx日志基础1.1 Nginx日志存放位置1.2 Nginx日志格式2. 499
阅读更多...
PyQt5 GUI 开发的基础知识

PyQt5 GUI 开发的基础知识

《PyQt5GUI开发的基础知识》Qt是一个跨平台的C++图形用户界面开发框架,支持GUI和非GUI程序开发,本文介绍了使用PyQt5进行界面开发的基础知识,包括创建简单窗口、常用控件、窗口属性设... 目录简介第一个PyQt程序最常用的三个功能模块控件QPushButton（按钮）控件QLable（纯文本
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2