Lottie 在 Flutter 中的渲染：解析 JSON 矢量路径并映射到 Canvas API

Lottie 在 Flutter 中的渲染：解析 JSON 矢量路径并映射到 Canvas API

大家好，今天我们来深入探讨 Lottie 动画在 Flutter 中的渲染机制，重点关注 JSON 矢量路径的解析和 Canvas API 的映射过程。Lottie 动画以其体积小、可交互、跨平台等优点，在移动应用开发中被广泛应用。理解其底层渲染原理，有助于我们更好地优化动画性能，定制动画效果，甚至开发自己的动画引擎。

Lottie 动画的本质：JSON 矢量动画

Lottie 动画本质上是一个 JSON 文件，它描述了一系列矢量图形的运动和变化。这些矢量图形由路径（Paths）、形状（Shapes）、图层（Layers）、变换（Transforms）等元素组成。JSON 文件中定义了这些元素的属性，以及它们在时间轴上的关键帧动画。

一个简单的 Lottie JSON 文件片段可能如下所示：

{
  "v": "4.13.0",
  "fr": 30,
  "ip": 0,
  "op": 60,
  "w": 512,
  "h": 512,
  "layers": [
    {
      "ty": 4,  // 类型：形状图层
      "nm": "Rectangle",
      "ks": {  // 关键帧：位置、缩放、旋转等
        "o": { "k": 100 },
        "r": { "k": 0 },
        "p": { "k": [256, 256] },
        "s": { "k": [100, 100] }
      },
      "shapes": [
        {
          "ty": "rc", // 类型：矩形
          "nm": "Rectangle Path",
          "p": { "k": [0, 0] },
          "s": { "k": [50, 50] },
          "r": { "k": 0 }
        },
        {
          "ty": "fl", // 类型：填充
          "c": { "k": [1, 0, 0, 1] }, // 红色
          "o": { "k": 100 },
          "r": 1
        }
      ]
    }
  ]
}

• v: Lottie 动画文件的版本。
• fr: 帧率，表示每秒播放的帧数。
• ip: 入点，动画开始播放的帧数。
• op: 出点，动画结束播放的帧数。
• w: 动画的宽度。
• h: 动画的高度。
• layers: 图层列表，包含动画中的所有图层。
• ty: 图层类型，例如：4 表示形状图层。
• nm: 图层名称。
• ks: 关键帧数据，包括位置、缩放、旋转、透明度等属性的动画数据。
• shapes: 形状列表，包含图层中的所有形状。
• rc: 矩形形状。
• fl: 填充效果。
• c: 颜色。
• o: 透明度。

这个 JSON 文件描述了一个简单的矩形，位于画布中心 (256, 256)，大小为 50×50，颜色为红色。 关键帧数据定义了矩形的位置、大小等属性在时间轴上的变化。更复杂的动画则包含更多的图层、形状和关键帧数据。

Flutter 中的 Lottie 渲染流程

Flutter 中渲染 Lottie 动画的主要流程如下：

1. JSON 解析： 将 Lottie JSON 文件解析成 Dart 对象模型。
2. 动画数据提取： 从 Dart 对象模型中提取动画数据，包括图层、形状、路径、关键帧等信息。
3. 动画控制器： 使用 AnimationController 控制动画的播放进度。
4. 关键帧插值： 根据当前动画进度，对关键帧数据进行插值计算，得到当前帧的属性值。
5. Canvas 绘制： 使用 Canvas API 将矢量图形绘制到屏幕上。

接下来，我们将重点讨论 JSON 解析和 Canvas 绘制这两个核心环节。

JSON 解析：构建 Dart 对象模型

Lottie JSON 文件结构复杂，需要一个有效的解析器将其转换为易于操作的 Dart 对象模型。常见的 Lottie 库（如 lottie 包）内部实现了 JSON 解析器。

以下代码展示了如何使用 lottie 包加载和解析 Lottie JSON 文件：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LottieExample extends StatefulWidget {
  @override
  _LottieExampleState createState() => _LottieExampleState();
}

class _LottieExampleState extends State<LottieExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this)
      ..addListener(() {
        setState(() {}); // 触发重绘
      });

    loadAnimation();
  }

  Future<void> loadAnimation() async {
    await Future.delayed(Duration.zero); // 确保widget已经build
    _controller.duration = Duration(seconds: 5); // 设定动画总时长
    _controller.repeat(); // 循环播放
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lottie Example')),
      body: Center(
        child: Lottie.asset(
          'assets/animations/your_animation.json', // 替换为你的 Lottie JSON 文件路径
          controller: _controller,
          width: 300,
          height: 300,
          fit: BoxFit.contain,
        ),
      ),
    );
  }
}

