扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了怎么使用React创建视频和动画 ，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联专业为企业提供紫云网站建设、紫云做网站、紫云网站设计、紫云网站制作等企业网站建设、网页设计与制作、紫云企业网站模板建站服务，十载紫云做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
Remotion是一个最近推出的库，它允许您使用 React 创建视频和动态图形。作为一名 Web 开发人员，我发现它非常有趣，因为它为我们自己创建视频和动画打开了一扇新的大门。
它的官网：
https://www.remotion.dev/
Source: https://www.remotion.dev/
正如我提到的，Remotion是最近推出的一个令人兴奋的库，它允许你使用你最喜欢的网络技术，如HTML、CSS、JavaScript、TypeScript等来创建视频和动画。
除此之外，你还可以使用你所有关于编程、函数、算法、API的知识来为视频添加各种效果。作为一个基于React的库，Remotion能够最大限度地利用Reacts的特性，如可重用的组件、强大的组合和快速重载。
Remotion还配备了一个被称为Remotion Player的播放器，它给你带来了真正的视频编辑器的感觉，它可以用浏览器来播放和审查你的视频。
创建一个新的Remotion项目是非常简单的。但有两个依赖项你应该先安装。
步骤1：安装NodeJS和FFMPEG
由于安装NodeJS是非常常见的，我将重点介绍安装FFMPEG。首先，你需要从他们的下载页面下载合适版本的FFMPEG。
FFMPEG Downloads page.
然后将其解压到你选择的文件夹中，并在CMD中以管理员权限运行以下命令(在windows中)来更新你的路径变量。
setx /M PATH "path\to\ffmpeg\bin;%PATH%"
第2步：启动新项目
安装完上述依赖后，初始化一个新的Remotion视频只需要一个命令，你可以使用yarn或npm来实现。
yarn create video or npm init video
你已经成功地初始化了你的第一个Remotion项目，你可以使用npm run start来启动该项目。
Default Remotion Project
既然你已经启动了你的Remotion项目，你可以开始创建你的视频。但我认为在这之前，如果你对Remotion的基础知识有一定的了解会更好。
Video Properties
Width, height, durationInFrames, fps是由Remotion提供的视频属性。
你可以在组件中使用这些属性来配置组件的像素大小，该组件应该播放多少帧，以及每秒钟的帧数。
import { useVideoConfig } from “remotion”;export const ExampleVideo = () => { const { fps, durationInFrames, width, height } = useVideoConfig();return ( This video is {durationInFrames / fps} seconds long. 建议使用useVideoConfig派生这些属性，就像上面的例子一样，使你的组件可以重复使用。
Compositions
Compositions也是Remotion中的一种组件，在这里你可以使用上述属性作为元数据。
import {Composition} from 'remotion'; import {HelloReaders} from './HelloReaders';export const RemotionVideo: React.FC = () => { return ( <> 如果你观察项目中的Video.tsx文件，你会看到3个Composition组件，每个组件中都有元数据，包括视频属性。
同时，这些组合也显示在Remotion Player的左上角。
Compositions List
Animation Properties
当涉及到视频时，动画是最重要的，而Remotion为您提供了配置一些惊人的动画的自由。例如，如果你需要一个简单的脸部效果，你可以逐帧调整帧的不透明度。