文章详情

登录

短信预约-IT技能 免费直播动态提醒

• 地区
• 手机号
• 验证码获取验证

立即预约

选择考试省份

• 北京
• 上海
• 天津
• 重庆
• 河北
• 山东
• 辽宁
• 黑龙江
• 吉林
• 甘肃
• 青海
• 河南
• 江苏
• 湖北
• 湖南
• 江西
• 浙江
• 广东
• 云南
• 福建
• 海南
• 山西
• 四川
• 陕西
• 贵州
• 安徽
• 广西
• 内蒙
• 西藏
• 新疆
• 宁夏
• 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用React创建视频和动画

2024-12-03 03:53

关注

本文转载自微信公众号「TianTianUp」，作者小弋。转载本文请联系TianTianUp公众号。

大家好，我是小弋。

分享的内容是:

如何使用 React Remotion 来创建视频的，如果你之前对视频很感兴趣的话，这篇文章可以参考。

正文

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?

创建一个新的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项目，你可以开始创建你的视频。但我认为在这之前，如果你对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 ( 
   <> 
    
     id=”HelloReaders” 
     component={HelloReaders} 
     durationInFrames={150} 
     fps={30} 
     width={1024} 
     height={720} 
     defaultProps={{ 
      titleText: ‘Welcome to My Blog’, 
      titleColor: ‘black’, 
     }} 
    /> 
    
     ... 
    /> 
    
     ... 
    /> 
   
 ); 
} 

如果你观察项目中的Video.tsx文件，你会看到3个Composition组件，每个组件中都有元数据，包括视频属性。

同时，这些组合也显示在Remotion Player的左上角。

Compositions List

Animation Properties

当涉及到视频时，动画是最重要的，而Remotion为您提供了配置一些惊人的动画的自由。例如，如果你需要一个简单的脸部效果，你可以逐帧调整帧的不透明度。

const frame = useCurrentFrame(); 
const opacity = frame >= 20 ? 1 : (frame / 20); 
return ( 
 
   opacity: opacity 
 }}> 
  Hello Readers! 
 

除此之外，Remotion还有2个内建的函数，名为interpolate和spring，你可以用它们来建立更高级的动画。

插值函数接受4个输入参数，包括输入值(主要是帧)，输入可以承担的范围值，你想把输入映射到的数值范围，以及一个可选参数。

弹簧动画通过使动画更自然，让你在演示中更有创意。例如，下面的弹簧动画配置会给你的文本添加一个小的缩放效果。

const {fps} = useVideoConfig(); 
const scale = spring({ 
  fps, 
  from: 0, 
  to: 1, 
  frame 
});return ( 
  
    style={{ 
      color: titleColor, 
      marginLeft: 10, 
      marginRight: 10, 
      transform: `scale(${scale})`, 
      display: ‘inline-block’, 
    }} 
  > 
  Welcome to My Blog 
   
) 

Spring animation

Sequence Component

Remotion中的 Sequence组件完成了2个主要任务。它主要是用来给视频中的元素分配不同的时间框架。在保持元素之间的联系的同时，它也允许你重复使用同一个组件。

Sequence组件是一个高阶组件，它有能力容纳子组件。除此之外，它还接受3个prop，包括2个必需的prop和1个可选的prop。

• name : 这是一个可选的prop。你指定的名字将出现在Remotion播放器的时间线上。如果你使用正确的命名模式，你将能够理解每个组件是如何连接的。

Timeline View of Remotion Player

• from: 这定义了框架，该组件应该出现在视频中。
• durationInFrames: 以帧为单位的Sequence组件的长度。 

例如，下面的Sequence组件将在20帧后出现在视频中，并将持续到结束，因为durationOnFrames是无限的。

<Sequence from={20} durationInFrames={Infinity}> 
   Sequence> 

由于你现在对Remotion中的几个基本属性和组件有了基本的了解，我们可以开始使用Remotion创建第一个视频。

创建一个简单的视频

正如你在上面的例子中已经看到的，我将创建一个简单的视频来显示我的博客的标志和欢迎词，并有一些动画。

我将使用我们在文章开头创建的默认项目布局。

步骤1

首先，我为我的视频中的3个元素创建了3个组件：Logo.tsx, Title.tsx和SubText.tsx。

Logo.tsx file:

import {spring, useCurrentFrame, useVideoConfig} from ‘remotion’; 
import {Img} from ‘remotion’; 
import image from ‘./logo.png’ 
export const Logo: React.FC<{ 
transitionStart: number; 
 }> = ({transitionStart}) => { 
    
  const videoConfig = useVideoConfig(); 
  const frame = useCurrentFrame(); 
   return ( 
   
    style={{ 
     textAlign: ‘center’, 
     marginTop: ‘10%’, 
     width: videoConfig.width, 
     height: videoConfig.height, 
    }} 
   > 
   
    style={{ 
     transform:`scale(${spring({ 
      fps: videoConfig.fps, 
      frame: frame — transitionStart, 
      config: { 
       damping: 100, 
       stiffness: 200, 
       mass: 0.5, 
      }, 
     })})`, 
    }}  
    src={image}> 
    
 ); 
}; 

Title.tsx file:

import {spring, useCurrentFrame, useVideoConfig} from 'remotion';export const Title: React.FC<{ 
 titleText: string; 
 titleColor: string; 
}> = ({titleText, titleColor}) => { const videoConfig = useVideoConfig(); 
 const frame = useCurrentFrame(); 
 const text = titleText.split(‘ ‘).map((text) => ` ${text} `); 
 return ( 
   
); 
}; 

SubText.tsx file:

