Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use React to create video and animation", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to use React to create video and animation" bar!

Text

Remotion is a recently launched library that allows you to create videos and dynamic graphics using React. As a Web developer, I find it very interesting because it opens a new door for us to create our own videos and animations.

Brief introduction

As I mentioned, Remotion is an exciting library recently launched that allows you to create videos and animations using your favorite web technologies, such as HTML, CSS, JavaScript, TypeScript, etc.

In addition, you can use all your knowledge about programming, functions, algorithms, and API to add effects to the video. As a React-based library, Remotion can make the most of Reacts's features, such as reusable components, powerful combinations, and fast overloading.

Remotion also comes with a player called Remotion Player, which gives you the feel of a real video editor that can play and censor your videos using a browser.

How to set up Remotion?

Creating a new Remotion project is very simple. But there are two dependencies you should install first.

Step 1: install NodeJS and FFMPEG

Since installing NodeJS is very common, I will focus on installing FFMPEG. First, you need to download the appropriate version of FFMPEG from their download page.

FFMPEG Downloads page.

Then unpack it into a folder of your choice and run the following command (in windows) with administrator privileges in CMD to update your path variables.

Setx / M PATH "path\ to\ ffmpeg\ bin;%PATH%"

Step 2: start a new project

After installing the above dependencies, initializing a new Remotion video requires only one command, which you can do using yarn or npm.

Yarn create video or npm init video

You have successfully initialized your first Remotion project, you can use npm run start to start the project.

Default Remotion Project

Basic knowledge of Remotion

Now that you have started your Remotion project, you can start creating your videos. But I think it would be better if you had some basic knowledge of Remotion before that.

Video Properties

Width, height, durationInFrames, fps are the video attributes provided by Remotion.

You can use these properties in the component to configure the pixel size of the component, how many frames the component should play, and the number of frames per second.

Import {useVideoConfig} from "remotion"; export const ExampleVideo = () = > {const {fps, durationInFrames, width, height} = useVideoConfig (); return (This video is {durationInFrames / fps} seconds long. );}

It is recommended that you use useVideoConfig to derive these properties, as in the above example, to make your components reusable.

Compositions

Compositions is also a component of Remotion, where you can use the above attributes as metadata.

Import {Composition} from 'remotion'; import {HelloReaders} from'. / HelloReaders';export const RemotionVideo: React.FC = () = > {return ();}

If you look at the Video.tsx file in the project, you will see three Composition components, each with metadata, including video properties.

At the same time, these combinations are also displayed in the upper-left corner of Remotion Player.

Compositions List

Animation Properties

When it comes to video, animation is the most important, and Remotion gives you the freedom to configure some amazing animations. For example, if you need a simple facial effect, you can adjust the frame opacity frame by frame.

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

In addition, Remotion has two built-in functions called interpolate and spring, which you can use to create more advanced animations.

The interpolation function accepts four input parameters, including the input value (mainly the frame), the range of values that the input can bear, the range of values you want to map the input to, and an optional parameter.

Spring animation makes you more creative in the presentation by making the animation more natural. For example, the following spring animation configuration will add a small zoom effect to your text.

Const {fps} = useVideoConfig (); const scale = spring ({fps, from: 0, to: 1, frame}); return (Welcome to My Blog)

Spring animation

Sequence Component

The Sequence component in Remotion accomplishes two main tasks. It is mainly used to assign different time frames to the elements in the video. While maintaining the connection between elements, it also allows you to reuse the same component.

The Sequence component is a high-level component that has the ability to accommodate subcomponents. In addition, it accepts three prop, including two required prop and an optional prop.

Name: this is an optional prop. The name you specify will appear on the Remotion player timeline. If you use the correct naming pattern, you will be able to understand how each component is connected.

Timeline View of Remotion Player

From: this defines the framework, and this component should appear in the video.

DurationInFrames: the length of the Sequence component in frames.

For example, the following Sequence component will appear in the video after 20 frames and will continue until the end, because the durationOnFrames is infinite.

Now that you have a basic understanding of several basic properties and components in Remotion, we can start creating the first video using Remotion.

Create a simple video

As you have seen in the above example, I will create a simple video to show the logo and welcome words of my blog, and have some animation.

I will use the default project layout we created at the beginning of the article.

Step 1

First, I created three components for the three elements in my video: Logo.tsx, Title.tsx, and 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}) = > {const videoConfig = useVideoConfig (); const frame = useCurrentFrame (); return (

);}

Title.tsx file:

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

SubText.tsx file:

Import {interpolate, useCurrentFrame} from 'remotion';export const Title: React.FC = ({titleText, titleColor}) = > {const frame = useCurrentFrame (); const opacity = interpolate (frame, [0,30], [0,1]); return (Follow me on {'} medium.com {'} for more articles);}

Step 2

Then I import the three components into MyVideo.tsx and wrap them in Sequence components to assign the relevant time frame to each component. In addition, I pass several prop and animations to the subcomponents.

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, 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 and return ();}

Step 3

Finally, I import all the above files into Video.tsx and use the Composition component to pass the relevant metadata.

Import {Composition} from 'remotion'; import {MyVideo} from'. / MyVideo'; import {Logo} from'. / components/Logo'; import {SubText} from'. / components/SubText'; export const RemotionVideo: React.FC = () = > {return ();}

Now you can run your first Remotion video. You can use npm run start to see it in development mode, or you can save it as a mp4 file using npm run build.

Thank you for reading, the above is "how to use React to create video and animation" content, after the study of this article, I believe you on how to use React to create video and animation this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.