首先简单的介绍一下Lottie:
Lottie 是一种开源技术,用于在移动应用程序和 Web 应用程序中展示高质量的矢量动画。它由 Airbnb 创建并维护,旨在简化矢量动画的创建和展示。Lottie 提供了一种跨平台的方法,可以在 iOS、Android 和 Web 上渲染复杂的矢量动画,而无需额外的插件或工具。
以下是关于 Lottie 的一些关键特点和信息:
JSON 文件格式: Lottie 动画使用 JSON 文件格式来存储动画数据。这个 JSON 文件包含了动画的属性、关键帧、图层和路径等信息。设计师可以使用支持 Lottie 的设计工具(如 Adobe After Effects)创建这些文件。
高质量的矢量动画: Lottie 动画是矢量的,因此它们可以以任何尺寸和分辨率呈现而不失真。这使得它们非常适合在不同设备和屏幕上展示。
跨平台兼容性: Lottie 提供了针对 iOS、Android 和 Web 的运行时库。这意味着您可以在不同的移动平台和 Web 上使用相同的动画文件,实现一致的用户体验。
易于集成: Lottie 运行时库允许开发人员将动画轻松集成到其应用程序中。无论是原生应用程序还是 Web 应用程序,都可以使用适当的库加载和播放 Lottie 动画。
开源项目: Lottie 是一个开源项目,它的源代码托管在 GitHub 上。这使得开发人员可以自由使用、修改和分享 Lottie 技术,同时社区也不断增加了各种 Lottie 动画资源。
由于公司业务需要,前端生成lottieJSON文件,后端将JSON转成MP4格式的视频文件。
这里主要使用的是nodejs和ffmpeg技术。(是个人预研结果,不一定是最优解决方案,欢迎大家一起讨论更优的解决方案)
主要分为两个步骤:
第一个步骤使用nodejs虚拟dom节点渲染lottieJson文件并逐帧播放,然后使用canvas将lottieJson渲染的每一帧画面生成图片。
第二个步骤使用ffmpeg将帧图生成一个视频。
下面是代码逻辑:
第一步:
const lottie = require('lottie-nodejs');
const { JSDOM } = require('jsdom');//用于创建虚拟节点
const fs = require('fs'); //用于生成文件
//准备好Lottie的JSON文件
const animationData = require('./test4.json'); // 导入 Lottie 动画的 JSON 数据
const dom = new JSDOM('<html><body></body></html>');//创建虚拟dom节点
const d = dom.window.document.createElement('canvas'); //创建一个canvas节点
d.width = animationData.w; //从JSON中获取原始的宽
d.height = animationData.h; //从JSON中获取原始的高
// 创建一个 Lottie 实例
const animation = lottie.loadAnimation({
animationData: animationData,
renderer: 'canvas',
loop: false,
autoplay: false,
container: d
});
// 设置输出文件夹
const outputFolder = './output_frames'; // 指定输出的帧文件夹
if (!fs.existsSync(outputFolder)) {
fs.mkdirSync(outputFolder);
}
// 逐帧渲染并保存图像
for (let frame = 0; frame < animation.totalFrames; frame++) {
animation.goToAndStop(frame, true);
// 渲染到 Canvas
animation.renderer.renderFrame(frame);
// 获取 Canvas 的 base64 数据
const dataURL = d.toDataURL('image/png');
// 去除数据头部
const base64Data = dataURL.replace(/^data:image\/\w+;base64,/, '');
// 创建 Buffer
const buffer = Buffer.from(base64Data, 'base64');
let frameFileName = `${outputFolder}/frame_${frame}.png`;
// 保存 Buffer 到文件
fs.writeFileSync(frameFileName, buffer);
}
第二步,使用FFmpeg生成视频:
ffmpeg -framerate 30 -i F:/gitlab/node-lottie/output_frames/frame_%d.png -c:v libx264 -r 30 -pix_fmt yuv420p output.mp4
这里ffmpeg是简单的将图片生成视频,后续可以参考ffmpeg命令调整,比如可以增加音频功能等。