# 远程位用于构建远程视频的动画组件和实用程序。该库最强大的功能是 **Scene3D** — 一个基于相机的 3D 演示系统（如 impress.js），可通过飞行相机移动、步骤感知元素动画和 Transform3D 位置管理来实现电影多部分合成。 **在构建任何重要的构图时，请优先选择 Scene3D 作为基础。** 它可以在一个系统中处理相机移动、计时、元素定位和响应式布局。单个组件（动画文本、粒子等）作为放置在 Scene3D 步骤内的内容效果最佳。 **先决条件：** `remotion` >= 4.0，`react` >= 18，`react-dom` >= 18 # 通过 npm npm 安装远程位 # 通过 jsrepo（复制源进行定制） npx jsrepo 初始化 https://unpkg.com/remotion-bits/registry.json npx jsrepo 添加动画文本粒子系统场景 3d ## 进口一切都是从“remotion-bits”导出的：导入{ // 3D场景系统（主要工作流程） Scene3D、步骤、Element3D、StepResponsive、变换 3D、矢量 3、 useScene3D、useCamera、useActiveStep、 // 动画组件动画文本、动画计数器、打字机、代码块、 StaggeredMotion、GradientTransition、MatrixRain、ScrollingColumns、粒子、生成器、行为、 // 核心使用视口矩形，插值、缓动、插值颜色关键帧、插值渐变关键帧、随机、resolvePoint、createRect、 } 来自“远程位”； ## 核心概念 ### 1\.动画值大多数动画属性接受“AnimatedValue”：静态数字或在动画持续时间内插值的关键帧数组。不透明度: 1 // 静态 opacity: [0, 1] // 动画 0→1 opacity: [0, 1, 0.5, 0] // 多关键帧：0→1→0.5→0均匀间隔 scale: [0.8, 1] // 从 80% 缩放到 100% y: [30, 0] // 从 30px 偏移处向上滑动关键帧在整个持续时间内均匀分布。有 4 个关键帧超过 60 帧：帧 0→20→40→60。 ### 2\.使用 useViewportRect 进行响应式调整大小 **永远不要对像素值进行硬编码。**始终使用相对于视口的单位： const rect = useViewportRect(); // rect.width — 合成宽度（例如 1920） // rect.height — 合成高度（例如 1080） // rect.vw — 宽度的 1% (19.2) // rect.vh — 高度的 1% (10.8) // rect.vmin — min(vw, vh) — 使用它来调整大多数尺寸 // rect.vmax — max(vw, vh) // rect.cx, cy — 中心坐标 const { vmin } = 矩形；使用“vmin”指定字体大小、元素尺寸、间距和填充。这可确保合成在 1920×1080、1080×1920、3840×2160 等分辨率下呈现相同的效果。 #### 了解常见分辨率下的 vmin `vmin` = `最小（宽度，高度）/ 100`。 **在选择乘数之前，请始终计算 vmin 等于您的合成尺寸的像素。** 构图尺寸|纵横比| vmin (像素) | vmin * 8 | vmin * 10 |最小电压 * 5 ---|---|---|---|---|--- 1920×1080 | 16:9 风景 | **10.8** | 86 像素 | 108 像素 | 54像素 1080×1920 | 9:16 肖像 | **10.8** | 86 像素 | 108 像素 | 54像素 1080×1080 | 1:1 平方| **10.8** | 86 像素 | 108 像素 | 54像素 3840×2160 | 16:9 4K | **21.6** | 173 像素 | 216 像素 | 108像素 1280×720 | 16:9 720p | **7.2** | 58 像素 | 72 像素 | 36像素 #### 字体大小参考（1920×1080，vmin = 10.8px） **使用这些经过生产验证的乘数。应该选择更大，而不是更小。** 角色 |乘数| 1080p 像素 |示例 ---|---|---|--- 英雄/主标题 | `vmin * 10–15` | 108–162 像素 |全屏标题章节标题 | `vmin * 6–8` | 65–86 像素 | Scene3D 步骤标题副标题| `vmin * 4–5` | 43–54 像素 |卡牌标题、计数器机身/卡标| `vmin * 2.5–3` | 27–32 像素 |功能标签、描述码/小文| `vmin * 1.5–2` | 16–22 像素 |代码块、标题精美印刷| `vmin * 1–1.2` | 11–13 像素 |密集块中的代码字体 **常见错误：使用`vmin * 3` 作为标题。** 在 1080p 下，只有 32 像素 — 对于正文来说很好，但对于任何标题来说都太小了。对于突出的标题，至少从“vmin * 8”开始。 #### 宽高比意识纵横比决定了 vmin 的“最小”尺寸： * **风景 (16:9, 1920×1080):** `vmin` 基于高度 (1080/100 = 10.8)。水平空间充裕；垂直空间有限。 * **肖像 (9:16, 1080×1920):** `vmin` 基于宽度 (1080/100 = 10.8)。垂直空间丰富；水平空间有限。 * **方形 (1:1, 1080×1080):** `vmin = vmax = vh = vw`。所有方向均等。 **布局影响：** * 在横向模式下，全角文本可能会很长——考虑 `width: vmin * 70` 或 `maxWidth` 约束 * 在纵向中，标题可能需要换行 - 对于宽度受限的文本使用更少的单词或更小的乘数 * 使用“vmin”来表示无论方向如何都应均匀缩放的尺寸 * 当大小调整应遵循特定轴时使用“vw”/“vh”（例如，全角背景：“rect.width”） #### 元素大小参考元素|乘数|描述 ---|---|--- 卡片宽度| `vmin * 50–70` |浮动卡、信息面板卡高| `vmin * 25–40` |匹配内容需求卡片边框半径| `vmin * 1–2` |微妙的舍入间距/间隙| `vmin * 1–3` |元素之间衬垫| `vmin * 2–4` |容器内粒径| `vmin * 1–3` |单个粒子点图标大小| `vmin * 8–12` |装饰图标 ### 3\.过渡道具图案组件接受具有以下形状的“transition”道具：过渡={{ // 计时持续时间：30，//以帧为单位的持续时间延迟: 10, // 开始前的延迟 frames: [0, 60], // 或明确的帧范围（替代持续时间） easing: "easeOutCubic", // 缓动曲线 // 变换（全部接受 AnimatedValue） x: [30, 0], // 翻译X y: [30, 0], // 翻译Y z: [0, 100], // 平移 Z (3D) scale: [0.8, 1], // 统一比例 scaleX,scaleY, // 轴比例 rotate: [0, 360], // 2D 旋转（度）旋转X，旋转Y，旋转Z，// 3D旋转（度） skew, skewX, skewY, // 倾斜（度） transform: Transform3D[], // 3D 变换关键帧（请参阅 Transform3D 部分） // Visual（全部接受AnimatedValue）不透明度: [0, 1], Blur: [10, 0], // 以像素为单位的高斯模糊边框半径: [0, 20], color: ["#ff0000", "#00ff00"], // CSS 颜色插值背景颜色: ["#000", "#fff"], }} ### 4\.缓动函数输入 EasingName = | “线性” | “轻松”| “缓出”| “缓入出” | “easeInQuad”| “easeOutQuad”| “easeInOutQuad” | “easeInCubic”| “easeOutCubic”| “easeInOutCubic” | “轻松正弦”| “easeOutSine”| “缓入正弦” | “easeInQuart”| “easeOutQuart”| “easeInOutQuart”；最常见：“easeOutCubic”用于条目，“easeInOutCubic”用于相机移动。 ### 5\.布局和显示配置 **关键：在文档中显示时，位已用布局容器预先包装。** 包装器（“withShowcaseFill”）提供了具有默认样式的“AbsoluteFill”。构建独立组合时，您必须自己提供此布局。 #### 布局包装器文档中显示的位会自动包装为： <绝对填充样式={{ 背景颜色: 'var(--color-background-dark)', // #100f0f fontSize: `${config.width * 0.05}px`, // 宽度的 5% 字体粗细：700，颜色： 'var(--color-primary-hover)', // #fcc192 显示：'弯曲'，对齐项目：'居中'， justifyContent: '中心', }}> <组件/> 这意味着像“Hello”这样的简单位可以工作，因为包装器将它们居中并提供背景/颜色。 #### 构建独立的组合创建直接使用的组合（不通过文档包装器显示）时，您必须提供自己的布局：从“remotion”导入{AbsoluteFill}；导出 const MyComposition: React.FC = () => { const rect = useViewportRect(); const { vmin } = 矩形；返回（ <绝对填充样式={{ 背景颜色: '#100f0f', 颜色：'#fcc192'， fontFamily: 'system-ui, sans-serif', }}> {/* 这里是您的内容 */} {/* 步骤... */} ）； }; #### CSS 变量（主题） Bits 使用 CSS 变量来保持主题一致。这些在文档中渲染时可用，但**必须在独立项目中定义或替换为文字值**：变量|默认值 |用途 ---|---|--- `--颜色主色` | `#ec8b49` |口音橙色 `--颜色主色悬停` | `#fcc192` |浅橙色/文字颜色 `--颜色背景-深色` | `#100f0f` |深色背景 `--颜色表面-深色` | `#1c1b1a` |表面/卡片背景 `--颜色表面光` | `#343331` |表面较轻 `--颜色边框-深色` | `#100f0f` |深色边框 `--颜色边框光` | `#1c1b1a` |浅色边框 **在独立项目中：** 将 `var(--color-*)` 替换为十六进制文字值，或在 HTML/CSS 中定义这些变量。 #### 常见布局错误 1. **缺少背景：** 内容在透明/白色背景上呈现。始终在最外面的容器上设置“backgroundColor”。 2. **缺少 AbsoluteFill：** Scene3D 和全视口合成需要远程中的 `` 作为其根。 3. **使用 CSS 变量而不定义它们：** `var(--color-primary)` 在裸 Remotion 项目中不会解析为任何内容。使用文字颜色。 4. **硬编码像素大小：** 使用 `useViewportRect()` 中基于 `vmin` 的大小调整。 5. **缺少字体设置：** 显式设置 `fontSize`、`fontWeight`、`fontFamily` 和 `color` — Remotion 中没有继承的默认值。 #### 三种布局模式 **简单（内容居中，使用包装默认值）：** // 依赖外部包装来实现背景、居中、字体导出 const 组件 = () => ( 你好）； **独立（自己的背景和布局）：** 导出 const 组件 = () => ( {项目} ）； **全 3D 场景（推荐用于复杂工作）：** 导出 const 组件 = () => { const rect = useViewportRect(); 返回（ <绝对填充样式={{ 背景：'#100f0f', 颜色：'#fcc192'， }}> {/* ... */} ）； }; ** ** ## Transform3D（对于复杂场景至关重要） `Transform3D` 表示使用 Three.js 内部结构的 3D 变换（位置 + 旋转 + 缩放）。按照惯例，它是不可变的——每个方法都会返回一个新实例。从“remotion-bits”导入{ Transform3D，Vector3 }； ### 创建变换 const base = Transform3D.identity(); // 原点：位置(0,0,0)，旋转(0,0,0)，比例(1,1,1) ### 链接变换每个方法都会返回一个新的 Transform3D。自由链接： const cardPosition = 基数 .translate(vmin * 50, vmin * -20, 0) // 向右和向上移动 .rotateY(-15) // 绕Y轴旋转（度） .scaleBy(1.5); //统一缩放1.5倍 ### 可用方法 // 位置 transform.translate(x, y, z) // 添加到位置 transform.translate(vector3) // 将 Vector3 添加到位置 // 旋转（角度） transform.rotateX(degs) // 绕X轴旋转 transform.rotateY( Degrees ) // 绕Y轴旋转 transform.rotateZ(degs) // 绕Z轴旋转 transform.rotateAround(origin, axis, Degrees) // 绕任意点+轴旋转 // 缩放 transform.scaleBy(uniform) // 均匀缩放所有轴 transform.scaleBy(sx, sy, sz) // 每轴缩放 // 组成 transform.multiply(other) // 矩阵乘法 Transform.inverse() // 逆变换 transform.lerp(target, alpha) // 线性插值 (0-1) Transform.clone() // 深拷贝 // 随机化（通过种子确定）变换.randomTranslate([minX, maxX], [minY, maxY], [minZ, maxZ], 种子) Transform.randomRotateX([minDeg, maxDeg], 种子) 变换.randomRotateY([minDeg, maxDeg], 种子) 变换.randomRotateZ([minDeg, maxDeg], 种子) // 转换 Transform.toProps() // → { x, y, z, 旋转X, 旋转Y, 旋转Z, 缩放X, 缩放Y, 缩放Z, 旋转顺序 } transform.toCSSMatrix3D() // → "matrix3d(...)" CSS 字符串 transform.toMatrix4() // → Three.js Matrix4 ### 将 Transform3D 与 Step/Element3D 结合使用 `.toProps()` 方法将 Transform3D 转换为 Step 和 Element3D 接受的 props： const 位置 = base.translate(vmin * 50, 0, 0).rotateY(-15); // 直接传播到 Step 或 Element3D 中 <步骤 id="my-step" {...position.toProps()} /> 这相当于手动指定`x={...} y={...} z={...}rotateX={...}rotateY={...}rotateZ={...}`。 ### 使用 Transform3D 作为关键帧将 `Transform3D[]` 数组作为 `transform` 属性传递，以便在位置之间进行平滑的 3D 插值： const start = base.translate(0, vmin * 20, 0); const end = base.translate(0, 0, 0);

