65.0K 装机量，skills.sh 探花技能 remotion-best-practices 如何用代码改变视频制作？

import { useCurrentFrame, interpolate } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

const scale = spring({
  frame,
  fps,
  config: { damping: 200 },
});

npx remotion add @remotion/transitions

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneA />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneB />
  </TransitionSeries.Sequence>
</TransitionSeries>

// 线性插值
const opacity = interpolate(frame, [0, 100], [0, 1]);

// 带缓动的插值
const value = interpolate(frame, [0, 100], [0, 1], {
  easing: Easing.inOut(Easing.quad),
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

// ✅ 正确
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 1 * fps], [0, 1]);

// ❌ 错误（假设 fps=30）
const opacity = interpolate(frame, [0, 30], [0, 1]);

import { Img, staticFile } from 'remotion';

// 图片
<Img src={staticFile('photo.png')} />;

// 视频（来自 @remotion/media）
import { Video } from "@remotion/media";
<Video src={staticFile('clip.mp4')} />;

// 音频（来自 @remotion/media）
import { Audio } from "@remotion/media";
<Audio src={staticFile('music.mp3')} />;

<Img src="https://example.com/image.png" />
<Video src="https://remotion.media/video.mp4" />

<Video
  src={staticFile("video.mp4")}
  trimBefore={2 * fps}  // 跳过前 2 秒
  trimAfter={10 * fps} // 结束于第 10 秒
/>

npx create-video@latest

bunx create-video@latest
yarn create video@latest
pnpm create video@latest

my-video/
 ├── public/           # 静态资源
 ├── src/
 │   ├── Root.tsx      # 根组件，定义所有组合
 │   ├── MyComp.tsx    # 视频组件
 │   └── index.ts      # 入口文件
 ├── package.json
 └── remotion.config.ts # 配置文件

npm start

import { Config } from '@remotion/cli/config';

Config.setVideoImageFormat('jpeg');
Config.setOverwriteOutput(true);

import { AbsoluteFill, useCurrentFrame, useVideoConfig, Audio, staticFile } from 'remotion';
import { spring } from 'remotion';

export const TikTokVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const scale = spring({
    frame,
    fps,
    config: { damping: 8 },
  });

  const opacity = spring({
    frame,
    fps,
    config: { damping: 200 },
  });

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      <Audio src={staticFile('music.mp3')} />
      <AbsoluteFill
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          transform: `scale(${scale})`,
          opacity,
        }}
      >
        <div style={{
          fontSize: '80px',
          color: '#fff',
          fontWeight: 'bold',
          textAlign: 'center',
        }}>
          Hello Remotion!
        </div>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

import { Composition } from 'remotion';
import { TikTokVideo } from './TikTokVideo';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="TikTok"
        component={TikTokVideo}
        durationInFrames={450} // 15 秒 * 30 fps
        fps={30}
        width={1080}
        height={1920} // 9:16 竖屏
      />
    </>
  );
};

import { useCurrentFrame, useVideoConfig, spring } from 'remotion';

const data = [
  { label: 'Q1', value: 100 },
  { label: 'Q2', value: 150 },
  { label: 'Q3', value: 120 },
  { label: 'Q4', value: 200 },
];

export const BarChart = () => {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  const STAGGER_DELAY = 5;

  const bars = data.map((item, i) => {
    const delay = i * STAGGER_DELAY;
    const barHeight = spring({
      frame,
      fps,
      delay,
      config: { damping: 200 },
    }) * item.value * 2;

    return (
      <div
        key={i}
        style={{
          position: 'absolute',
          left: `${100 + i * 200}px`,
          bottom: '100px',
          width: '100px',
          height: `${barHeight}px`,
          backgroundColor: '#4a9eff',
          borderRadius: '8px',
        }}
      >
        <div
          style={{
            position: 'absolute',
            top: '-30px',
            left: '50%',
            transform: 'translateX(-50%)',
            color: '#fff',
            fontSize: '24px',
            fontWeight: 'bold',
          }}
        >
          {item.value}
        </div>
        <div
          style={{
            position: 'absolute',
            bottom: '-40px',
            left: '50%',
            transform: 'translateX(-50%)',
            color: '#fff',
            fontSize: '24px',
            fontWeight: 'bold',
          }}
        >
          {item.label}
        </div>
      </div>
    );
  });

  return (
    <div style={{ width, height, backgroundColor: '#1a1a2e' }}>
      <h1 style={{
        position: 'absolute',
        top: '50px',
        left: '50%',
        transform: 'translateX(-50%)',
        color: '#fff',
        fontSize: '48px',
        fontWeight: 'bold',
      }}>
        2024 年度销售数据
      </h1>
      {bars}
    </div>
  );
};

import { useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Img, staticFile } from 'remotion';

export const ProductDemo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = spring({
    frame,
    fps,
    config: { damping: 200 },
  });

  const y = interpolate(frame, [0, 2 * fps], [100, 0], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ backgroundColor: '#fff' }}>
      <Img
        src={staticFile('product-screenshot.png')}
        style={{
          position: 'absolute',
          top: '200px',
          left: '50%',
          transform: `translateX(-50%) translateY(${y}px)`,
          width: '800px',
          opacity,
          borderRadius: '16px',
          boxShadow: '0 10px 40px rgba(0,0,0,0.1)',
        }}
      />
      <h1 style={{
        position: 'absolute',
        top: '50px',
        left: '50%',
        transform: 'translateX(-50%)',
        fontSize: '48px',
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center',
      }}>
        新功能上线
      </h1>
      <p style={{
        position: 'absolute',
        top: '120px',
        left: '50%',
        transform: 'translateX(-50%)',
        fontSize: '24px',
        color: '#666',
        textAlign: 'center',
      }}>
        让你的工作更高效
      </p>
    </AbsoluteFill>
  );
};

// ✅ 正确
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);

// ❌ 错误
<div style={{ animation: 'fadeIn 1s' }} />

// ✅ 正确
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 1 * fps], [0, 1]);

// ❌ 错误（假设 fps=30）
const opacity = interpolate(frame, [0, 30], [0, 1]);

// ✅ 正确
<Img src={staticFile('photo.png')} />

// ❌ 错误
<Img src="/photo.png" />

// ✅ 正确
export const MyCompositionSchema = z.object({
  title: z.string(),
  color: zColor(),
});

<Composition
  id="MyComposition"
  component={MyComponent}
  schema={MyCompositionSchema}
/>

const calculateMetadata: CalculateMetadataFunction = async ({ props }) => {
  const data = await fetch(`https://api.example.com/data`).then(r => r.json());
  return {
    durationInFrames: Math.ceil(data.duration * 30),
  };
};