remocn一次性讲透27种Remotion场景转场：从硬切到Shader擦除-开发者社区

【免费下载链接】remocn

Production-ready animations, transitions, backgrounds, and scenes for Remotion

项目地址：https://gitcode.com/gh_mirrors/re/remocn

remocn 是一个面向 Remotion 的复制粘贴式动效组件库，它的 Transitions 目录一次性给出 27 个条目：26 个开箱即用的场景转场组件 + 1 个总览页，覆盖相机运动、Shader 擦除、风格化、像素级 Canvas 转场和场景编排五大类。本文带你快速看完全部 27 种 Remotion 场景转场，新手也能一眼挑出适合视频的转场。

转场在 Remotion 里是怎么工作的

remocn 的转场组件绝大多数是@remotion/transitions的presentation（转场呈现）：把它塞进两个<Sequence>之间的<TransitionSeries.Transition>，用linearTiming或springTiming控制节奏即可，一行示例：

<TransitionSeries.Transition timing={linearTiming({ durationInFrames: 26 })} presentation={whipPan()} />

安装方式和其他组件一致，一条命令把代码复制进你的项目（代码归你所有，可随意改）：

npx shadcn@latest add @remocn/whip-pan

27 种 Remotion 场景转场总览

以下 26 个组件按 5 大家族分组，"推荐帧数" 来自各组件文档的默认时长（1 帧 ≈ 1/30 秒）。

相机运动：5 个纯物理感硬切

只用 CSS transform 物理效果实现，无额外依赖。

组件	效果	推荐帧数	气质
Whip Pan	镜头猛甩，运动模糊让两个场景一次飞过	26	活泼
Push Through	镜头穿过后一场景，下一场景从纵深逼近	40	高级
Focus Pull	跟焦切换：柔焦呼吸中带出新场景	46	高级
Zoom Blur	旧场景冲向观众，新场景从模糊中显形	18	干净
Lens Zoom	伪装镜头急推：桶形畸变 + 变焦模糊 + 色散 + 手持抖动	28	高级

Shader 擦除与溶解：10 个质感转场

由帧同步 Shader 驱动的纹理化、有机感转场，适合品牌片和产品发布视频。

组件	效果	推荐帧数
Shader Spiral Pass	飞入发光螺旋，穿过中心抵达下一场景	72
Shader Seam	OpenShaders 材质覆盖画面后原地溶解，露出下一场景	60
Grain Dissolve	旧场景碎成颗粒状形状，新场景从噪声中凝聚	76
Wave Wipe	颗粒波浪向上扫过，从下方揭示新场景	60
Ripple Zoom	镜头穿过颗粒涟漪环中心，新场景纵深逼近	88
Swirl Dissolve	画面扭成旋涡，再展开成下一场景	104
Dither Dissolve	抖动像素模式溶解，复古印刷质感	40
Perlin Dissolve	Perlin 噪声阈值扫过全屏完成溶解	104
Smoke Dissolve	烟环向外扩张，揭示下一场景	104
Warp Dissolve	场景熔进折叠的域扭曲场，再拉直成下一场景	76

风格化：4 个界面味转场

动效界面风格——打字擦除、图标散场、纸感翻页。

组件	效果	推荐帧数
Ascii Dissolve	场景经 ASCII 字符雨溶解进下一场景	40
Caret Wipe	打字光标扫过屏幕，擦掉旧场景	40
Icon Scatter	图标场铺满画面，在顶点藏住换场	40
Page Turn	旧场景像笔记本纸张上翻，定格动画姿态	128

Canvas 像素级：5 个真正动到像素的转场

这一类通过实验性 html-in-canvas API 把两个场景读成纹理逐帧后处理——撕裂、燃烧、粉碎因此成为可能。Chrome 149+（开启chrome://flags/#canvas-draw-element）显示真实像素效果；其他浏览器自动降级为同等剪感的 CSS 近似，预览和渲染都不会挂。

组件	效果	推荐帧数
Glitch Cut	硬切撕裂成横条切片，通道分离 + 损坏色块	12
Ember Burn	旧画面"着火"：沸腾、碳化，火花带着原像素颜色飞散	40
Particle Dissolve	画面磨成漂浮尘埃，下一场景从尘埃中重新凝聚	36
Grid Wave	波浪把画面顶起立体方块，落回时带着新场景	36
Displacement	画面切成网格错位色块，带色边滑移后归位到新场景	18

场景编排器：2 个接管整条时间线

这两个不是 presentation，而是自己接管整段场景列表：场景互不重叠、舞台连续，一整段读起来像"一次剪辑"而不是幻灯片。

组件	效果	推荐帧数
Slide Swap	把一个场景甩出画布，下一个从对面弹簧滑入，支持横/纵轴	210
Spring Settle	场景整组缩小离场，留一拍空场，下一个从上方落定	213

用法示例见 content/docs/transitions/slide-swap.mdx：传入scenes数组即可，组合时长 = 所有场景帧数之和。

该选哪个：按需求速查

⚡快节奏硬切：Glitch Cut（12 帧）、Zoom Blur（18）、Displacement（18）、Whip Pan（26）
💎高级产品片：Focus Pull、Lens Zoom、Push Through、Shader Seam
🛠技术 / 开发者向：Glitch Cut、Dither Dissolve、ASCII Dissolve、Grid Wave
🎈轻快 App 宣传：Icon Scatter、Whip Pan、Page Turn
🌫慢节奏溶解：Perlin Dissolve、Smoke Dissolve、Ripple Zoom、Grain Dissolve
📋逐句陈述式视频（不重叠）：Slide Swap / Spring Settle

每个组件文档的 frontmatter 里还写了useWhen/avoidWhen，比如 Whip Pan 建议"连续同方向甩镜不超过 3 次"，照着选不会错。

文档与源码位置

转场总览页：content/docs/transitions/index.mdx
单个组件文档（含逐帧可拖动的实时预览）：如 content/docs/transitions/whip-pan.mdx、content/docs/transitions/shader-seam.mdx
组件源码目录：registry/remocn/，例如 registry/remocn/glitch-cut
Canvas 转场共享脚手架（支持检测 + WebGL2 场景着色器 + 降级路由）：registry/remocn/canvas-presentation
项目说明：README.md

小结

remocn 把 26 种 Remotion 场景转场组织成相机运动、Shader 擦除、风格化、Canvas 像素级和场景编排五大类，全部是可直接拥有的生产级代码：每帧输出都是纯函数，无随机数陷阱，并行渲染也稳定。从 12 帧的 Glitch Cut 硬切到 104 帧的 Perlin Dissolve 慢溶，总有一种能接住你的剪辑点。