在这个例子中，Lottie.asset 方法负责加载和解析 Lottie JSON 文件。解析后的数据存储在内部的对象模型中，可以用于后续的动画播放。

更底层地，如果我们想自己实现一个简化的 Lottie JSON 解析器，可以参考以下步骤：

1. 读取 JSON 文件： 使用 dart:convert 库读取 JSON 文件内容。
2. 解析顶层结构： 解析 JSON 文件的顶层结构，包括版本号、帧率、宽高、图层列表等。
3. 解析图层： 遍历图层列表，解析每个图层的类型、名称、关键帧、形状等属性。
4. 解析形状： 遍历形状列表，解析每个形状的类型、路径、填充、描边等属性。
5. 解析关键帧： 解析每个属性的关键帧数据，包括时间点、数值、插值方式等。

以下是一个简化的 JSON 解析器示例代码：

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;

class LottieData {
  final double frameRate;
  final int width;
  final int height;
  final List<LayerData> layers;

  LottieData({
    required this.frameRate,
    required this.width,
    required this.height,
    required this.layers,
  });

  factory LottieData.fromJson(Map<String, dynamic> json) {
    return LottieData(
      frameRate: (json['fr'] as num).toDouble(),
      width: json['w'] as int,
      height: json['h'] as int,
      layers: (json['layers'] as List)
          .map((layer) => LayerData.fromJson(layer))
          .toList(),
    );
  }
}

class LayerData {
  final int type;
  final String name;
  final KeyframesData keyframes;
  final List<ShapeData> shapes;

  LayerData({
    required this.type,
    required this.name,
    required this.keyframes,
    required this.shapes,
  });

  factory LayerData.fromJson(Map<String, dynamic> json) {
    return LayerData(
      type: json['ty'] as int,
      name: json['nm'] as String,
      keyframes: KeyframesData.fromJson(json['ks']),
      shapes: (json['shapes'] as List)
          .map((shape) => ShapeData.fromJson(shape))
          .toList(),
    );
  }
}

class KeyframesData {
  final double opacity;
  final double rotation;
  final List<double> position;
  final List<double> scale;

  KeyframesData({
    required this.opacity,
    required this.rotation,
    required this.position,
    required this.scale,
  });

  factory KeyframesData.fromJson(Map<String, dynamic> json) {
    return KeyframesData(
      opacity: (json['o']['k'] as num).toDouble(),
      rotation: (json['r']['k'] as num).toDouble(),
      position: (json['p']['k'] as List).map((e) => (e as num).toDouble()).toList(),
      scale: (json['s']['k'] as List).map((e) => (e as num).toDouble()).toList(),
    );
  }
}

class ShapeData {
  final String type;
  final String name;
  final Map<String, dynamic>? properties;

  ShapeData({
    required this.type,
    required this.name,
    this.properties,
  });

  factory ShapeData.fromJson(Map<String, dynamic> json) {
    return ShapeData(
      type: json['ty'] as String,
      name: json['nm'] as String,
      properties: json,
    );
  }
}

Future<LottieData> loadLottieData(String assetPath) async {
  final jsonString = await rootBundle.loadString(assetPath);
  final json = jsonDecode(jsonString);
  return LottieData.fromJson(json);
}

这个示例代码定义了 LottieData、LayerData、KeyframesData 和 ShapeData 等 Dart 类，用于存储解析后的 Lottie 数据。 loadLottieData 函数负责从 JSON 文件中读取数据并解析成 LottieData 对象。 这个例子非常简化，只能解析一部分Lottie文件。

Canvas 绘制：将矢量图形渲染到屏幕上

解析 Lottie JSON 文件后，我们需要将矢量图形绘制到屏幕上。 Flutter 提供了强大的 Canvas API，可以用于绘制各种图形。

以下代码展示了如何使用 Canvas API 绘制一个简单的矩形：

import 'package:flutter/material.dart';

class CustomPainterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CustomPainter Example')),
      body: Center(
        child: CustomPaint(
          size: Size(300, 300),
          painter: MyPainter(),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    final rect = Rect.fromLTWH(50, 50, 200, 200);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

在这个例子中，CustomPaint Widget 负责创建一个 Canvas 对象，并将 MyPainter 对象传递给它。 MyPainter 类的 paint 方法使用 Canvas API 绘制一个红色的矩形。

要渲染 Lottie 动画中的矢量图形，我们需要将 JSON 文件中定义的路径数据转换为 Canvas API 可以理解的格式。

Lottie JSON 文件中，路径数据通常以贝塞尔曲线的形式存储。贝塞尔曲线由一系列控制点定义，可以用于绘制平滑的曲线。 Canvas API 提供了 Path 类，可以用于描述复杂的路径。

以下代码展示了如何将 Lottie JSON 文件中的贝塞尔曲线数据转换为 Path 对象：

import 'dart:ui';

Path createPathFromBezier(List<dynamic> points) {
  final path = Path();
  // 假设 points 是一个包含贝塞尔曲线控制点的列表，格式为 [x1, y1, x2, y2, x3, y3, ...]
  // 其中 x1, y1 是起始点，x2, y2 是控制点1，x3, y3 是控制点2，依次类推

  if (points.length < 2) {
    return path; // 至少需要两个点来画一条线
  }

  path.moveTo(points[0], points[1]); // 设置起始点

  for (int i = 2; i < points.length; i += 6) {
    if (i + 5 < points.length) {
      path.cubicTo(
        points[i],     // 控制点1 x
        points[i + 1], // 控制点1 y
        points[i + 2], // 控制点2 x
        points[i + 3], // 控制点2 y
        points[i + 4], // 结束点 x
        points[i + 5], // 结束点 y
      );
    } else if(i+1 < points.length){
       path.lineTo(points[i], points[i+1]);//如果不是完整的cubicTo，就用lineTo连接
    }
  }

  return path;
}

// 示例用法 (需要从解析的LottieData中提取路径数据)
// 假设 shapeData.properties['ks']['k']['v'] 包含了路径数据
Path getShapePath(ShapeData shapeData){
    if(shapeData.type == 'sh'){ // 'sh' 代表 shape
        List<dynamic> points = shapeData.properties!['ks']['k']['v'];
        return createPathFromBezier(points);
    }
    return Path();
}

这个 createPathFromBezier 函数接受一个包含贝塞尔曲线控制点的列表，并返回一个 Path 对象。 该函数遍历控制点列表，使用 path.cubicTo 方法将贝塞尔曲线添加到 Path 对象中。

有了 Path 对象后，我们可以使用 canvas.drawPath 方法将其绘制到屏幕上：

  @override
  void paint(Canvas canvas, Size size) {
      // ... (load Lottie data)
      final lottieData = await loadLottieData('assets/animations/your_animation.json');

      for (var layer in lottieData.layers) {
        if (layer.type == 4) { // 形状图层
            for(var shape in layer.shapes){
                if(shape.type == 'sh'){
                    Path path = getShapePath(shape);
                    final paint = Paint()
                      ..color = Colors.blue
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 2;

                    canvas.drawPath(path, paint);
                } else if (shape.type == 'fl'){ // 填充
                    final colorValue = shape.properties!['c']['k'];
                    final opacityValue = shape.properties!['o']['k'];

                    Color fillColor = Color.fromRGBO(
                        (colorValue[0] * 255).toInt(),
                        (colorValue[1] * 255).toInt(),
                        (colorValue[2] * 255).toInt(),
                        opacityValue / 100
                    );

                    final fillPaint = Paint()
                      ..color = fillColor
                      ..style = PaintingStyle.fill;

                      // 获取对应的shape
                      for(var shapeToFill in layer.shapes){
                         if(shapeToFill.type == 'sh'){
                            Path pathToFill = getShapePath(shapeToFill);
                            canvas.drawPath(pathToFill, fillPaint);
                         }
                      }
                }
            }
        }
      }
  }

这段代码遍历 LottieData 中的图层和形状，如果形状是贝塞尔曲线，则将其转换为 Path 对象并绘制到屏幕上。如果是填充颜色，则使用对应的颜色填充对应的形状。

为了实现动画效果，我们需要在每一帧更新 Path 对象，并重新绘制 Canvas。 这可以通过 AnimationController 和 setState 方法来实现。

关键帧插值：平滑动画过渡

Lottie 动画的关键在于关键帧插值。关键帧定义了属性在特定时间点的值，而插值算法则用于计算属性在其他时间点的值。

常见的插值算法包括线性插值、贝塞尔曲线插值等。 线性插值简单易懂，但效果较为生硬。 贝塞尔曲线插值可以产生更平滑的动画效果。

以下代码展示了如何实现线性插值：

double lerp(double a, double b, double t) {
  return a + (b - a) * t;
}

// 示例用法
double startValue = 10;
double endValue = 100;
double progress = 0.5; // 动画进度，取值范围为 0 到 1

double currentValue = lerp(startValue, endValue, progress); // 计算当前值

在这个例子中，lerp 函数接受起始值、结束值和动画进度作为参数，并返回当前值。

对于 Lottie 动画，我们需要对每个属性的关键帧数据进行插值计算。这包括位置、缩放、旋转、透明度等属性。

// 假设我们有一个包含两个关键帧的列表：keyframes
// keyframes[0] 和 keyframes[1] 分别是起始关键帧和结束关键帧
double interpolateValue(List<dynamic> keyframes, double progress) {
  if (keyframes.length == 1) {
    return (keyframes[0]['s'] as num).toDouble(); // 如果只有一个关键帧，直接返回其值
  }

  double startValue = (keyframes[0]['s'] as num).toDouble();
  double endValue = (keyframes[1]['s'] as num).toDouble();
  double startTime = (keyframes[0]['t'] as num).toDouble();
  double endTime = (keyframes[1]['t'] as num).toDouble();

  // 将动画进度映射到关键帧时间范围
  double t = (progress - startTime) / (endTime - startTime);
  t = t.clamp(0, 1); // 确保 t 在 0 到 1 之间

  return lerp(startValue, endValue, t);
}

这段代码首先检查关键帧的数量。如果只有一个关键帧，则直接返回其值。否则，它计算动画进度在关键帧时间范围内的比例，并使用线性插值计算当前值。

实际的 Lottie 动画可能使用更复杂的插值算法，例如贝塞尔曲线插值。 Lottie 库通常会提供这些插值算法的实现。

优化 Lottie 动画性能

Lottie 动画的性能取决于多个因素，包括动画的复杂度、矢量图形的数量、关键帧的数量、插值算法的效率等。

以下是一些优化 Lottie 动画性能的技巧：

• 简化动画： 减少矢量图形的数量，降低动画的复杂度。
• 使用静态图片： 对于静态元素，可以使用静态图片代替矢量图形。
• 缓存结果： 将计算结果缓存起来，避免重复计算。
• 使用硬件加速： 开启硬件加速，利用 GPU 渲染动画。
• 使用合适的插值算法： 选择合适的插值算法，在性能和效果之间取得平衡。
• 避免过度绘制： 减少透明度和混合模式的使用，避免过度绘制。

例如，可以通过 CacheKey 和 PictureRecorder 来缓存复杂的矢量图形：

  Future<Picture> _recordPicture(Path path) async {
    final recorder = PictureRecorder();
    final canvas = Canvas(recorder);

    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    canvas.drawPath(path, paint);

    return recorder.endRecording();
  }

  @override
  void paint(Canvas canvas, Size size) {
      // ... (load Lottie data)
      final lottieData = await loadLottieData('assets/animations/your_animation.json');

      for (var layer in lottieData.layers) {
        if (layer.type == 4) { // 形状图层
            for(var shape in layer.shapes){
                if(shape.type == 'sh'){
                    Path path = getShapePath(shape);

                    // 创建一个用于缓存的key
                    String cacheKey = 'shape_${shape.name}';

                    // 检查是否已经缓存了
                    Picture? cachedPicture = _pictureCache[cacheKey];

                    if(cachedPicture == null){
                        // 没有缓存，则进行记录
                        cachedPicture = await _recordPicture(path);
                        _pictureCache[cacheKey] = cachedPicture; // 缓存picture
                    }

                    canvas.drawPicture(cachedPicture);

                } else if (shape.type == 'fl'){ // 填充
                     //... (填充代码)
                }
            }
        }
      }
  }

  // 在类中添加一个缓存
  final Map<String, Picture> _pictureCache = {};

  @override
  void dispose() {
    _pictureCache.clear(); // 清空缓存
    super.dispose();
  }

这个例子使用 PictureRecorder 将 Path 对象记录成 Picture 对象，并将 Picture 对象缓存起来。 在后续的绘制过程中，可以直接使用缓存的 Picture 对象，避免重复绘制 Path 对象。 需要注意在dispose的时候清空缓存。

深入理解 Lottie 动画渲染

Lottie 动画渲染是一个复杂的过程，涉及到 JSON 解析、动画数据提取、关键帧插值和 Canvas 绘制等多个环节。理解这些环节的原理，有助于我们更好地使用 Lottie 动画，并优化其性能。

Flutter 的 Canvas API 提供了强大的绘图能力，可以用于渲染各种矢量图形。通过将 Lottie JSON 文件中的路径数据转换为 Canvas API 可以理解的格式，我们可以将 Lottie 动画无缝集成到 Flutter 应用中。

关键帧插值是 Lottie 动画的关键所在。通过使用合适的插值算法，我们可以实现平滑的动画过渡效果。

最后，优化 Lottie 动画性能需要综合考虑多个因素。通过简化动画、使用静态图片、缓存结果、开启硬件加速等技巧，我们可以提高 Lottie 动画的渲染效率。

核心原理：理解数据结构和渲染流程

Lottie 动画的核心在于其 JSON 数据格式，它描述了矢量图形的结构和动画效果。 Flutter 通过解析 JSON 数据，提取矢量路径信息，并将其映射到 Canvas API 进行渲染。 关键帧插值则保证了动画的平滑过渡。

希望今天的分享能够帮助大家更好地理解 Lottie 动画在 Flutter 中的渲染机制。 谢谢大家！