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

【问题标题】：Why is bodymovin exporting PNG's and not SVG's?为什么 bodymovin 导出的是 PNG 而不是 SVG？
【发布时间】：2019-07-20 18:05:53
【问题描述】：

我正在尝试使用 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 导出/寻找 pngs？我需要 SVG。

Chrome console errors（抱歉不能嵌入到 10 个代表）

【问题讨论】：

标签： svg lottie bodymovin

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

完全错误。如果您将扩展名从 png 更改为 svg，它将仍然是 png :)