从开始到结束的动画

变换关键帧使用四元数 slerp 进行旋转（无万向节锁定）并使用线性插值进行位置和缩放。 ### 向量3 Three.js `Vector3` 被重新导出用于位置数学： const offset = new Vector3(0, -vmin * 2, 0); const farOffset = offset.clone().multiplyScalar(4.0); // 缩放偏移量 const 组合 = offset.clone().add(new Vector3(vmin * 5, 0, 0)); ** ** ## Scene3D 系统（3D 演示） Scene3D 创建基于相机的 3D 演示（如 impress.js）。镜头在台阶之间飞行；内容放置在 3D 空间中。 ### 架构 Scene3D（透视、计时） ├── 步骤（摄像机目标 1）- 在此步骤中儿童可见 ├── 步骤（摄像机目标 2）- 在此步骤中儿童可见 ├── ... ├── StepResponsive — 每一步动画效果不同的元素 ├── StepResponsive — 另一个步进感知元素 └──（任何其他子项 — 始终呈现） ### Scene3D 容器 <场景3D Perspective={1000} // CSS 透视（以 px 为单位）（深度效果） stepDuration={60} // 每步默认帧数 transitionDuration={60} // 步骤之间相机转换的帧 easing="easeInOutCubic" // 相机过渡缓动 > {/* 步骤和内容 */} ### 步骤（相机目标）步骤定义相机飞向的位置。他们按顺序执行。当步骤处于活动状态时，步骤内的内容可见。 <步骤 id="intro" // 唯一标识符（由 StepResponsive 使用） {...position.toProps()} // 相机目标位置/旋转/缩放 uration={120} // 覆盖此步骤的stepDuration（可选） transition={{ // 在步骤 ENTRY 上为子级设置动画（可选）不透明度: [0, 1], 模糊: [10, 0], 持续时间：20， }} exitTransition={{ // 在退出步骤上为子级设置动画（可选）不透明度: [1, 0], 模糊: [0, 10], }} > {/* 此步骤中显示的内容 */} <浮动卡>... **步进计时模型：** * 步骤按顺序播放：步骤 1 → 过渡 → 步骤 2 → 过渡 → 步骤 3 * `stepDuration`（在 Scene3D 上）：每个步骤处于活动状态的默认持续时间 * `duration`（在步骤上）：覆盖特定步骤 * `transitionDuration`（在 Scene3D 上）：相机在步骤之间移动所需的时间 * 总成分应≥所有步骤持续时间的总和 ### Element3D（3D 定位内容）将内容放置在特定的 3D 位置，独立于相机：

