JavaScript 学习 Remotion：使用 HTML、CSS 和 React 创建动画视频

kanizsuchona1

传统上，创建包含文本、动画、颜色和形状的视频需要专业软件，并且可能需要多年的动态图形培训。如果您可以使用现有的工具集、培训和 Web 开发背景来做同样的事情，会怎么样？ Backward Skip 10s Play Video Forward Skip 10s Remotion允许 JavaScript 开发人员重用他们所积累的技能和知识，使用 HTML、CSS 和 React JS 创建复杂的动画视频。如果您可以使用 React 渲染文本、为 CSS 样式设置动画或组织 HTML 内容，那么您现在可以仅使用代码创建和编辑自己的视频，无需视频编辑应用程序或软件。 在本文中，我将介绍使用 Remotion 的过程，并向您介绍我的发现。 您可以在GitHub上找到本文的完整代码。


远程：什么，为什么？ Remotion 是由Jonny Burger创建的 React 视频创建工具包。该工具包允许任何对 React、HTML 或 CSS 有基本了解的人使用代码创建动画视频。 由于使用和掌握这些工具所需的软件和培训，目前视频创作领 阿联酋电报号码列表 域的进入门槛很高。通过利用 JavaScript 开发人员现有的工具包，这为更广泛的用户群打开了视频创作空间。随着视频成为代码，我们可以利用现有模式来实现更有效的视频创建，例如根据参数自动生成或构建管道。 入门 值得庆幸的是，Remotion 通过 Yarn 和 npm 入门套件实现了快速、简单的设置过程。对于此示例，我们将坚持使用 npm 作为构建和运行工具。在开始之前，您需要安装 Node 和 npm。（如需帮助，您可以按照本指南安装 Node 和 npm。



如果您使用的是 Linux，另请参阅Remotion 安装指南，因为您可能需要安装其他工具。设置 Node 和 npm 后，让我们通过运行以下代码来创建一个新项目： npm init video 这将提示您输入项目名称，该名称也用作目录名称。在我们的例子中，它将是my-video。进入后，我们可以进入该my-video目录并通过运行启动脚本来启动默认视频项目，如下所示： cd my-video npm start 运行启动命令后，浏览器应自动打开。如果没有，请打开浏览器并导航到。此功能允许您观看和调试您正在创建的视频。该播放器具有包含播放按钮的控件，可让您预览视频内容。首先查看演示示例的代码也可能很有用，Remotion 提供了该示例作为如何构建您自己的视频的指南。 你好世界！ 我们将创建自己的视频，将文本“Hello, World!”动画化，以掌握 Remotion 中提供的组件和流程。