remotion-best-practices-zh

何时使用

当你处理 Remotion 代码并需要领域特定知识时，请使用本技能（中文版）。

如何使用

阅读 rules 目录下的各个规则文件以查看详细说明和代码示例：

• rules/3d.md – 在 Remotion 中使用 Three.js 和 React Three Fiber 的 3D 内容
• rules/animations.md – Remotion 的动画基础
• rules/assets.md – 在 Remotion 中导入图片、视频、音频和字体
• rules/audio.md – 音频使用与处理：导入、裁剪、音量、速度、音高
• rules/calculate-metadata.md – 在渲染前动态设置 composition 的时长、尺寸和 props
• rules/can-decode.md – 使用 Mediabunny 检查视频是否可被浏览器解码
• rules/charts.md – 图表与数据可视化模式
• rules/compositions.md – 定义 Composition、静帧、文件夹、默认 props 和动态元数据
• rules/display-captions.md – 在 Remotion 中显示字幕（例如 TikTok 风格）并高亮单词
• rules/extract-frames.md – 使用 Mediabunny 在指定时间点提取视频帧
• rules/fonts.md – 在 Remotion 中加载 Google 字体或本地图标
• rules/get-audio-duration.md – 使用 Mediabunny 获取音频时长（秒）
• rules/get-video-dimensions.md – 使用 Mediabunny 获取视频宽高
• rules/get-video-duration.md – 使用 Mediabunny 获取视频时长（秒）
• rules/gifs.md – 在 Remotion 中同步显示 GIF
• rules/images.md – 在 Remotion 中嵌入图片（使用 Img 组件）
• rules/import-srt-captions.md – 使用 @remotion/captions 导入 .srt 字幕
• rules/lottie.md – 在 Remotion 中使用 Lottie 动画
• rules/measuring-dom-nodes.md – 测量 DOM 元素尺寸
• rules/measuring-text.md – 测量文本尺寸、适配文本与检查溢出
• rules/sequencing.md – 时间序列（Sequencing）模式：延迟、裁剪、限制时长
• rules/tailwind.md – 在 Remotion 中使用 TailwindCSS
• rules/text-animations.md – 文本动画模式
• rules/timing.md – 时间插值曲线：线性、缓动、弹簧
• rules/transcribe-captions.md – 将音频转录为字幕
• rules/transitions.md – 场景过渡模式
• rules/trimming.md – 剪辑/裁剪模式
• rules/videos.md – 嵌入视频的注意事项：裁剪、音量、速度、循环、音高
• rules/parameters.md – 使用 Zod schema 使视频可参数化
• rules/maps.md – 使用 Mapbox 添加并动画化地图

（以上为中文索引，代码示例保留原文以便直接复制）

默认视频尺寸（竖屏 9:16）

本技能集合默认针对竖屏视频（纵向 9:16）。推荐的默认分辨率为 1080 x 1920（宽 x 高）。

建议做法：

• 在 src/Root.tsx 或你项目的根 Remotion 配置中，统一将 Composition 的 width 设置为 1080，height 设置为 1920，以保证所有示例与组件默认使用竖屏尺寸。
• 将本规则文件的说明也放入 rules/portrait.md（已在本包中提供），便于团队成员查阅。

示例（在 src/Root.tsx 中）:

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

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={300}
      fps={30}
      width={1080}
      height={1920}
    />
  );
};