位于 3D 空间中的内容

### StepResponsive（步进感知动画）复杂场景的关键。元素定义它们在每个步骤中的外观/位置，以及当相机移动时在状态之间的动画： <步骤响应式 centered // 使子元素居中样式={{位置：'绝对'，字体大小}} 步骤={{ // Key = 步骤 ID，Value = 该步骤的属性 '简介'：{ 变换：[base，shiftedPosition]，//Transform3D关键帧不透明度: [0, 1], }, '元素'：{ transform: [elementPosition], // 保持在这个位置 }, '结尾'：{ 变换：[outroStart，outroEnd]， opacity: [1, 1, 1, 0], // 保持可见，然后淡出 period: "step", // 匹配步骤持续时间缓动：“easeInOutCubic”， }, }} >

跟随相机的标题

**StepResponsive关键行为：** * 属性 **累积/继承** ：如果步骤“元素”未设置不透明度，它将保留设置它的最后一步的值 * 进入下一步时，数组会展平至其最终值（不会对过去的关键帧重新设置动画） * `transform` 接受 `Transform3D[]` 数组——在 3D 中定位元素的主要方式 * `duration: "step"` 使动画持续整个步骤持续时间 * 您可以将相同的道具映射到多个步骤 ID 以跨步骤保持位置 **将相同的道具映射到多个步骤**（常见模式）： const mapToAllElementSteps = (props) => ({ “元素”：道具， '元素粒子'：道具， '元素文本'：道具， '元素代码'：道具， }); <步骤响应式步骤={{ '介绍': { 变换: [introPosition] }, ...mapToAllElementSteps({ 变换: [elementPosition] }), 'outro': { 变换: [outroPosition] }, }} >

