Skip to main content

Remotion 1.3

· 5 min read
Jonny Burger
Jonny Burger
独立开发者

距离初始发布仅1周，Remotion 1.3来了！仅仅7天，我们合并了超过40个拉取请求 - 简直太神奇了！让我们看看这个版本的变化。

速度提升2倍 - 再次！​

2天前，渲染时间减半，而在这个版本中，我们又将其减半了！查看这个Spotify Wrapped示例的基准测试：

Remotion 1.1

hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     98.972 s ±  0.650 s    [User: 123.329 s, System: 10.103 s]
  Range (min … max):   97.951 s … 99.540 s    5 runs
hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     98.972 s ±  0.650 s    [User: 123.329 s, System: 10.103 s]
  Range (min … max):   97.951 s … 99.540 s    5 runs

Remotion 1.3

hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     17.921 s ±  0.224 s    [User: 36.492 s, System: 3.482 s]
  Range (min … max):   17.650 s … 18.264 s    5 runs
hyperfine --min-runs 5  'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
  Time (mean ± σ):     17.921 s ±  0.224 s    [User: 36.492 s, System: 3.482 s]
  Range (min … max):   17.650 s … 18.264 s    5 runs

从98秒到18秒 - 快了5.5倍！同时，我们达到了一个重要的里程碑：这个19秒长的720p视频比实时渲染速度更快。尽管我的电脑比大多数电脑更快（8核Intel i9-9900K芯片），但仍然非常令人印象深刻！

我们通过各种Puppeteer渲染管道优化实现了这一性能提升。特别感谢jeetiss实现了一项复杂的性能优化，不再需要为每一帧重新加载页面。

支持纯JavaScript​

我的目标是强制每个人都使用Typescript - 但我失败了。现在已经添加了对纯JavaScript的支持！查看这里如何启用它。请小心操作 🙈

类型安全的配置文件​

许多您可以通过CLI标志传递的选项，现在也可以通过在存储库中添加remotion.config.ts文件来添加。例如，如果您想将并发性增加到您拥有的线程数量，并且永远不想写--overwrite，您可以将以下内容添加到配置文件中：

tsx
import os from "os";
import { Config } from "remotion";
Config.Rendering.setConcurrency(os.cpus().length);
Config.Output.setOverwriteOutput(true);
tsx
import os from "os";
import { Config } from "remotion";
Config.Rendering.setConcurrency(os.cpus().length);
Config.Output.setOverwriteOutput(true);

您可以在此页面上查看所有选项。使用Typescript创建配置文件的目标是提供自动完成功能，轻松突出显示已弃用的选项，并使未来更改选项时更容易展示如何迁移。

缓动 API​

尽管存在缓动 API，但它是未记录的。了解可用的Easing 方法以及如何与interpolate()一起使用！

tsx
import { Easing, interpolate } from "remotion";
interpolate(frame, [0, 100], {
  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});
tsx
import { Easing, interpolate } from "remotion";
interpolate(frame, [0, 100], {
  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

一些小事​

如果您错过了​

添加了另一个示例 - Spotify Wrapped! 这是一个完全动态的示例，您可以使用命令行标志替换所有数据。YouTube 上有一个 2 小时的教程视频，源代码在 GitHub 上。

Please paste the Markdown content you need to be translated into Chinese.