用途:rendiv 是 React/TypeScript 程序化视频框架,用 React 组件描述画面,由帧号驱动动画。它没有时间线状态机,也没有命令式关键帧 API,而是把视频当作帧号的纯函数。
主要能力:动画(interpolate、spring、Easing、blendColors)、合成与 Still 注册、时间编排(Sequence、Series、Loop、Freeze)、时间线覆盖与 z 序、媒体嵌入(图片、视频、音频、GIF、iframe)、GIF 播放控制、字幕与 SRT 解析及逐词高亮、渲染生命周期(holdRender、环境模式、渲染管线)、转场(TransitionSeries 含 fade、slide、wipe、flip、clockWipe)、SVG 形状与路径(解析、测量、变形、描边揭示)、程序化噪声与动效模糊、文字动画(按字符/词/行)、视觉效果与 CSS 滤镜、字体(本地与 Google Fonts)、Lottie、Three.js/R3F 3D 场景,以及 CLI、Studio、Player。
使用方式:入口调用 setRootComponent 注册根组件,用 <Composition> 声明 id、component、durationInFrames、fps、width、height;动画一律用 useFrame() 驱动。渲染示例:rendiv render src/index.tsx FadeIn out/fade-in.mp4。CLI 提供 render、still、compositions、studio 命令。
关键限制:禁用 CSS 动画与过渡,必须帧驱动;用 rendiv 媒体组件而非原生 HTML 元素;合成内容需用 <CanvasElement id="..."> 包裹且 id 与 Composition 一致;<Composition> 只注册元数据并渲染 null,实际渲染由 Player、Studio 或 Renderer 完成;setRootComponent 只能调用一次;interpolate 与 blendColors 的 inputRange 须单调非递减、两段等长且至少两个元素;<Series.Sequence> 必须是 <Series> 的直接子级;morphPath 要求路径段数与命令类型匹配。
适用场景:需要以代码精确控制帧、批量或参数化生成视频的开发者。价格、平台支持等资料暂未提供。