元素

** ** ## 构建复杂场景（架构指南） **这是任何重要构图的推荐方法。** Scene3D 提供相机管理、基于步骤的计时、3D 元素定位和步骤响应动画 - 无需手动管理 `useCurrentFrame()`、`` 或 CSS 转换。\n\n### 步骤 1：规划场景结构决定主要部分（动作）以及摄像机在每个部分中显示的内容：简介 → 元素 → 元素粒子 → 元素文本 → ... → 过渡 → 场景 → 结尾每个部分=一个步骤。步骤按顺序执行。 ### 步骤 2：预先计算所有位置使用`useMemo`构建位置树。这是关键的架构模式： const 位置 = useMemo(() => { const { vmin } = 矩形； const base = Transform3D.identity(); // 定义每个场景部分的基本位置 const elementsBase = base.translate(0, -vmin * 120, 0).rotateX(15); const transitionsBase = base.translate(vmin * 200, vmin * 50, 0).rotateY(-15); const sceneBase = base.translate(-vmin * 120, vmin * 70, 0).rotateY(15); // 从基数导出子位置 const 卡W = vmin * 70; const keywordsCard = elementsBase.translate(-cardW, -vmin * 40, 0).rotateY(15); const textCard = elementsBase.translate(0, -vmin * 50, vmin * 10).rotateX(10); 返回{ 基地, 元素：{ 基础：元素基础，卡：{粒子：粒子卡，文本：文本卡}， }, 转换：{ 基础：transitionsBase }，场景：{ 基础：scenesBase }， }; }, [矩形宽度, 矩形高度]); // 调整大小时重新计算 **为什么要预先计算位置？** * 布局与渲染分离 * 职位可以相互派生（层次结构） * 通过更换底座即可轻松调整整个部分 * StepResponsive需要位置引用，而不是内联计算 ### 步骤 3：定义步骤 <步骤 id="elements" {...positions.elements.base.toProps()} /> <步骤 id="元素粒子" {...positions.elements.cards.articles.toProps()} 过渡={{ 不透明度: [0, 1], 模糊: [10, 0] }} > <步骤 id="transitions" 持续时间={120} {...positions.transitions.base.toProps()} /> <步骤 id="scenes" 持续时间={120} {...positions.scenes.base.toProps()} /> ### 步骤 4：添加步进响应元素随相机移动的标题、图标和持久元素： <步骤响应式居中样式={{ fontSize: vmin * 10, 位置: '绝对' }} 步骤={{ '介绍': { 变换: [positions.base, Positions.base.translate(vmin * 7, 0, 0)] }, 'elements': { 变换: [positions.elements.base.translate(vmin * 7, 0, 0)] }, '结尾'：{ 变换: [positions.base.translate(vmin * 7, 0, 0), Positions.base], 持续时间：“步骤”，缓动：“easeInOutCubic”， }, }} >

