Lottie系列二：高级属性

许进进

已于 2023-01-12 12:26:24 修改

阅读量2.4k

点赞数 4

文章标签：动画 lottie android

于 2022-07-18 17:10:50 首次发布

本文链接：https://blog.csdn.net/LucasXu01/article/details/125855369

版权

文章目录

一前言
二理解Lottie的Json协议
三关键类
四实操
五手势绑定
源码
参考

一前言

高级属性可以帮助我们在已有Lottie动画的基础上“再造动画”，包括但不限于替换原有Lottie动画中的图层背景、颜色、文字、图片，甚至定制动画每个图层的不动展示效果。高级属性的运用加上手势定制，可以实现视觉上很多高级的花样操作，相比原生使用属性动画而言，成本较低；

运用Lottie高级属性需要前备两块知识内容：

Lottie的Json协议含义
高级属性的三大关键类：KeyPath、LottieProperty、LottieValueCallback；

二理解Lottie的Json协议

Lottie json文件的属性含义

lottie的最外层结构

{
  "v": "5.8.0",  //bodymovin的版本
  "fr": 60,      //frame rate 帧率
  "ip": 0,       //起始关键帧
  "op": 102,     //结束关键帧
  "w": 1350,     //动画宽度
  "h": 800,      //动画高度
  "nm": "recommend_turn page_x0.75_original", //名称
  "ddd": 0,       //是否为3d
  "assets":[],   //资源信息
  "layers":[],   //图层信息
  "markers": []  //遮罩
}
注：时间=(op-ip)/fr

assets

"assets": [                       //资源信息
      {
        "id": "image_0",         //图片id
        "w": 129,                //图片宽度
        "h": 884,                //图片高度
        "u": "images/",          //图片路径
        "p": "recommend_bg_book_shadow.png",     //名称
        "e": 0
      },
}

layers

动画是由一个一个的图层组合起来，并在图层上进行偏移、缩放等操作来实现动画的。图层的解析是lottie的主要功能模块。

"layers": [                            //图层信息
    {
      "ddd": 0,        							 //是否为3d
      "ind": 1,                     //图层id 唯一性
      "ty": 4,            					//图层类型
      "nm": "page back 4",					//图层名称
      "refId": "comp_0", 						// 引用的资源，图片/预合成层
      "td": 1,
      "sr": 1,
      "ks": {...},             		 // 变换。对应AE中的变换设置
      "ao": 0,
      ”layer“: [],         					// 该图层包含的子图层
      “shaps”: [],        					// 形状图层
      "ip": 12,                     //该图层起始关键帧
      "op": 1782,         					//该图层结束关键帧
      "st": -18,         
      "bm": 0
    }

ks

对应AE中图层的变换属性，可以通过设置锚点、位置、旋转、缩放、透明度等来控制图层，并设置这些属性的变换曲线，来实现动画。

"ks": { // 变换。对应AE中的变换设置
    "o": { // 透明度
        "a": 0,
        "k": 100,
        "ix": 11
    },
    "r": { // 旋转
        "a": 0,
        "k": 0,
        "ix": 10
    },
    "p": { // 位置
        "a": 0,
        "k": [-167, 358.125, 0],
        "ix": 2
    },
    "a": { // 锚点
        "a": 0,
        "k": [667, 375, 0],
        "ix": 1
    },
    "s": { // 缩放
        "a": 0,
        "k": [100, 100, 100],
        "ix": 6
    }
}

shape

对应AE中图层的内容中的形状设置的内容，其主要用于绘制图形

"shapes": [{
  "ty": "gr", // 类型。混合图层
  "it": [{ // 各图层json
      "ind": 0,
      "ty": "sh", // 类型，sh表示图形路径
      "ix": 1,
      "ks": {
          "a": 0,
          "k": {
              "i": [ // 内切线点集合
                  [0, 0],
                  [0, 0]
              ],
              "o": [ // 外切线点集合
                  [0, 0],
                  [0, 0]
              ],
              "v": [ // 顶点坐标集合
                  [182, -321.75],
                  [206.25, -321.75]
              ], 
              "c": false // 贝塞尔路径闭合
          },
          "ix": 2
      },
      "nm": "路径 1",
      "mn": "ADBE Vector Shape - Group",
      "hd": false
  },{
    "ty": "st", // 类型。图形描边
    "c": { // 线的颜色
        "a": 0,
        "k": [0, 0, 0, 1],
        "ix": 3
    },
    "o": { // 线的不透明度
        "a": 0,
        "k": 100,
        "ix": 4
    },
    "w": { // 线的宽度
        "a": 0,
        "k": 3,
        "ix": 5
    },
    "lc": 2, // 线段的头尾样式
    "lj": 1, // 线段的连接样式
    "ml": 4, // 尖角限制
    "nm": "描边 1",
    "mn": "ADBE Vector Graphic - Stroke",
    "hd": false
  }]
}]

三关键类

3.1 KeyPath

KeyPath：图层对象有字符串名称，它们的内容可以是图像、形状、填充、笔画等几乎任何可绘制的内容。Lottie 可使用 KeyPath 根据名称查找这些对象和属性。

LottieDrawable / LottieAnimationView 有一个 ResolveKeyPath ()方法，该方法接受一个 KeyPath 并返回一个包含已解析 KeyPath 的列表。

3.1 LottieProperty

LottieProperty 是可以设置的属性的枚举，对应于AE中的animatable value。

Transform	Layer	Fill	Stroke	Ellipse	Polystar	Repeater	Image	Text
TRANSFORM_ANCHOR_POINT	TRANSFORM_ANCHOR_POINT	COLOR	COLOR	ELLIPSE_SIZE	POLYSTAR_POINTS	REPEATER_COPIES	IMAGE	COLOR
TRANSFORM_POSITION	TRANSFORM_POSITION	OPACITY	OPACITY	POSITION	POLYSTAR_ROTATION	REPEATER_OFFSET	COLOR_FILTER	STROKE_COLOR
TRANSFORM_OPACITY	TRANSFORM_OPACITY	COLOR_FILTER	COLOR_FILTER		POSITION	TRANSFORM_ROTATION		STROKE_WIDTH
TRANSFORM_SCALE	TRANSFORM_SCALE		STROKE_WIDTH		POLYSTAR_OUTER_RADIUS	TRANSFORM_START_OPACITY		TEXT_TRACKING
TRANSFORM_ROTATION	TRANSFORM_ROTATION				POLYSTAR_OUTER_ROUNDEDNESS	TRANSFORM_END_OPACITY		TEXT_SIZE
	TIME_REMAP (composition)				POLYSTAR_INNER_RADIUS			TYPEFACE
								TEXT

3.1 ValueCallback

每次渲染动画时被调用的函数，回调提供：

当前关键帧的起始帧。
当前关键帧的结束帧。
当前关键帧的起始值。
当前关键帧的结束值。
当前关键帧中从 0 到 1 的进度，没有任何时间插值。
当前关键帧的进度(存在插值器）。
整体动画进度从0到1。

LottieValueCallback：在构造函数中设置一个静态值，或者覆盖 getValue ()来设置每个帧上的值。

四实操

4.1 动态修改颜色

原图：

动态修改颜色：

KeyPath colorProperty = new KeyPath("Shape Layer 1", "Rectangle 1", "Fill 1");
lottieAnimationView.addValueCallback(colorProperty, LottieProperty.COLOR, 
    new SimpleLottieValueCallback<Integer>() {
        @Override
        public Integer getValue(LottieFrameInfo<Integer> frameInfo) {
		return 0xFFEE82EE;
	}
});

4.2 动态修改文本&字体

替换文本：JSON文件都是以key-value形式出现的，在代码中找到对应的key，改变他的value即可。使用LottieAnimationView的TextDelegate即可实现

lottieAnimationView.setFontAssetDelegate(new FontAssetDelegate(){
     @Override
     public Typeface fetchFont(String fontFamily) {
	  Typeface typeface = Typeface.createFromAsset(getAssets(), "MyTypeFace.ttf");
	  return typeface;
     }
});
TextDelegate textDelegate = new TextDelegate(lottieAnimationView);
textDelegate.setText("Search_", "职位搜索");
lottieAnimationView.setTextDelegate(textDelegate);

原图：

动态修改文本&字体后：

4.3 动态修改图片

替换图片资源：找到JSON文件中assets数据中对应图片的id，使用LottieAnimationView的updateBitmap即可实现图片替换

LottieAnimationView lottieAnimationView =  findViewById(R.id.lottie_view);

findViewById(R.id.ghost_view).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
                lottieAnimationView.updateBitmap("image_0",bitmap);
            }
        });

