为什么 bodymovin 导出 PNG 而不是 SVG？

Question

我正在尝试使用 lottie 为在 After Effects 中创建的 SVG 动画制作动画。我使用 bodymovin 扩展来导出 JSON 数据文件。但是，我也注意到导出包含一些 PNG 图像。我还收到控制台错误，提示无法找到 PNG。

为什么我在 AE 中使用 SVG（AI 文件）时导出 PNG。下面是我的代码和错误。

index.ts

import * as lottie from 'lottie-web';
import * as header from './assets/header.json';

import './css/base.sss';

var animation = lottie.loadAnimation({
    container: document.getElementById('header'),
    animationData: header,
    renderer: 'svg/canvas/html',
    autoplay: true
});

但我收到以下错误，无法找到图像。为什么 bodymovin exporting/looking 用于 png？我需要 SVG。

Chrome console errors（抱歉直到 10 次才能嵌入）

Answer 1

我发现了问题。我必须在 AI 中将路径转换为形状 here。

Answer 2

我发现的另一种方法是在导出的 .json 文件中搜索 .png 扩展名，并将找到的扩展名替换为 .svg。确保将 .svg 文件添加到同一目录。

我使用了这个 bodymovin 渲染选项：

我在 Dreamweaver 的 .json 文件中搜索如下：

我希望这对某人有帮助！！！

Answer 3

在 Adobe After Effect 中，您可以使用 Create Shapes from vector layer

为什么 bodymovin 导出 PNG 而不是 SVG？

Why is bodymovin exporting PNG's and not SVG's?

svg

bodymovin

lottie