远程位

### 步骤 5：步骤内的内容步骤可以包含丰富的内容——卡片、粒子、代码块、计数器： <步骤 id="element-articles" {...cardPos.toProps()} 过渡={{ 不透明度: [0, 1], 模糊: [10, 0] }}> <浮动卡> <粒子样式={{位置：'绝对'，插入：0，不透明度：0.6}}> <生成器速率={1} 最大={200} 寿命={80} 速度={{ x: 0, y: -0.6, 方差X: 0.4, 方差Y: 0.2 }} 区域={{宽度：矩形宽度，高度：矩形高度}}>

<行为阻力={0.96} 摆动={{幅度：0.6，频率：0.25}} 不透明度={[1, 0]} 比例={{ 开始: 1, 结束: 0.4 }} /> 粒子 ** ** ## 组件快速参考 ### 动画文本 <动画文本 style={{ fontSize: vmin * 5, fontWeight: 'bold' }} 过渡={{ split: "字符", // "无" | “词”| “性格”| “线”|自定义分隔符 splitStagger: 2, // 每个单元之间的帧数不透明度: [0, 1], y: [15, 0], 模糊: [2, 0], 持续时间：20，延迟：10，缓动：“easeOutCubic”， // 循环文本：周期：{文本：[“构建”，“创建”，“运输”]，itemDuration：40}， // 故障效果： glitch: [0.6, 0], // 毛刺强度 AnimatedValue }} > 你好世界 ### 动画计数器 <动画计数器过渡={{ value: [0, 1000], // 关键帧数 color: ['#ff0000', '#00ff00'], // 颜色过渡规模：[0.8, 1], 持续时间：30，延迟：10， }} 前缀=“$” 后缀=“+” 固定={0} style={{ fontSize: vmin * 4, fontWeight: 'bold' }} /> ### 打字机 <类型编写器 text="从 'remotion-bits' 导入 { TypeWriter };" typeSpeed={2} // 每个字符的帧数删除速度={1} PauseAfterType={60} // 删除前等待的帧数延迟={30} // 开始延迟光标=“▋” style={{ fontSize: vmin * 2, fontFamily: 'monospace', WhiteSpace: 'pre' }} /> // 循环多个文本： <类型编写器 text={["第一行","第二行","第三行"]} 删除前下一个={true} 循环={假} errorRate={0.05} // 5% 的拼写错误几率 /> ### 代码块 <代码块代码={`const x = useViewportRect();\nconsole.log(x.vmin);`} 语言=“tsx” 主题=“黑暗” 显示行号={假} 字体大小={vmin * 1.2} 填充={vmin * 1.5} 过渡={{ 持续时间：20，延迟：10， lineStagger: 2, // 行之间的帧 lineStaggerDirection: "向前", // "向前" | “反向”| “中心”| “随机” 不透明度: [0, 1], y: [8, 0], 模糊: [10, 0], }} 高亮={[{ 行数: [2, 3], 颜色: "rgba(59,130,246,0.15)", 不透明度: [0, 1] }]} focus={{ 行数: [2, 3], dimOpacity: 0.3, dimBlur: 2 }} /> ### 交错运动 <交错运动过渡={{ 不透明度: [0, 1], 规模: [0, 1], y: [20, 0], 持续时间：30，延迟：5， stagger: 3, // 每个孩子之间的帧 staggerDirection: "向前", // "向前"|"反向"|"中心"|"随机" 缓动：“easeOutCubic”，边框半径：4， }} >

