音视频AI 应用前端【免费下载链接】remotion Make videos programmatically with React项目地址https://gitcode.com/GitHub_Trending/re/remotion点击查看免费下载remotion/rive是 Remotion 官方提供的 Rive 动画集成包它导出一个RemotionRiveCanvas组件用于在 React 编写的视频中渲染 Rive与仓库内官方文档packages/docs/docs/rive/index.mdx、packages/docs/docs/rive/remotionrivecanvas.mdx结合源码实现完整讲解安装、全部 Props、Ref 运行时访问、effects 效果链与底层渲染原理读完即可在你的 Remotion 项目里直接接入.riv动画并完成裁剪、滤镜、动态文本等进阶操作。包概览在 Remotion 视频中嵌入 Rive 动画Rive 是一种矢量动画格式支持状态机、骨骼动画与可交互的 Artboard画板。remotion/rive把 Rive 官方 WASM 运行时rive-app/canvas-advanced封装进 Remotion 的渲染管线组件内部创建一个与视频尺寸一致的canvas每个渲染帧都调用 Rive 运行时的advance()推进动画从而保证Rive 动画与 Remotion 的useCurrentFrame()时间完全同步逐帧精确可以直接在 Remotion Studio、Player 与最终视频渲染含服务端渲染中使用通过effects属性把remotion/effects的滤镜模糊、波浪、色调、半调等叠加到动画画布上。包本身只对外导出两个核心符号见 packages/rive/src/index.tsRemotionRiveCanvas—— 渲染组件RiveCanvasRef—— 组件 ref 的类型用于在运行时访问 Rive 实例。当前仓库中该包的版本为4.0.534见 packages/rive/package.json内部依赖rive-app/canvas-advanced2.31.5 与remotion本体。安装版本对齐是 Remotion 生态的硬性要求按 packages/rive/README.md 的说明安装npm install remotion/rive --save-exact安装时必须遵循 Remotion 包的版本对齐规则所有remotion与remotion/*包必须使用相同版本号否则可能因内部协议不一致导致运行异常安装时移除版本号前的^使用--save-exact锁定精确版本README 中明确提示“Remove the^character from the version number to use the exact version”React 与 react-dom 需满足 18.2.0见 packages/rive/package.json 的 peerDependencies。快速上手一个最小可运行示例官方文档packages/docs/docs/rive/remotionrivecanvas.mdx给出的最小用法只有一个src属性import React from react; import {RemotionRiveCanvas} from remotion/rive; function App() { return RemotionRiveCanvas srchttps://example.com/myAnimation.riv /; }src接受一个合法的.riv文件 URL两种来源均可远程 URL例如https://cdn.rive.app/animations/vehicles.riv本地文件通过 Remotion 的staticFile()加载 public 目录下的资源staticFile()自 v4.0 起会自动做 URI 编码无需手动encodeURIComponent见 packages/docs/docs/staticfile.mdx。仓库自带的示例 packages/example/src/Rive/RiveExample.tsx 展示了实际用法——把组件放进AbsoluteFill并使用useVideoConfig()的宽高作为容器尺寸import {RemotionRiveCanvas} from remotion/rive; import {AbsoluteFill, useVideoConfig} from remotion; const RiveVehicle () { const {height, width} useVideoConfig(); return ( AbsoluteFill style{{height, width}} RemotionRiveCanvas srchttps://cdn.rive.app/animations/vehicles.riv / /AbsoluteFill ); };Props 详解从 src 到裁剪的完整参数表以下 Props 定义均可在源码 packages/rive/src/RemotionRiveCanvas.tsx 的RemotionRiveCanvasOwnProps类型与仓库内官方文档中逐条核对。Prop类型默认值说明srcstring必填.riv文件 URL可为远程地址或staticFile()本地路径fit枚举contain画板在画布内的缩放方式7 种取值见下文alignment枚举center画板在画布内的对齐方式9 种取值见下文artboardstring \| number默认画板按名称字符串或索引数字选择 Artboardanimationstring \| number默认动画按名称字符串或索引数字选择动画缺省取索引 0onLoad(file: File) voidnullRive 运行时加载完成后的回调参数为 RiveFile对象v4.0.58 起enableRiveAssetCdnbooleantrue是否启用 Rive 资源 CDNv4.0.181 起assetLoader(asset, bytes) boolean无自定义资源加载器用于图片/字体等外链资源v4.0.181 起effectsEffectsProp[]动画绘制后叠加的remotion/effects效果链v4.0.464 起classNamestring无应用到底层canvas的类名v4.0.464 起styleCSSProperties无应用到底层canvas的内联样式v4.0.464 起cropLeft / cropRight / cropTop / cropBottomnumber无按0~1比例裁剪画布四边v4.0.500 起artboard 与 animation 的选择逻辑从源码 packages/rive/src/RemotionRiveCanvas.tsx 可以看到具体优先级artboard为字符串时用file.artboardByName(name)为数字时用file.artboardByIndex(index)缺省时用file.defaultArtboard()animation为数字时用artboard.animationByIndex(index)为字符串时用artboard.animationByName(name)缺省时取artboard.animationByIndex(0)。fit 与 alignment7 9 种取值对照这两个枚举的底层映射实现在 packages/rive/src/map-enums.ts它们把字符串逐一映射为 Rive 运行时rive-app/canvas-advanced的Fit与Alignment常量fit取值contain、cover、fill、fit-height、none、scale-down、fit-width分别对应 Rive 的Fit.contain / cover / fill / fitHeight / none / scaleDown / fitWidth。alignment取值center、bottom-center、bottom-left、bottom-right、center-left、center-right、top-center、top-left、top-right分别对应 Rive 的 9 个对齐常量如Alignment.center、Alignment.bottomLeft。传入非法字符串时映射函数会抛出Invalid fit:/Invalid alignment:错误见 map-enums.ts 与 map-enums.ts因此 TypeScript 类型会在编译期拦截非法取值。继承自Sequence的属性与 Remotion 其他画布类组件一致RemotionRiveCanvas还继承Sequence的常用属性官方文档“Inherited props”一节均自 v4.0.464 起可用from、durationInFrames、trimBeforev4.0.482 起、playbackRate、name、showInTimeline、hiddenv4.0.528 起新增premountFor、postmountFor、styleWhilePremounted、styleWhilePostmounted用于动画组件的预挂载/后挂载优化。这些属性在源码中通过内部的FreezeSequence包装生效见 RemotionRiveCanvas.tsxusePremounting计算冻结帧与预挂载样式trimBefore、playbackRate、loop、freeze等交给Sequence处理。测试 packages/rive/src/test/RemotionRiveCanvas.test.ts 还专门验证了裁剪属性cropLeft等在交互 schema 中位于边框属性之后。effects给 Rive 动画叠加滤镜效果链自 v4.0.464 起RemotionRiveCanvas支持effects属性在 Rive 动画绘制到画布之后追加一层remotion/effects效果链。官方文档packages/docs/docs/effects/index.mdx明确将RemotionRiveCanvas列为支持effects的组件之一。仓库示例 packages/example/src/Rive/RiveEffects.tsx 提供了完整的“效果试验台”composition idrive-effects-testbed展示了三种典型玩法import {blur} from remotion/effects/blur; import {wave} from remotion/effects/wave; import {tint} from remotion/effects/tint; import {RemotionRiveCanvas} from remotion/rive; // 1. 动态模糊按帧脉动模糊半径 0→18px const t (frame / fps) * Math.PI * 2 * 0.35; const blurRadius 9 9 * Math.sin(t); RemotionRiveCanvas src{RIVE_SRC} effects{[blur({radius: blurRadius})]} /; // 2. 波浪扭曲相位随帧变化 RemotionRiveCanvas src{RIVE_SRC} effects{[ wave({phase: frame * 0.2, amplitude: 22, wavelength: 180}), ]} /; // 3. 多效果叠加成链tint → wave → blur RemotionRiveCanvas src{RIVE_SRC} effects{[ tint({color: #ff5fa2, amount: 0.4}), wave({phase, amplitude: 12, wavelength: 160}), blur({radius: 6}), ]} /;effects的类型为ReadonlyArrayEffectDescriptorunknownEffectsProp定义于 packages/core/src/effects/effect-types.ts。效果链在内部每帧通过runEffectChain执行先由useMemoizedEffects结合controls?.overrideId与videoConfigValues记忆化效果参数再在sourceCanvasRive 绘制目标与outputCanvas可见输出之间运行整条链期间用delayRender/continueRender保证渲染不提前结束见 RemotionRiveCanvas.tsx。Ref 与运行时访问操作 Artboard、动画与画板自 v4.0.180 起可以通过 ref 直接访问 Rive 运行时实例。RiveCanvasRef类型见 RemotionRiveCanvas.tsx暴露四个方法方法返回类型用途getAnimationInstance()LinearAnimationInstance \| null当前线性动画实例getArtboard()Artboard \| null当前画板getRenderer()CanvasRenderer \| nullCanvas 渲染器getCanvas()RiveCanvas \| nullRive 运行时全局对象这些方法通过useImperativeHandle实现源码 RemotionRiveCanvas.tsx返回值在资源加载完成前为null因此官方文档建议在useEffect中判空后访问import React from react; import {RemotionRiveCanvas, RiveCanvasRef} from remotion/rive; import {useEffect} from react; const MyComp: React.FC () { const canvasRef React.useRefRiveCanvasRef(null); useEffect(() { if (!canvasRef.current) { return; } canvasRef.current.getAnimationInstance(); // LinearAnimationInstance canvasRef.current.getArtboard(); // Artboard canvasRef.current.getRenderer(); // CanvasRenderer canvasRef.current.getCanvas(); // RiveCanvas }, [canvasRef]); return ( RemotionRiveCanvas srchttps://example.com/myAnimation.riv ref{canvasRef} / ); };实战运行时设置文本Set Text Runref 与onLoad配合可以实现“动画加载后动态改文本”。官方文档给出的示例假设 Rive 动画中有一个名为city的文本 runimport {RemotionRiveCanvas} from remotion/rive; import {File} from rive-app/canvas-advanced; import {useCallback} from react; // 必须用 useCallback 包装 onLoad避免组件每帧重渲染 const onLoadHandler useCallback((file: File) { const artboard file.defaultArtboard(); const textRun artboard.textRun(city); textRun.text Tokyo; }, []); function App() { return ( RemotionRiveCanvas srchttps://example.com/myAnimation.riv onLoad{onLoadHandler} / ); }两点注意onLoad回调v4.0.58 起参数是 RiveFile对象回调必须用useCallback记忆化否则每次渲染都会生成新引用触发组件不必要的重新渲染。自定义资源加载assetLoader当.riv文件引用了外部图片、字体或音频资源时可用assetLoaderv4.0.181 起自定义加载行为。官方文档给出了完整示例通过asset.cdnUuid与bytes.length判断资源是否已内嵌或可由 CDN 处理对图片资源则fetch远程数据后用decodeImage解码再(asset as ImageAsset).setRenderImage(image)注入运行时最后image.unref()释放引用。同样要求用useCallback记忆化assetLoader。与之配套的enableRiveAssetCdn默认true控制是否启用 Rive 资源 CDN。底层渲染原理组件如何与 Remotion 帧同步结合源码 packages/rive/src/RemotionRiveCanvas.tsx可以还原组件完整的运行机制1. 双画布 效果链管线组件创建两个画布——离屏sourceCanvasRive 实际绘制目标与可见outputCanvas渲染到 DOM 的那个canvas。Rive 先画到 source效果链再从 source 合成到 output。源码注释明确写道“Rive draws to this offscreen-style canvas; the effect chain then composites from here onto the visible output canvas”RemotionRiveCanvas.tsx。2. 按帧推进动画核心渲染 effect 里用frame与lastFrame计算帧差diff然后const diff frame - lastFrame.current; rive.renderer.clear(); rive.animation.advance(diff / fps); rive.animation.apply(1); rive.artboard.advance(diff / fps);即以“帧差 / fps”为时间增量推进 Rive 动画与画板实现与 Remotion 时间轴的严格同步RemotionRiveCanvas.tsx。3. 同步冲刷像素绘制完成后调用riveCanvasInstance.resolveAnimationFrame()强制刷新渲染器的排队绘制调用确保效果链读到的是已绘制的像素。源码注释说明刻意不用requestAnimationFrame其会在自身回调末尾才隐式冲刷否则挂载后第一帧与每次属性变化后的首帧都会把空画布合成到输出RemotionRiveCanvas.tsx。4. 渲染阻塞保证WASM 运行时初始化、.riv文件加载、效果链执行都通过useDelayRender()的delayRender/continueRender挂起 Remotion 渲染确保未就绪时不会提前出帧RemotionRiveCanvas.tsx。WASM 文件由源码中的locateFile配置从公共 CDN 加载。5. 交互式 Schema组件经Interactive.withSchema包装riveCanvasSchema合并了 Remotion 内部的基础、预挂载、transform、背景、边框、圆角与裁剪 schemaRemotionRiveCanvas.tsx因此裁剪、预挂载等属性都能在 Remotion Studio 中以可视化控件形式呈现。6. 渲染环境约束sourceCanvas的创建依赖document.createElement(canvas)源码在typeof document undefined时直接返回nullRemotionRiveCanvas.tsx说明组件面向浏览器/客户端渲染环境仓库内官方文档也提供了浏览器与渲染环境的兼容性说明具体支持矩阵以 packages/docs/docs/rive/remotionrivecanvas.mdx 的 Compatibility 一节为准。总结remotion/rive是 Remotion 生态中接入 Rive 矢量动画的官方通道核心价值在于三点时间同步Rive 动画逐帧跟随 Remotion 时间轴适合精确控制动画节奏的视频合成可编程通过artboard/animation/ ref /onLoad可在运行时切换画板、选择动画、改写文本可滤镜化effects属性让 Rive 画布无缝接入remotion/effects效果链实现动态模糊、波浪、色调等后期处理。安装时牢记“所有 Remotion 包版本对齐 --save-exact”这一铁律即可在 Studio 中预览、用 Player 播放、并渲染出带 Rive 动画的最终视频。更完整的 API 说明可继续查阅仓库内的 remotion/rive 官方文档 与RemotionRiveCanvas文档源码细节见 packages/rive/src效果组合参考示例 packages/example/src/Rive/RiveEffects.tsx。赞分享音视频AI 应用前端【免费下载链接】remotion Make videos programmatically with React项目地址https://gitcode.com/GitHub_Trending/re/remotion点击查看免费下载相关推荐Flet Rive 动画控件指南在 Python 应用中渲染与交互 Rive 动画Flet Rive 动画控件指南在 Python 应用中渲染与交互 Rive 动画 本篇技术指南围绕 Flet 官方扩展包 flet rive 展开讲解如何前端跨平台桌面应用移动开发WatchYourLAN 快速部署局域网 IP 扫描监控完整指南WatchYourLAN 快速部署局域网 IP 扫描监控完整指南 WatchYourLAN 是一个用 Go 写的轻量级局域网 IP 扫描器。它定期扫描本地网络运维网络在 Remotion 中嵌入与驱动 Lottie 动画remotion/lottie 完整实战指南在 Remotion 中嵌入与驱动 Lottie 动画remotion/lottie 完整实战指南 本文基于仓库内 remotion markup 技能文档音视频AI 应用前端上一篇GR00T N1.7训练技巧如何优化视觉、语言和本体感知多模态融合下一篇Context Engineering实战AI Agent中的上下文优化策略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考