import {interpolate, useCurrentFrame} from 'remotion';export const Title: React.FC<{ 
 titleText: string; 
 titleColor: string; 
}> = ({titleText, titleColor}) => { 
  
 const frame = useCurrentFrame(); 
 const opacity = interpolate(frame, [0, 30], [0, 1]);return ( 
  
   style={{ 
    fontFamily: 'Helvetica, Arial', 
    fontSize: 40, 
    textAlign: 'center', 
    position: 'absolute', 
    bottom: 140, 
    width: '100%', 
    opacity, 
   }} 
  > 
   Follow me on{' '} medium.com {' '} for more articles 
   
 ); 
}; 

步骤2

然后，我把这3个组件导入到MyVideo.tsx中，并用Sequence组件包装，为每个组件分配相关的时间框架。除此之外，我还将几个prop和动画传递给子组件。

import {interpolate, Sequence, useCurrentFrame, useVideoConfig} from ‘remotion’; 
import {Logo} from ‘./components/Logo’; 
import {SubText} from ‘./components/SubText’; 
import {Title} from ‘./components/Title’;export const MyVideo: React.FC<{ 
titleText: string; 
titleColor: string; 
}> = ({titleText, titleColor}) => {const frame = useCurrentFrame(); 
const videoConfig = useVideoConfig(); 
const opacity =  
 interpolate( 
  frame, 
  [videoConfig.durationInFrames — 25,  
   videoConfig.durationInFrames 
   15 
  ], 
  [1, 0], 
  {extrapolateLeft: ‘clamp’,extrapolateRight: ‘clamp’,} 
 ); 
const transitionStart = 0;return ( 
  
   <Sequence  
   from={0}  
   durationInFrames={videoConfig.durationInFrames}> 
     
  Sequence>  <Sequence  
   from={transitionStart + 35}  
   durationInFrames={Infinity}> 
     
  Sequence>  <Sequence  
   from={transitionStart + 75}  
   durationInFrames={Infinity}> 
     
  Sequence> 
  
  
); 
}; 

步骤3

最后，我将上述所有文件导入Video.tsx，并使用Composition组件传递相关元数据。

import {Composition} from ‘remotion’; 
import {MyVideo} from ‘./MyVideo’; 
import {Logo} from ‘./components/Logo’; 
import {SubText} from ‘./components/SubText’; 
export const RemotionVideo: React.FC = () => { 
 return ( 
  <> 
   
    id=”HelloReaders” 
    component={HelloReaders} 
    durationInFrames={150} 
    fps={30} 
    width={1920} 
    height={1080} 
    defaultProps={{ 
     titleText: ‘Welcome to My Blog’, 
     titleColor: ‘black’, 
    }} 
   /> 
   
    id=”Logo” 
    component={Logo} 
    durationInFrames={200} 
    fps={30} 
    width={1920} 
    height={1080} 
   /> 
   
    id=”Title” 
    component={SubText} 
    durationInFrames={100} 
    fps={30} 
    width={1920} 
    height={1080} 
   /> 
   
 ); 
}; 

现在，你就可以运行你的第一个Remotion视频了。你可以使用npm run start在开发模式下看到它，或者使用npm run build保存为mp4文件。

Finalized Video in Development Mode

结论

虽然Remotion还很年轻，但它已经有了一些惊人的功能。它可能还达不到专业视频编辑器的质量。但我们肯定可以期待一些惊喜的到来。

此外，Remotion还有像参数化渲染、服务器端渲染和数据获取这样的功能，这些对于开发者来说是非常熟悉的。他们可以利用自己的经验，从这个工具中获得最大的收益。

最重要的是，对于那些寻求创建个人使用的小视频或动画的方法的人来说，它是一个很好的选择。

在我看来，我们可以利用Remotion来创建简单的视频和动画，用我们所掌握的网络开发知识。但在视频编辑功能方面，很多东西需要改进和简化。

不过，我强烈建议你下载Remotion，并给它一个机会。这将是一种全新的体验。

谢谢您的阅读！！!

猜你喜欢

AI推送时光机

如何使用React创建视频和动画

后端开发视频动画2024-12-03

MySQL如何创建和使用视图

后端开发2024-03-06

如何创建和使用MySQL视图

后端开发2024-04-02

MySQL中如何创建和使用视图

后端开发2024-04-09

如何利用VUE创建视频流应用

后端开发2024-04-02

如何使用HTML5 Canvas创建动态粒子网格动画

后端开发2024-04-02

如何使用HTML和CSS创建一个响应式视频展示布局

后端开发2023-10-25

如何使用 Formik 创建 React 表单

后端开发FormikReact2024-11-30

使用Python创建快速创建剪映草稿轨道，自动生成视频

后端开发2023-09-15

如何使用CSS创建炫彩三角边框动画

后端开发2023-07-04

如何用transition实现短视频APP的点赞动画

后端开发2024-04-02

如何使用HTML和CSS创建一个响应式视频播放页面布局

后端开发2023-10-21

使用 HTML5 API 创建引人入胜的视频和音频内容

后端开发2024-03-01

如何使用React创建QR code生成器

后端开发ReactQR2024-12-01

如何在SQL Server中创建和使用索引视图

后端开发2024-06-04

如何创建基于React和Vue的微应用

后端开发2024-04-02

Golang动态库使用指南：如何创建和使用动态库？

后端开发2024-02-29

behaviors如何创建和使用

后端开发2023-06-29

如何使用 VSaaS 管理视频和警报？

后端开发VSaaS视频监控2024-12-02

如何使用CSS创建一个炫酷的球体动画效果

后端开发2024-04-02

首页课程

资料下载问答资讯