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

Question

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

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

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出口/寻找pngs？我需要SVG。

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

Answer 1

我发现了问题。我必须将路径转换为AI中的形状，如here所述。

Answer 2

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

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

我在Dreamweaver的.json文件中进行了搜索，如下所示：

我希望这对某人有帮助！

Answer 3

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