五手势绑定

与手势事件绑定，本质上还是对position进行操作

        largeValueCallback = LottieRelativePointValueCallback(PointF(0f, 0f))
        lottieAnimationView.addValueCallback(
            KeyPath("First"),
            LottieProperty.TRANSFORM_POSITION,
            largeValueCallback
        )
        mediumValueCallback = LottieRelativePointValueCallback(PointF(0f, 0f))
        lottieAnimationView.addValueCallback(
            KeyPath("Fourth"),
            LottieProperty.TRANSFORM_POSITION,
            mediumValueCallback
        )
        smallValueCallback = LottieRelativePointValueCallback(PointF(0f, 0f))
        lottieAnimationView.addValueCallback(
            KeyPath("Seventh"),
            LottieProperty.TRANSFORM_POSITION,
            smallValueCallback
        )
        ...
        smallValueCallback.setValue(getPoint(totalDxSmall, totalDySmall, 1.2f))
        mediumValueCallback.setValue(getPoint(totalDxMedium, totalDyMedium, 1f))
        largeValueCallback.setValue(getPoint(totalDxLarge, totalDyLarge, 0.75f))

原图：

手势：

各图层动画：

源码

例子源码： https://github.com/LucasXu01/lottiedemo

参考

•Lottie 官网

•Lottie 进阶和原理分析

•支持点击交互的 Lottie-Android 篇

•Lottie—json 文件解析

•Lottie 动画使用及原理分析

•如何在 Lottie 动画中获得可用的总帧数

•Flutter 进阶教程 ——在 Flutter 中使用 Lottie 动画

•从设计师和开发的角度使用Lottie

许进进

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Lottie系列二：高级属性

要理解如何在 Lottie 中更改动画属性，首先应了解动画属性是如何存储在 Lottie 中的。动画属性存储在一个数据树中，该数据树模仿 After effect 的信息层次结构。在后效果一个组合是一个图层的集合，每个图层都有自己的时间线。层对象有字符串名称，它们的内容可以是图像、形状图层、填充、笔画，或者几乎任何可绘制的内容。后效果中的每个对象都有一个名称。Lottie 可以使用 KeyPath 根据名称查找这些对象和属性。...
复制链接

扫一扫