运用您的 Flutter 知识生成视频、动画和幻灯片！
通过服务器端渲染自动化您的视频制作。
素材仍处于早期阶段！请自行承担使用风险，API可能会发生更改。
快速入门
使用 pub 安装 footage。
dart pub global activate footage
创建一个项目目录，例如 my_video，然后从该目录中运行 footage init 命令。
mkdir my_video
cd my_video
footage init
这将初始化一个 Flutter 项目，并预先配置 footage 默认模板。
要启动预览模式，只需像运行任何常规 Flutter 应用一样运行 lib/main.dart。
flutter run lib/main.dart -d macOS
编写您的动画
组合
组合根对象描述了您视频的通用属性。
Composition(
fps: 30,
duration: const Time.frames(90),
width: 1920,
height: 1080,
child: const MyScene(),
);
当前帧和配置
任何 Composition 的子对象都可以通过 context.video 扩展访问当前的帧和视频属性。
@override
Widget build(BuildContext context) {
final frame = context.video.currentFrame;
final fps = context.video.config.fps;
final videoWidth = context.video.config.width;
// ...
}
序列
序列是构成您视频剪辑的有限时间内的短片段。通过使用序列，您可以对子动画进行时间偏移。
Sequence(
name: 'Circle', // For preview editor
from: Time.frames(10),
duration: Time.frames(20),
child: Builder(
builder: (context) {
final frame = context.video.frame; // From 0 to 20 (since sequence starts at 10 and ends at 30)
// ...
},
),
);
循环
在给定持续时间内重复所有子动画。
Loop(
name: 'Repeated circles', // For preview editor
duration: Time.frames(20),
child: Builder(
builder: (context) {
final frame = context.video.frame; // From 0 to 20, every 20 frames
// ...
},
),
);
渲染您的视频
以 PNG 帧的形式
在您的项目目录中，运行
footage render
您将在 build/video/frames 中找到输出的帧图像。
在底层，渲染过程使用
flutter_test将每一帧渲染为单个图像，这得益于黄金测试。这使得无需运行应用程序即可进行渲染。
作为视频
要渲染视频，您首先需要安装 ffmpeg 命令行工具。
基础
将 -f 格式选项添加到 render 命令。
它们只是 ffmpeg 命令的快捷方式
webm：ffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps=<fps> build/video/out.webm
footage render -f webm
生成的视频是 build/video/out.webm。
高级
使用您的帧文件的 ffmpeg 工具。
footage render
ffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps=30 build/video/out.webm
示例
基础
你好波形
幻灯片
路线图
- 渲染时的资产管理
- 异步帧渲染
- 更多默认 ffmpeg 视频渲染选项
- Flutter 应用的可嵌入播放器
- 预览速度（x0.25、x0.5、x2）
- 用于演示文稿的幻灯片预览模式
- 更多示例
- 网站
感谢
非常感谢 Remotion 项目，它启发了我许多概念。
