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

Question

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

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

索引.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 控制台错误（抱歉不能嵌入，直到 10 代表）

score 7 · Accepted Answer

7

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

于 2018-02-21T14:07:29.500 回答

score 3 · Accepted Answer

3

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

于 2019-07-20T10:05:53.360 回答

score 0 · Accepted Answer

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

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

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

我希望这可以帮助别人！！！

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

3 回答 3

Related

Reference