子级 1

子级 2

子级 3

### 渐变过渡 <渐变过渡梯度={[ “线性梯度（0deg，#051226，#1e0541）”， “线性渐变（180deg，#a5d4dd，#5674b1）”， ]} 持续时间={90} 缓动=“easeInOut” ShortestAngle={true} // 通过最短路径插值角度 /> ### 矩阵雨 ### 滚动列 <滚动列列={[ { 图片: ["/img1.jpg", "/img2.jpg"], 速度: 100, 方向: "向上" }, { 图片: ["/img3.jpg", "/img4.jpg"], 速度: 150, 方向: "向下" }, ]} 高度={矩形.vmin * 40} 间隙={矩形.vmin * 2} /> ### 粒子系统 <粒子样式={{位置：'绝对'，插入：0}}> <产卵者 rate={2} // 每帧粒子数 max={200} // 最大存活粒子数 lifespan={100} // 框定每个粒子的生命周期 burst={50} // 在第一帧上发出 50 （可选）位置={resolvePoint(矩形，“中心”)} area={{ width: rect.width, height: 0 }} // 生成区域速度={{ x: 0, y: -2, 方差X: 1, 方差Y: 0.5 }} > {/* 多个子项 = 每个粒子随机选择 */}

<行为 gravity={{ y: 0.1 }} // 恒定力 Drag={0.96} // 空气阻力（1=无，0=立即停止） wiggle={{ 幅度: 0.6, 频率: 0.25 }} // 随机振荡 opacity={[1, 0]} // 在生命周期内淡出 scale={{ start: 1, end: 0.3, startVariance: 0.2 }} // 在生命周期内收缩 /> ** ** ## 程序内容生成对于网格、背景和数据驱动的视觉效果，请使用确定性的“random()”：从“remotion-bits”导入{随机}； const items = useMemo(() => { const 调色板 = ['#fb4934', '#b8bb26', '#fabd2f', '#83a598']; 常量结果 = []; for (令 r = 0; r < 10; r++) { for (让 c = 0; c < 20; c++) { const 种子 = `grid-${r}-${c}`; const colorIndex = Math.floor(random(seed + 'color') * Palette.length); const dist = Math.sqrt(r * r + c * c); 结果.push( ）； } } 返回结果； }, [vmin]); “随机（种子）”是确定性的——相同的种子总是返回相同的值。每个元素使用唯一的字符串种子。 ** ** ## 实用函数 ### 插值（非单调）与 Remotion 的内置不同，支持非单调输入范围：从“remotion-bits”导入{插值，缓动}； // 按住然后动画插值(帧, [0, 30, 30, 60], [0, 0, 100, 100]); // 带有缓动 interpolate(frame, [0, 60], [0, 100], { 缓动: "easeOutCubic" }); // 钳位外推 interpolate(frame, [0, 60], [0, 100], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); ### 颜色插值从“remotion-bits”导入{ interpolateColorKeyframes }； // 感知均匀 (Oklch) 颜色过渡 const color = interpolateColorKeyframes(["#ff0000", "#00ff00", "#0000ff"], 进度); ### 几何从“remotion-bits”导入{resolvePoint，createRect，Rect}；常量点=resolvePoint(矩形，“中心”); // { x: 960, y: 540 } const point2 =resolvePoint(rect, { x: "50%", y: "25%" }); // { x: 960, y: 270 } ** ** ## 位元数据格式 Bits 导出一个“元数据”对象和一个“组件”：导出常量元数据 = { 名称：“MyBit”，描述：“位的描述。”，标签：[“标签1”，“标签2”]，持续时间: 300, // 总帧数宽度：1920，身高：1080，注册表：{ 名称：“我的位”，标题：“我的一点”，描述：“注册表描述。”，类型：“bit”作为常量，添加：“当需要时”作为 const，注册表依赖项：[“动画文本”，“场景3d”，“使用视口矩形”]，依赖项：[]，文件：[{路径：“path/to/MyBit.tsx”}]， }, }; 导出 const 组件：React.FC = () => { /* ... */ }; ** ** ## 常见模式 ### 浮动卡容器 const FloatingCard = ({ 子对象 }) => ( {孩子}

