transitions

## 全屏转场 使用 `` 在多个场景或片段之间进行动画过渡。 这将对子元素进行绝对定位。 ## 前置条件 首先，需要安装 @remotion/transitions 包。 如果尚未安装，请使用以下命令： bash npx remotion add @remotion/transitions # 如果项目使用 npm bunx remotion add @remotion/transitions # 如果项目使用 bun yarn remotion add @remotion/transitions # 如果项目使用 yarn pnpm exec remotion add @remotion/transitions # 如果项目使用 pnpm ## 使用示例 tsx import {TransitionSeries, linearTiming} from '@remotion/transitions'; import {fade} from '@remotion/transitions/fade'; ; ## 可用的转场类型 从各自的模块导入转场效果： tsx import {fade} from '@remotion/transitions/fade'; import {slide} from '@remotion/transitions/slide'; import {wipe} from '@remotion/transitions/wipe'; import {flip} from '@remotion/transitions/flip'; import {clockWipe} from '@remotion/transitions/clock-wipe'; ## 带方向的滑动转场 为进入/退出动画指定滑动方向。 tsx import {slide} from '@remotion/transitions/slide'; ; 方向：`"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"` ## 时间选项 tsx import {linearTiming, springTiming} from '@remotion/transitions'; // 线性时间 - 恒定速度 linearTiming({durationInFrames: 20}); // 弹簧时间 - 有机运动 springTiming({config: {damping: 200}, durationInFrames: 25}); ## 时长计算 转场会重叠相邻的场景，因此总合成长度比所有序列时长的总和要**短**。 例如，两个 60 帧的序列和一个 15 帧的转场： - 不带转场：`60 + 60 = 120` 帧 - 带转场：`60 + 60 - 15 = 105` 帧 转场时长被减去，因为两个场景在转场期间同时播放。 ### 获取转场时长 在...上使用 `getDurationInFrames()` 方法