FFCreator结合Lottie解析json生成视频

由于项目需要最近接触的是将AE的特效视频，通过AE的插件bodymovin转成json文件，然后再结合FFCreator以及Lottie_node的库进行结合生成视频。

结合自己的摸索吧，也查阅了很多资料目前基本上没有很好的案例。官方文档写的都是错误的。
废话不多说，还是直接上代码

首先得弄一个项目包含FFCreator和Lottie这两个库，然后就是直接打代码了，文件是在node.js运行的。????????????????所以运行的命令是? node 文件.ts?

特别注意接口获取的数据一定要转义一下
这里获取的数据必须得转换一下类型，否则是视频当中是没有任何画面的
? ? const animationData = JSON.parse(JSON.stringify(data[0]));

一，这个是通过获取接口 拿到的数据

const path = require('path');
const {
  FFCreator,
  FFScene,
  FFLottie,
} = require('ffcreator');

const width = 1080,
  height = 1920,
  fps = 30;
const Compos = new FFCreator({
  width,
  height,
  cacheDir: path.join(__dirname, '..', 'cache'),
  outputDir: path.join(__dirname, '..', 'video'),
  output: 'lottie.mp4',
  fps: 25,
});


//本地服务器接口：http://localhost:3000/danche，得换成你自己的接口
fetch('http://localhost:3000/danche')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    //取值
    console.log('data: ', typeof data[0]);
    //一定得注意一下，这里获取的数据必须得转换一下类型，否则是视频当中是没有任何画面的
    const animationData = JSON.parse(JSON.stringify(data[0]));

    const lottie = new FFLottie({
      x: width / 2,
      y: height / 2,
      width,
      height,
      data: animationData,//json数据
      loop: true,
      fps
    });

    let scene = new FFScene(); //创建
    scene.setBgColor('#ffffff'); // 设置场景背景颜色
    scene.setDuration(5); // 设置时=

    scene.addChild(lottie);
    Compos.addChild(scene);

    // 开始渲染
    Compos.start();
  })
  .catch(function (error) {
    console.log('Error fetching animation data:', error);
  });

Compos.on('error', (e) => {
  console.log(`渲染失败....${e.pos}, ${e.type}, ${e.error}`);
});

Compos.on('progress', (e) => {
  console.log(`合成视频中...${(e.percent * 100) >> 0}%- - - - - - ${e.type}`);
});

Compos.on('complete', (e) => {
  console.log(`合成完成....\n UGAE: ${e.useage} \n PATH: ${e.output}`);
});

二，也可以直接从本地json文件当中获取

const path = require("path");
const {
  FFCreator,
  FFScene,
  FFLottie,
} = require("ffcreator");

const width = 1080,
  height = 1920,
  fps = 30;
const opts = {
  width,
  height,
  cacheDir: path.join(__dirname, "..", "cache"),
  outputDir: path.join(__dirname, "..", "video"),
  output: "lottie.mp4",
  fps: 25,
}
const Compos = new FFCreator(opts);

const lottie = new FFLottie({
  x: width / 2,
  y: height / 2,
  width,
  height,
  file: path.join(__dirname, "../json/test.json"),
  loop: true,
});



let scene = new FFScene();

scene.addChild(lottie);
Compos.addChild(scene);

// 开始渲染
Compos.start();

Compos.on("error", (e) => {
  console.log(`渲染失败....${e.pos}, ${e.type}, ${e.error}`);
});

Compos.on("progress", (e) => {
  console.log(`合成视频中...${(e.percent * 100) >> 0}%- - - - - - ${e.type}`);
});

Compos.on("complete", (e) => {
  console.log(`合成完成....\n UGAE: ${e.useage} \n PATH: ${e.output}`);
});

三，以上代码运行后生成的视频
?

四，至于json文件你可以参考这篇文章的json，试着去运行：http://t.csdnimg.cn/oevDX