Remotion Skill 入门指南：从零构建你的第一个动态视频应用

1次阅读

没有评论

共计 1826 个字符，预计需要花费 5 分钟才能阅读完成。

Remotion Skill 是一个基于 React 的库，允许开发者使用熟悉的 React 组件化方式来创建动态视频。它结合了 React 的声明式编程模型和视频编辑的灵活性，使得动态视频生成变得更加高效和可维护。

动态视频生成：无需专业视频编辑软件，直接通过代码生成高质量视频
React 组件化开发：利用现有的 React 知识，快速构建复杂动画效果
高效迭代：修改代码后即时预览，大大加快开发流程

数据可视化视频
产品演示视频
社交媒体内容生成
教育视频制作

Node.js 14 或更高版本
npm 或 yarn 包管理器
基本的 React 和 TypeScript 知识

创建一个新的 React 项目（如果还没有）

npx create-react-app my-remotion-project --template typescript

安装 Remotion 核心包

npm install remotion

安装 Remotion CLI 工具

npm install -g @remotion/cli

Composition 是 Remotion 中的基本构建块，代表视频中的一个场景或片段。每个 Composition 定义了视频的宽度、高度、时长和帧率等属性。

Sequence 允许你在时间轴上组织内容，可以将不同的元素安排在不同的时间段显示。

Frame 代表视频中的单个帧，可以通过当前帧数来控制动画进度。

my-remotion-project/
├── src/
│   ├── index.tsx        # 应用入口
│   ├── Video.tsx        # 主视频组件
│   └── config.ts        # 配置参数
└── package.json

// src/Video.tsx
import {Composition, Sequence} from 'remotion';
import {useCurrentFrame} from 'remotion';

export const MyVideo = () => {
  return (
    <Composition
      id="MyAnimation"
      component={Animation}
      durationInFrames={60}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

const Animation = () => {const frame = useCurrentFrame();

  // 文本从透明到不透明的动画
  const opacity = Math.min(1, frame / 30);

  // 文本从左侧滑入的动画
  const translateX = Math.min(0, 100 - frame * 3);

  return (
    <div style={{
      flex: 1,
      backgroundColor: '#fff',
      justifyContent: 'center',
      alignItems: 'center',
      display: 'flex'
    }}>
      <div style={{
        opacity,
        transform: `translateX(${translateX}px)`,
        fontSize: '60px',
        fontWeight: 'bold'
      }}>
        Hello Remotion!
      </div>
    </div>
  );
};