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

本文转载自微信公众号「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中)来更新你的路径变量。

 
 
 
 
    
  
  
  
  
  1. setx /M PATH "path\to\ffmpeg\bin;%PATH%" 
    2.

第2步：启动新项目

安装完上述依赖后，初始化一个新的Remotion视频只需要一个命令，你可以使用yarn或npm来实现。

 
 
 
 
    
  
  
  
  
  1. yarn create video
    2. 
  
  
  
  
  2. or
    3. 
  
  
  
  
  3. npm init video
    4.

你已经成功地初始化了你的第一个Remotion项目，你可以使用npm run start来启动该项目。

Default Remotion Project

Remotion的基础知识

既然你已经启动了你的Remotion项目，你可以开始创建你的视频。但我认为在这之前，如果你对Remotion的基础知识有一定的了解会更好。

Video Properties

Width, height, durationInFrames, fps是由Remotion提供的视频属性。

你可以在组件中使用这些属性来配置组件的像素大小，该组件应该播放多少帧，以及每秒钟的帧数。

 
 
 
 
    
  
  
  
  
  1. import { useVideoConfig } from “remotion”;export const ExampleVideo = () => {
    2. 
  
  
  
  
  2.  const { fps, durationInFrames, width, height } = useVideoConfig();return (
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.    This video is {durationInFrames / fps} seconds long.
    5. 
  
  
  
  
  5.  
  •  );
  • };

    • 建议使用useVideoConfig派生这些属性，就像上面的例子一样，使你的组件可以重复使用。

    Compositions

    Compositions也是Remotion中的一种组件，在这里你可以使用上述属性作为元数据。

     
 
 
 
      
  
  
  
  
    1. import {Composition} from 'remotion';
      2. 
  
  
  
  
    2. import {HelloReaders} from './HelloReaders';export const RemotionVideo: React.FC = () => {
      3. 
  
  
  
  
    3.  return (
      4. 
  
  
  
  
    4.    <>
      5. 
  
  
  
  
    5.     
  
  
  
  
    6.      id=”HelloReaders”
      7. 
  
  
  
  
    7.      component={HelloReaders}
      8. 
  
  
  
  
    8.      durationInFrames={150}
      9. 
  
  
  
  
    9.      fps={30}
      10. 
  
  
  
  
    10.      width={1024}
      11. 
  
  
  
  
    11.      height={720}
      12. 
  
  
  
  
    12.      defaultProps={{
      13. 
  
  
  
  
    13.       titleText: ‘Welcome to My Blog’,
      14. 
  
  
  
  
    14.       titleColor: ‘black’,
      15. 
  
  
  
  
    15.      }}
      16. 
  
  
  
  
    16.     />
      17. 
  
  
  
  
    17.     
  
  
  
  
    18.      ...
      19. 
  
  
  
  
    19.     />
      20. 
  
  
  
  
    20.     
  
  
  
  
    21.      ...
      22. 
  
  
  
  
    22.     />
      23. 
  
  
  
  
    23.   
      24. 
  
  
  
  
    24.  );
      25. 
  
  
  
  
    25. }
      26.

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

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

    Compositions List

    Animation Properties

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

     
 
 
 
      
  
  
  
  
    1. const frame = useCurrentFrame();
      2. 
  
  
  
  
    2. const opacity = frame >= 20 ? 1 : (frame / 20);
      3. 
  
  
  
  
    3. return (
      4. 
  
  
  
  
    4.  
  
  
  
  
    5.    opacity: opacity
      6. 
  
  
  
  
    6.  }}>
      7. 
  
  
  
  
    7.   Hello Readers!
      8. 
  
  
  
  
    8.  
  • )

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

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

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

     
 
 
 
      
  
  
  
  
    1. const {fps} = useVideoConfig();
      2. 
  
  
  
  
    2. const scale = spring({
      3. 
  
  
  
  
    3.   fps,
      4. 
  
  
  
  
    4.   from: 0,
      5. 
  
  
  
  
    5.   to: 1,
      6. 
  
  
  
  
    6.   frame
      7. 
  
  
  
  
    7. });return (
      8. 
  
  
  
  
    8.   
  
  
  
  
    9.     style={{
      10. 
  
  
  
  
    10.       color: titleColor,
      11. 
  
  
  
  
    11.       marginLeft: 10,
      12. 
  
  
  
  
    12.       marginRight: 10,
      13. 
  
  
  
  
    13.       transform: `scale(${scale})`,
      14. 
  
  
  
  
    14.       display: ‘inline-block’,
      15. 
  
  
  
  
    15.     }}
      16. 
  
  
  
  
    16.   >
      17. 
  
  
  
  
    17.   Welcome to My Blog
      18. 
  
  
  
  
    18.   
      19. 
  
  
  
  
    19. )
      20.

    Spring animation

    Sequence Component

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

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

    Timeline View of Remotion Player

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.    
      3.

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

    创建一个简单的视频

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

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

    步骤1

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

    Logo.tsx file:

     
 
 
 
      
  
  
  
  
    1. import {spring, useCurrentFrame, useVideoConfig} from ‘remotion’;
      2. 
  
  
  
  
    2. import {Img} from ‘remotion’;
      3. 
  
  
  
  
    3. import image from ‘./logo.png’
      4. 
  
  
  
  
    4. export const Logo: React.FC<{
      5. 
  
  
  
  
    5. transitionStart: number;
      6. 
  
  
  
  
    6.  }> = ({transitionStart}) => {
      7. 
  
  
  
  
    7.    
      8. 
  
  
  
  
    8.   const videoConfig = useVideoConfig();
      9. 
  
  
  
  
    9.   const frame = useCurrentFrame();
      10. 
  
  
  
  
    10.    return (
      11. 
  
  
  
  
    11.    
  
  
  
  
    12.     style={{
      13. 
  
  
  
  
    13.      textAlign: ‘center’,
      14. 
  
  
  
  
    14.      marginTop: ‘10%’,
      15. 
  
  
  
  
    15.      width: videoConfig.width,
      16. 
  
  
  
  
    16.      height: videoConfig.height,
      17. 
  
  
  
  
    17.     }}
      18. 
  
  
  
  
    18.    >
      19. 
  
  
  
  
    19.    
  
  
  
  
    20.     style={{
      21. 
  
  
  
  
    21.      transform:`scale(${spring({
      22. 
  
  
  
  
    22.       fps: videoConfig.fps,
      23. 
  
  
  
  
    23.       frame: frame — transitionStart,
      24. 
  
  
  
  
    24.       config: {
      25. 
  
  
  
  
    25.        damping: 100,
      26. 
  
  
  
  
    26.        stiffness: 200,
      27. 
  
  
  
  
    27.        mass: 0.5,
      28. 
  
  
  
  
    28.       },
      29. 
  
  
  
  
    29.      })})`,
      30. 
  
  
  
  
    30.     }} 
      31. 
  
  
  
  
    31.     src={image}>
      32. 
  
  
  
  
    32.    
  •  );
  • };

    • Title.tsx file:

     
 
 
 
      
  
  
  
  
    1. import {spring, useCurrentFrame, useVideoConfig} from 'remotion';export const Title: React.FC<{
      2. 
  
  
  
  
    2.  titleText: string;
      3. 
  
  
  
  
    3.  titleColor: string;
      4. 
  
  
  
  
    4. }> = ({titleText, titleColor}) => { const videoConfig = useVideoConfig();
      5. 
  
  
  
  
    5.  const frame = useCurrentFrame();
      6. 
  
  
  
  
    6.  const text = titleText.split(‘ ‘).map((text) => ` ${text} `);
      7. 
  
  
  
  
    7.  return (
      8. 
  
  
  
  
    8.   
  
  
  
  
    9.    style={{
      10. 
  
  
  
  
    10.     fontFamily: ‘Helvetica, Arial’,
      11. 
  
  
  
  
    11.     fontWeight: ‘bold’,
      12. 
  
  
  
  
    12.     fontSize: 110,
      13. 
  
  
  
  
    13.     textAlign: ‘center’,
      14. 
  
  
  
  
    14.     position: ‘absolute’,
      15. 
  
  
  
  
    15.     bottom: 160,
      16. 
  
  
  
  
    16.     width: ‘100%’,
      17. 
  
  
  
  
    17.    }}
      18. 
  
  
  
  
    18.   >
      19. 
  
  
  
  
    19.   {text.map((text, i) => {
      20. 
  
  
  
  
    20.    return (
      21. 
  
  
  
  
    21.     
  
  
  
  
    22.      key={text}
      23. 
  
  
  
  
    23.      style={{
      24. 
  
  
  
  
    24.       color: titleColor,
      25. 
  
  
  
  
    25.       marginLeft: 10,
      26. 
  
  
  
  
    26.       marginRight: 10,
      27. 
  
  
  
  
    27.       transform: `scale(${spring({
      28. 
  
  
  
  
    28.        fps: videoConfig.fps,
      29. 
  
  
  
  
    29.        frame: frame — i * 5,
      30. 
  
  
  
  
    30.        config: {
      31. 
  
  
  
  
    31.         damping: 100,
      32. 
  
  
  
  
    32.         stiffness: 200,
      33. 
  
  
  
  
    33.         mass: 0.5,
      34. 
  
  
  
  
    34.        },
      35. 
  
  
  
  
    35.       })})`,
      36. 
  
  
  
  
    36.       display: ‘inline-block’,
      37. 
  
  
  
  
    37.      }}
      38. 
  
  
  
  
    38.     >
      39. 
  
  
  
  
    39.     {text}
      40. 
  
  
  
  
    40.     
      41. 
  
  
  
  
    41.    );
      42. 
  
  
  
  
    42.   })}
      43. 
  
  
  
  
    43.  
      44. 
  
  
  
  
    44. );
      45. 
  
  
  
  
    45. };
      46.

    SubText.tsx file:

     
 
 
 
      
  
  
  
  
    1. import {interpolate, useCurrentFrame} from 'remotion';export const Title: React.FC<{
      2. 
  
  
  
  
    2.  titleText: string;
      3. 
  
  
  
  
    3.  titleColor: string;
      4. 
  
  
  
  
    4. }> = ({titleText, titleColor}) => {
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.  const frame = useCurrentFrame();
      7. 
  
  
  
  
    7.  const opacity = interpolate(frame, [0, 30], [0, 1]);return (
      8. 
  
  
  
  
    8.   
  
  
  
  
    9.    style={{
      10. 
  
  
  
  
    10.     fontFamily: 'Helvetica, Arial',
      11. 
  
  
  
  
    11.     fontSize: 40,
      12. 
  
  
  
  
    12.     textAlign: 'center',
      13. 
  
  
  
  
    13.     position: 'absolute',
      14. 
  
  
  
  
    14.     bottom: 140,
      15. 
  
  
  
  
    15.     width: '100%',
      16. 
  
  
  
  
    16.     opacity,
      17. 
  
  
  
  
    17.    }}
      18. 
  
  
  
  
    18.   >
      19. 
  
  
  
  
    19.    Follow me on{' '} medium.com {' '} for more articles
      20. 
  
  
  
  
    20.   
      21. 
  
  
  
  
    21.  );
      22. 
  
  
  
  
    22. };
      23.

    步骤2

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

     
 
 
 
      
  
  
  
  
    1. import {interpolate, Sequence, useCurrentFrame, useVideoConfig} from ‘remotion’;
      2. 
  
  
  
  
    2. import {Logo} from ‘./components/Logo’;
      3. 
  
  
  
  
    3. import {SubText} from ‘./components/SubText’;
      4. 
  
  
  
  
    4. import {Title} from ‘./components/Title’;export const MyVideo: React.FC<{
      5. 
  
  
  
  
    5. titleText: string;
      6. 
  
  
  
  
    6. titleColor: string;
      7. 
  
  
  
  
    7. }> = ({titleText, titleColor}) => {const frame = useCurrentFrame();
      8. 
  
  
  
  
    8. const videoConfig = useVideoConfig();
      9. 
  
  
  
  
    9. const opacity = 
      10. 
  
  
  
  
    10.  interpolate(
      11. 
  
  
  
  
    11.   frame,
      12. 
  
  
  
  
    12.   [videoConfig.durationInFrames — 25, 
      13. 
  
  
  
  
    13.    videoConfig.durationInFrames
      14. 
  
  
  
  
    14.    15
      15. 
  
  
  
  
    15.   ],
      16. 
  
  
  
  
    16.   [1, 0],
      17. 
  
  
  
  
    17.   {extrapolateLeft: ‘clamp’,extrapolateRight: ‘clamp’,}
      18. 
  
  
  
  
    18.  );
      19. 
  
  
  
  
    19. const transitionStart = 0;return (
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.    
  
  
  
  
    22.    from={0} 
      23. 
  
  
  
  
    23.    durationInFrames={videoConfig.durationInFrames}>
      24. 
  
  
  
  
    24.     
      25. 
  
  
  
  
    25.     
  
  
  
  
    26.    from={transitionStart + 35} 
      27. 
  
  
  
  
    27.    durationInFrames={Infinity}>
      28. 
  
  
  
  
    28.     
      29. 
  
  
  
  
    29.     
  
  
  
  
    30.    from={transitionStart + 75} 
      31. 
  
  
  
  
    31.    durationInFrames={Infinity}>
      32. 
  
  
  
  
    32.     
      33. 
  
  
  
  
    33.   
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35.  
      36. 
  
  
  
  
    36. );
      37. 
  
  
  
  
    37. };
      38.

    步骤3

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

     
 
 
 
      
  
  
  
  
    1. import {Composition} from ‘remotion’;
      2. 
  
  
  
  
    2. import {MyVideo} from ‘./MyVideo’;
      3. 
  
  
  
  
    3. import {Logo} from ‘./components/Logo’;
      4. 
  
  
  
  
    4. import {SubText} from ‘./components/SubText’;
      5. 
  
  
  
  
    5. export const RemotionVideo: React.FC = () => {
      6. 
  
  
  
  
    6.  return (
      7. 
  
  
  
  
    7.   <>
      8. 
  
  
  
  
    8.    
  
  
  
  
    9.     id=”HelloReaders”
      10. 
  
  
  
  
    10.     component={HelloReaders}
      11. 
  
  
  
  
    11.     durationInFrames={150}
      12. 
  
  
  
  
    12.     fps={30}
      13. 
  
  
  
  
    13.     width={1920}
      14. 
  
  
  
  
    14.     height={1080}
      15. 
  
  
  
  
    15.     defaultProps={{
      16. 
  
  
  
  
    16.      titleText: ‘Welcome to My Blog’,
      17. 
  
  
  
  
    17.      titleColor: ‘black’,
      18. 
  
  
  
  
    18.     }}
      19. 
  
  
  
  
    19.    />
      20. 
  
  
  
  
    20.    
  
  
  
  
    21.     id=”Logo”
      22. 
  
  
  
  
    22.     component={Logo}
      23. 
  
  
  
  
    23.     durationInFrames={200}
      24. 
  
  
  
  
    24.     fps={30}
      25. 
  
  
  
  
    25.     width={1920}
      26. 
  
  
  
  
    26.     height={1080}
      27. 
  
  
  
  
    27.    />
      28. 
  
  
  
  
    28.    
  
  
  
  
    29.     id=”Title”
      30. 
  
  
  
  
    30.     component={SubText}
      31. 
  
  
  
  
    31.     durationInFrames={100}
      32. 
  
  
  
  
    32.     fps={30}
      33. 
  
  
  
  
    33.     width={1920}
      34. 
  
  
  
  
    34.     height={1080}
      35. 
  
  
  
  
    35.    />
      36. 
  
  
  
  
    36.   
      37. 
  
  
  
  
    37.  );
      38. 
  
  
  
  
    38. };
      39.

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

    Finalized Video in Development Mode

    结论

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

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

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

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

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

    谢谢您的阅读！！!

    标题名称：如何使用React创建视频和动画
    本文网址：http://www.shufengxianlan.com/qtweb/news44/348944.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    全网营销推广知识

    分类信息网

    移动机房服务器托管　　 　三台网站建设　　 　微信小程序　　 　成都塑料加工　　 　营销型网站建设　　 　服务器机柜　　 　泸县网站建设　　 　网站优化排名推广　　 　ios开发　　 　成都服务器托管　　 　商标注册　　 　成都标识标牌设计制作　　 　400电话申请　　 　成都网站建设　　 　网站定制　　 　微信公众号二次开发　　 　网站推广营销　　 　网络推广公司　　 　复盛机电设备　　 　java虚拟主机