FFCreator
made with Node.js

FFCreator是一个基于node.js的高速短视频加工库，一种轻量又简单的解决方案，只需要很少的依赖和较低的机器配置就可以快速开始工作。

FFCreator基于node.js开发, 普通前端工程师既可以轻松上手。它模拟实现了animate.css90%的动画效果。

用户可以轻松地把 web 页面端的动画效果转为视频。

特性

• 完全基于node.js开发，非常易于使用，并且易于扩展和开发。
• 依赖很少、易于安装，对机器配置要求较低。
• 视频制作速度极快，一个 5 分钟的视频只需要 1-2 分钟。
• 支持近百种场景炫酷过渡动画效果。
• 支持图片、声音、视频剪辑、文本等元素。
• 支持字幕组件、可以将字幕与语音 tts 结合合成音频新闻。
• 支持简单（可扩展）的虚拟主播，您可以制作自己的虚拟主播。
• 包含animate.css90%的动画效果，可以将 css 动画转换为视频。
• FFCreatorLite版具有更快的合成速度，它也是一种不错的选择。

安装

安装环境及依赖

• node.js环境
• FFmpeg
• node-canvas
• headless-gl

安装FFCreator

npm i ffcreator --save

启动项目

• 有显示设备的电脑：npm start
• 无显示设置的服务器：xvfb-run -s "-ac -screen 0 1280x1024x24" npm start

使用教程

FFCreator使用非常简单, 你可以把它当作一个图形动画库即可。

FFCreator由creator(入口)、场景(FFScene)、元素(包括图片、视频、字幕等)以及音乐等组成。

• 一个影片可以添加多个场景, 场景之间可以设置过渡特效动画和停留时长。
• 一个场景可以添加多个不同元素, 对元素可以添加各自的动画(默认支持animate.css)。
• 既可以在整个影片上添加背景音乐, 又可以在单个场景上添加声音(适合语音 tts)。

const { FFScene, FFText, FFVideo, FFAlbum, FFImage, FFCreator } = require("ffcreator");

// 创建FFCreator 实例
const creator = new FFCreator({
    cacheDir,
    outputDir,
    width: 800,
    height: 450
});

// 创建场景
const scene = new FFScene();
scene.setBgColor("#ffcc22");
scene.setDuration(6);
scene.setTransition("GridFlip", 2);
creator.addChild(scene);

// 创建图片元素及添加动画效果
const image = new FFImage({ path: path.join(__dirname, "../assets/01.jpg") });
image.addEffect("moveInUp", 1, 1);
image.addEffect("fadeOutDown", 1, 4);
scene.addChild(image);

// 创建文字
const text = new FFText({ text: "hello 你好", x: 400, y: 300 });
text.setColor("#ffffff");
text.setBackgroundColor("#000000");
text.addEffect("fadeIn", 1, 1);
scene.addChild(text);

// 创建相册元素
const album = new FFAlbum({
    list: [img1, img2, img3, img4],   // Picture collection for album
    x: 250,
    y: 300,
    width: 500,
    height: 300,
});
album.setTransition('zoomIn');      // Set album switching animation
album.setDuration(2.5);             // Set the stay time of a single sheet
album.setTransTime(1.5);            // Set the duration of a single animation
scene.addChild(album);

// 创建视频元素
const video = new FFVideo({ path, x: 300, y: 50, width: 300, height: 200 });
video.addEffect("zoomIn", 1, 0);
scene.addChild(video);

creator.output(path.join(__dirname, "../output/example.mp4"););
creator.start();        // Start processing
creator.closeLog();     // Close log (including perf)
//添加事件监听
creator.on('start', () => {
    console.log(`FFCreator start`);
});
creator.on('error', e => {
    console.log(`FFCreator error: ${JSON.stringify(e)}`);
});
creator.on('progress', e => {
    console.log(colors.yellow(`FFCreator progress: ${e.state} ${(e.percent * 100) >> 0}%`));
});
creator.on('complete', e => {
    console.log(colors.magenta(`FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `));
});

示例