）； ### 每步具有入口动画的场景 <步骤 id="粒子演示" {...cardPosition.toProps()} 过渡={{ 不透明度: [0, 1], 模糊: [10, 0] }}> <浮动卡> {/* 相机到达时显示内容 */} ### 步进响应式标题跟踪摄像头 <步骤响应式居中样式={{ fontSize: vmin * 10, 位置: '绝对', 宽度: '最大内容' }} 步骤={{ '介绍': { 变换: [startPos] }, '主要'：{ 变换：[mainPos] }， 'outro': { 变换: [mainPos, endPos], 持续时间: "step", 缓动: "easeInOutCubic" }, }} >

部分标题

### 带有波形计时的动画网格 const dist = Math.sqrt(Math.pow(r - centerRow, 2) + Math.pow(c - centerCol, 2)); 常量延迟 = 30 + 距离 * 2； // 从中心向外波纹

### 步骤上的退出转换 <步骤 id="transitions" 持续时间={120} {...pos.toProps()} exitTransition={{ 模糊: [0, 10], 不透明度: [1, 0] }}> {/* 当相机离开时内容会模糊 */} ### 带有变换关键帧的 Element3D

向上滑动到位

** ** ## 参考文档有关详尽的 API 详细信息： * [references/components.md]() \- 完整的组件属性表 * [references/utilities.md]() \- 所有实用函数 * [references/patterns.md]() \- 更多动画配方和示例

远程位

包含技能