Для создания видео с текстом, анимацией, цветами и формами традиционно требуется специальное программное обеспечение и, возможно, годы обучения анимационной графике. Что, если бы вы могли использовать свой существующий набор инструментов, обучение и опыт
Remotion позволяет разработчикам JavaScript повторно использовать навыки и знания, которые они накопили, для создания сложных анимированных видеороликов с использованием HTML, CSS и React JS. Если вы можете отображать текст с помощью React, анимировать стиль CSS или организовывать
В этой статье я расскажу о процессе использования Remotion и расскажу вам о своих открытиях по ходу дела.
Полный код этой статьи вы можете найти на GitHub.
Увольнение: что и почему?
Remotion — это набор инструментов для создания видео для React, созданный Джонни Бургером. Этот набор инструментов позволяет любому, у кого есть базовое понимание React, HTML или CSS, создавать анимированные видеоролики с помощью кода.
В области создания видео в настоящее время существует высокий барьер для входа
Начиная
К счастью, у Remotion есть быстрый и простой процесс настройки с помощью стартового набора Yarn и npm. В этом примере мы будем использовать npm в качестве инструмента сборки и запуска. Прежде чем мы начнем, вам необходимо установить Node и npm. (Чтобы получить помощь, вы можете следовать этому руководству по установке Node и npm.) Также ознакомьтесь с руководством по установке Remotion, если вы работаете в Linux, так как вам может потребоваться установить дополнительные инструменты. После настройки Node и npm давайте создадим новый проект, запустив этот код:
npm init video
Вам будет предложено ввести имя проекта, которое также используется в качестве имени каталога. В нашем случае это будет
cd
npm start
После запуска команды запуска браузер должен открыться автоматически. Если нет, откройте браузер и перейдите по адресу http: //localhost:3000/. Эта функция позволяет вам просматривать и отлаживать видео, которое вы создаете. Плеер имеет элементы управления, в том числе кнопку воспроизведения, которая позволяет предварительно просмотреть видеоконтент. Также может быть полезно начать с просмотра кода демонстрационного примера, который Remotion предоставляет в качестве руководства по созданию собственного видео.
Привет, мир!
Мы собираемся создать собственное видео с анимацией текста «Hello, World!», чтобы разобраться с компонентами и процессами, поставляемыми в Remotion.
Прежде всего, давайте удалим существующий код примера (все в srcпапке), так как мы хотим начать заново. Затем давайте создадим Demoкаталог в srcкаталоге, который будет хранить и управлять всей нашей работой с видео для этого проекта. Внутри Demoкаталога создайте Demo.jsфайл:
import {Composition, interpolate, Sequence, useCurrentFrame, useVideoConfig} from 'remotion’;
import Title from '. /Title’;
import Hello from '. /Hello’;
import «. /demo.css»;
const Demo = () => {
return (
{/* TODO: add video content */}
) ;
};
export const DemoVideo = () => {
return (
<Composition
id="Demo"
component={Demo}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
defaultProps={{
titleText: 'This is my first Remotion video’,
titleColor: 'blue’,
}}
/>
)
}
Файл Demoэкспортирует наш код видео. Как видите, мы можем создать Demoкомпонент, который будет содержать все визуальные элементы нашего видео. Затем мы можем экспортировать компонент, который отображает Compositionнаше видео. Компонент Compositionпозволяет нам определить некоторые основные свойства, такие как ширина и высота видеоклипа, FPS (кадры в секунду) и функция, которая будет отображаться. Мы также импортируем некоторые утилиты и хуки из Remotion и некоторые дополнительные компоненты, которые мы создадим в ближайшее время.
В настоящее время наш Demoкомпонент пуст, но давайте добавим некоторые элементы в наше видео:
const Demo = ({titleText, titleColor}) => {
const frame = useCurrentFrame () ;
const videoConfig = useVideoConfig () ;
const totalOpacity = interpolate (
frame,
[videoConfig.durationInFrames — 25, videoConfig.durationInFrames — 15],
[1, 0],
{
extrapolateLeft: 'clamp’,
extrapolateRight: 'clamp’,
}
) ;
return (
) ;
};
Мы многое добавили в файл, так что давайте все разберем.
Далее мы можем начать рендеринг различных визуальных элементов на видеоэкране. В этом примере нам нужен текст «Hello, World!», чтобы исчезнуть, а затем исчезнуть, а затем появится текст «Это мое первое видео Remotion». Для этого мы можем визуализировать несколько Sequenceкомпонентов.
Компонент Sequence— это еще одна функция Remotion, которая позволяет нам определить, как и когда компонент отображается в видео и как долго. Это отлично подходит для создания сложных видеороликов, в которые вы хотите добавить временные или многоуровневые элементы, такие как этот пример. Каждый из них Sequenceтакже будет отображаться в проигрывателе браузера и называться на основе имени дочернего компонента. Это позволяет вам контролировать видео, которое вы создаете, и эффекты, которые вы добавляете к нему, в режиме реального времени.
Remotion также предоставляет несколько полезных хуков React, и в этом примере мы используем хуки useCurrentFrameи. вернет текущий кадр, в котором находится видео, что полезно для анимации и реализации действий в зависимости от того, где находится текущая позиция воспроизведения видео. вернет объект с разными значениями, например: useVideoConfiguseCurrentFrameuseVideoConfig
width: ширина видео — полезно для позиционирования элементов в видео.
height: высота видео — полезно для позиционирования элементов в видео.
FPS: количество кадров в секунду, которое можно использовать для определения скорости анимации или движения элемента.
durationInFrames: общая длина видео в кадрах, которую можно использовать для расчета анимации или времени Sequenceпоказа и скрытия.
В нашем случае, как уже упоминалось,
Чтобы стилизовать наш демонстрационный компонент, мы можем использовать CSS вместе со встроенными стилями. При использовании CSS мы хотим применить стили ко всему видео, поэтому давайте создадим demo.cssфайл, в котором будут храниться все стили, охватывающие всю область видео. В нашем примере мы хотим сделать фон белым и выровнять элементы с помощью Flexbox:
.
flex: 1;
}
Теперь давайте углубимся в эти элементы, которые мы визуализируем.
Рендеринг компонентов React в анимации
Компонент Helloбудет базовым компонентом React, который отображает тег H1 с некоторыми примененными встроенными стилями и текстом «Hello, World!» Это самая простая форма компонента, которую мы можем визуализировать. Для простоты мы можем использовать встроенные стили. Но поскольку это React, вы также можете импортировать стили из файла CSS и использовать в качестве альтернативы имя класса, стилизованные компоненты, модули CSS или любой шаблон стиля, с которым вы уже знакомы. Давайте создадим Helloкомпонент. Внутри Demoпапки создайте новый файл Hello.js:
const Hello = () => {
return (
<h1
style={{
fontFamily: 'SF Pro Text, Helvetica, Arial’,
fontWeight: 'bold’,
fontSize: 100,
textAlign: 'center’,
position: 'absolute’,
bottom: 500,
width: '100%'
}}
>
Hello, World!
) ;
};
export default Hello;
Теперь давайте рассмотрим более сложный пример. В Demoпапке создайте новый файл с именем Title.jsи добавьте код компонента ниже:
import {spring, useCurrentFrame, useVideoConfig} from 'remotion’;
const Title = ({titleText, titleColor, bottom}) => {
const videoConfig = useVideoConfig () ;
const frame = useCurrentFrame () ;
const text = titleText.split (' ').map ((t) => ` ${t} `) ;
return (
<h1
style={{
fontFamily: 'SF Pro Text, Helvetica, Arial’,
fontWeight: 'bold’,
fontSize: 100,
textAlign: 'center’,
position: 'absolute’,
bottom: bottom || 160,
width: '100%',
}}
>
{text.map ((t, i) => {
return (
<span
key={t}
style={{
color: titleColor,
marginLeft: 10,
marginRight: 10,
transform: `scale (${spring ({
fps: videoConfig.fps,
frame: frame — i * 5,
config: {
damping: 100,
stiffness: 200,
mass: 0.5,
},
}) }) `,
display: '
}}
>
{t}
) ;
}) }
) ;
};
export default Title;
У нас здесь много чего происходит, так что давайте еще раз разберем, что происходит.
Remotion имеет первоклассную поддержку TypeScript. Это не обязательно, но может улучшить процесс разработки, так как вы получите более подробные предложения по автозаполнению в своей среде IDE. Однако, чтобы сделать этот пример более удобным для начинающих, мы будем использовать обычный JavaScript.
Наш компонент принимает два реквизита — titleTextи titleColor— которые будут использоваться позже в нашем методе рендеринга. Это показывает, что, используя React, мы все еще можем передавать реквизиты по приложению, что делает наши видеоэлементы многоразовыми и динамичными. Вы могли заметить, что в нашем Demoкомпоненте мы передали реквизиты из Compositionкомпонента. Это показывает силу React в действии. Мы можем передавать реквизиты из самого верха приложения React, делая видео адаптивным, и это означает, что вы можете изменить один блок текста, чтобы создать новое видео, или изменить весь контекст видео.
После того, как мы получили доступ к нашим реквизитам в Titleкомпоненте, мы снова вызываем хуки Remotion, чтобы получить videoConfigданные кадра и кадра. Затем Titleкомпонент разбивает переданное свойство text и отображает его по одному слову за раз, используя комбинацию карты и
После того, как все наши видеокомпоненты созданы и готовы к работе, нам нужно, наконец, создать index.jsфайл в корне srcпапки и добавить следующее содержимое:
import {registerRoot} from 'remotion’;
import { DemoVideo } from '. /Demo/Demo’;
registerRoot (DemoVideo) ;
Индексный файл импортирует registerRootфункцию из Remotion, которая позволяет нам отображать видеоконтент. Думайте об этом как о функции рендеринга ReactDOM, но для Remotion. Затем мы передаем наш DemoVideoкомпонент в registerRoot, который будет визуализировать отрендеренное видео либо в режиме разработки, либо в режиме сборки.
Сейчас мы импортируем демонстрационное видео, которое будет обработано Remotion.
Теперь, когда мы объединили все эти функции, у нас есть полностью анимированное видео, в котором представлен один пример различных компонентов и вспомогательных функций, предоставляемых Remotion.
Мы можем запустить видео из корня проекта с помощью следующей команды:
. /node_modules/.bin/remotion preview src/index.js
Или вы можете обновить startскрипт в package.jsonфайле:
— «start»: «remotion preview src/index.tsx»,
+ «start»: «remotion preview src/index.js»,
Затем запустите анимацию с помощью npm start.
Создание анимации «Звездных войн»
Теперь, когда у нас есть общее представление о Remotion и различных предлагаемых компонентах, мы можем бросить себе вызов и немного повеселиться. Давайте создадим собственную версию культового заставки из «Звездных войн». Мы хотим иметь возможность визуализировать сверкающий звездный фон с
Начнем с создания необходимых нам файлов. В srcпапке создайте starWarsIndex.jsфайл и StarWarsпапку. В StarWarsпапке создайте еще четыре файла: starWars.js, starWars.css, starsBackground.js, starsBackground.css.
Когда вы закончите, srcпапка должна выглядеть так:
.
├── Demo
│ └── Files from «Hello, World!» demo
├── index.js
├── StarWars
│ ├── starsBackground.css
│ ├── starsBackground.js
│ ├── starWars.css
│ └── starWars.js
└── starWarsIndex.js
Создание прокручиваемого текста
Добавьте следующее src/starWarsIndex.js:
import {registerRoot, Composition, Sequence} from 'remotion’;
import {useEffect, useState} from 'react’
import { LoremIpsum } from '
import Stars from '. /StarWars/starsBackground’;
import StarWars from '. /StarWars/starWars’;
const StarWarsVideo = () => {
const [textBlocks, setTextBlocks] = useState ([]) ;
useEffect (() => {
setTextBlocks ([
lorem.generateSentences (5),
lorem.generateSentences (5),
lorem.generateSentences (5),
])
}, [])
return (
<>
<Composition
id='
component={Video}
durationInFrames={580}
fps={30}
width={1920}
height={1080}
defaultProps={{ textBlocks }}
/>
</>
) ;
};
registerRoot (StarWarsVideo) ;
Нам также нужно определить некоторое состояние React. В этом примере «Звездных войн» мы собираемся использовать состояние и реквизиты React для генерации случайного текста каждый раз, когда мы перезагружаем видео. Используя модуль
Устанавливаем модуль:
npm i
Затем в том же файле добавьте:
// import statements
const lorem = new LoremIpsum ({
sentencesPerParagraph: {
max: 8,
min: 4
},
wordsPerSentence: {
max: 16,
min: 4
}
}) ;
const Video = ({ textBlocks }) => {
return (
<StarWars
textBlocks={textBlocks}
/>
)
}
const StarWarsVideo = () => {... };
registerRoot (StarWarsVideo) ;
Что касается Sequenceкомпонентов, мы можем объединить два основных компонента для видео. Компонент Starsбудет отображать звездный фон, а StarWarsкомпонент будет отображать прокручивающийся желтый текст. Фон звезды использует стандартную анимацию CSS и трансформируется для отображения звезд. С StarWarsкомпонента мы начинаем возвращаться к анимации на основе Remotion. Мы можем использовать Springвспомогательную функцию для управления верхней позицией, поворотом и переводом свойств преобразования CSS, чтобы анимировать прокрутку текста в зависимости от текущего времени в видео.
Добавьте следующее src/starWars.js:
import React from 'react’;
import '. /starWars.css’;
import {spring, useCurrentFrame} from 'remotion’;
const StarWars = ({ textBlocks }) => {
const frame = useCurrentFrame ()
const fps = 6000;
const top = spring ({
frame,
from: 0,
to: -6000,
fps,
})
const rotate = spring ({
frame,
from: 20,
to: 25,
fps,
})
const translateZ = spring ({
frame,
from: 0,
to: -2500,
fps,
})
return (
<>
<div
className="crawl"
style={{
top: `${top}px`,
transform: `rotateX (${rotate}deg) translateZ (${translateZ}px) `
}}
>
Episode IV
A New Hope
{
textBlocks.map ((block, index) => {
return (
{block}
)
})
}
</>
)
}
export default StarWars;
Обратите внимание, что мы рендерим textBlocksопору, которая будет нашим случайным текстом каждый раз, когда мы создаем видео.
Осталось только создать Starsкомпонент. Добавьте следующее src/starsBackground.js:
import React from 'react’;
import '. /starsBackground.css’;
const Stars = () => {
return (
<>
</>
) ;
}
export default Stars;
Также добавьте следующие стили в src/starsWars.css:
.fade {
position: relative;
width: 100%;
top: -25px;
}
.
display: flex;
position: relative;
height: 800px;
color: #feda4a;
perspective: 400px;
}
.crawl {
position: relative;
top: 9999px;
}
.crawl >.title {
}
.crawl >.title h1 {
margin: 0 0 100px;
}
src/starsBackground.cssСлишком большой, чтобы перечислять здесь. Возьмите его содержимое из репозитория GitHub и добавьте в свой проект.
В результате получится полнофункциональное вступительное видео «Звездных войн», созданное с использованием только кода и без программного обеспечения для редактирования видео.
Последним шагом для запуска примера StarWars является добавление в package.jsonфайл следующего скрипта:
«start: starwars»: «remotion preview src/starWarsIndex.js»,
И вот оно у нас — вступление к «Звездным войнам», полностью написанное на React.
Если вы хотите вставить фактический текст StarWars, возьмите его отсюда и измените useEffectвызов метода в src/starWarsIndex.js:
useEffect (() => {
setTextBlocks ([
— lorem.generateSentences (5),
— lorem.generateSentences (5),
— lorem.generateSentences (5),
+ «It is a period of civil war. Rebel spaceships...»,
+ «Pursued by the Empire’s sinister agents...»
])
}, [])
Потрясающий!
Вывод
Мы сделали два примера, демонстрирующих возможности Remotion, каждый из которых имеет разную сложность. Тем не менее, это лишь малая часть возможностей Remotion. Ниже приведены некоторые другие функции Remotion, которые мы не рассмотрели.
Не забывайте, весь код доступен на GitHub.
Получение данных
Чтобы добавить реактивный элемент в свои видео, вы можете получить данные, которые помогут заполнить контент во время сборки. Remotion предоставляет хуки для обработки выборки данных, например continueRender. delayRenderтакже может использоваться в определенных обстоятельствах для приостановки рендеринга видеоконтента до тех пор, пока данные не будут получены. Эти функции можно использовать для создания видео на основе данных, введенных в базу данных. Или они могут получать данные с сервера — например, создавать вступительное видео для сообщения в блоге и получать с сервера название блога и основное изображение.
Параметризованный рендеринг
Из примеров, которые мы использовали ранее, мы можем контролировать поток реквизитов, передаваемых в видеоэлементы. Это позволяет видео быть отзывчивым. Однако для этого каждый раз требуется изменение кода. При параметризованном рендеринге вы можете передавать данные как часть команды сборки. Это означает, что вы можете в рамках потока CI/CD генерировать видео в зависимости от переданных данных — например, автоматически генерировать
Импорт активов
Вам не нужно создавать элементы только с помощью CSS. Вы также можете импортировать в свой проект другие активы, такие как изображения, существующие видео и аудиофайлы.
Есть еще много дополнительных функций, и в Remotion регулярно выпускаются новые функции. Remotion — это полностью разработанный проект, который делает большие шаги в видеопространстве на основе JavaScript. Это очень мощный инструмент с множеством возможностей, которые еще предстоит раскрыть.
