Skip to main content

Remotion 3.1

· 7 min read
Jonny Burger
Jonny Burger
Remotion首席黑客

此版本支持将GIF作为输出格式，官方支持Tailwind，并使弹簧和序列更容易！此外，我们回顾了从v3.0.1到v3.0.31的最佳功能！🎉

作为GIF渲染​

要渲染为GIF而不是视频，在渲染过程中传递--codec=gif标志。我们调整了Remotion的渲染过程，以适应GIF的特殊性：

  • 通常，GIF的帧速率在10-15范围内，因此您无需重构视频，可以使用--every-nth-frame标志。

  • GIF可以循环播放 - 使用--number-of-gif-loops标志，您可以控制GIF的循环行为！

  • 您甚至可以使用Remotion Lambda在许多小VM上分布式渲染您的GIF！

您可以在GIF中放置 ！

TailwindCSS支持​

在一段时间内出现问题后，TailwindCSS支持现在已经稳定，我们甚至为其制作了一个起始模板！要开始，请访问我们的主页，从模板生成GitHub存储库，通过StackBlitz在线尝试，或在终端中键入以下内容：

bash
npx create-video --tailwind
bash
npx create-video --tailwind

是的，现在您可以使用Tailwind编写GIF。

持续时间的弹簧​

现在您可以这样做：

tsx
const fps = 30;
 
const value = spring({
  fps,
  frame,
  config: {
    damping: 200,
  },
  durationInFrames: 300,
});
tsx
const fps = 30;
 
const value = spring({
  fps,
  frame,
  config: {
    damping: 200,
  },
  durationInFrames: 300,
});

结果将是一个持续10秒的弹簧动画！

为什么这是一个如此重要的变革？通常，弹簧动画曲线不是由时间定义的，而是由物理参数定义的。这使得规划变得相当复杂，因为弹簧的持续时间并不明确定义。从理论上讲，弹簧动画永远不会结束，它会永远持续下去（尽管一段时间后，移动几乎是不可察觉的）。

我们之前引入了measureSpring()，它允许您通过设置阈值来计算弹簧的持续时间。

但是要更改弹簧的持续时间，您必须更改物理参数，这将进而改变动画曲线！

直到现在 - 如果将持续时间传递给弹簧，我们将检测曲线的轨迹并拉伸它，使其适合您的持续时间。

<OffthreadVideo> 组件​

此组件 是一个替代<Video> 组件的组件，它使用FFMPEG提取帧并在<Img> 标签内呈现它们。

我们制作了<OffthreadVideo> 组件，以解决用户在<Video> 标签中报告的寻找和限制问题。新的方式提高了可靠性，但也有其权衡之处 - 阅读<OffthreadVideo> vs <Video> 或查看我们在Instagram上的视觉解释！

在Instagram上关注我们，我们会用视觉方式解释概念！

renderMedia() 返回一个缓冲区​

以前，只能在使用 renderMedia() 和 stitchFramesToVideo() API 时将视频保存到文件中。现在它还可以返回一个 Node.JS Buffer！

@remotion/preload 包​

这个新包提供了三个 API，非常方便地在它们出现在 <Player> 中之前预加载资源：resolveRedirect()、preloadAudio() 和 preloadVideo()。

侧边栏改进​

如果您的屏幕空间有限，现在您也可以隐藏左侧的侧边栏了！

内置颜色选择器​

在预览中，转到 Tools -> Color picker 来触发一个取色器，允许您从屏幕中选择任何颜色！目前只有 Chrome 启用了这个功能。

高级用户​

  • 以前，您不能将 <Composition> 包装在 React 上下文（例如 Redux）中，但现在支持了！
  • 如果在 Lambda 渲染中添加 --log=verbose，您将看到哪些帧渲染时间最长。
  • 如果在预览中为 --props 提供一个文件，现在如果属性发生变化，预览将重新加载。
  • 在预览中按 A 跳转到视频的开头，按 E 跳转到结尾。
  • 在预览中播放视频，然后按 Enter 暂停视频并返回到视频开始播放的位置。
  • 如果 layout="none" 未设置，<Sequence> 现在可以有一个 style 属性！
  • 您可以自定义 Remotion Lambda 渲染的二进制文件，例如切换使用的 Emoji 字体。
  • 现在可以使用 delayRender() 推迟 registerRoot() 调用，以便首先完成异步加载任务。

幕后​

我们欢迎帕特里克加入我们的实习生团队！正如您在我们的新团队页面上所看到的，我们现在是一个由三人组成的团队，并且正在为我们的第一轮筹款做准备。

帕特里克的第一个 Remotion 视频！

Remotion 在 React Summit 上赢得了“最令人兴奋的技术应用奖” - 我们归功于您！

未来，我们希望通过新工具、模板和提示使 Remotion 更易于使用！

如果 Remotion 更快会不会更好 - 我正在探索多种选项，从替代并发模型到基于 C++ 的渲染解决方案 - 敬请关注即将到来的内容 🚀