第三方集成
Remotion 中的所有动画必须由 useCurrentFrame() 钩子返回的值驱动。如果你想在 Remotion 中使用其他方式的动画,你需要一个支持与 Remotion 同步时间的集成方案。
🌐 All animations in Remotion must be driven by the value returned by the useCurrentFrame() hook. If you would like to use another way of animations in Remotion, you need an integration that supports synchronizing the timing with Remotion.
在此页面上,我们维护了一个针对网络上流行动画方式的集成列表,并提供热门请求的状态。
🌐 On this page, we maintain a list of integrations for popular ways of animating on the web, and provide status for popular requests.
后效应
🌐 After Effects
参见:Lottie - 从 After Effects 导入
🌐 See: Lottie - Import from After Effects
Anime.JS
请参阅此仓库以获取示例。
🌐 See this repository for an example.
阅读这篇文章,了解一位开发者如何将 Anime.js 与 Remotion 集成并提高他们的效率。
🌐 Read this article how one developer integrated Anime.js with Remotion and boosted their efficiency.
CSS 动画
🌐 CSS animations
你可以使用 animation-play-state 和 animation-delay CSS 属性将动画与 Remotions 时间同步。
🌐 You can synchronize animations with Remotions time using the animation-play-state and animation-delay CSS properties.
请参见此处示例。
🌐 See an example here.
Framer 动画
🌐 Framer Motion
目前,我们还没有 Framer Motion 集成,但正在 GitHub Issues 上讨论此事。
🌐 At the moment, we don't have a Framer Motion integration, but are discussing the matter on GitHub Issues.
动图
🌐 GIFs
使用 @remotion/gif 包。
🌐 Use the @remotion/gif package.
GreenSock
参见:如何将 GreenSock 与 Remotion 集成
🌐 See: How to integrate GreenSock with Remotion
洛蒂
🌐 Lottie
使用 @remotion/lottie 包。
🌐 Use the @remotion/lottie package.
Matter.js
没有可用的集成,但有两个示例说明如何将 Matter.js “嵌入”到时间轴中,以便稍后与 Remotion 同步:
🌐 There is no integration available, but there are two examples of how you can "bake" the Matter.js into a timeline in order to synchronize it later with Remotion:
React Native Skia
使用 @remotion/skia 包。
🌐 Use the @remotion/skia package.
react-spring
没有直接的兼容性,但 Remotion 提供了它自己的 spring() 作为替代。
🌐 There is no direct compatibility but Remotion provides it's own spring() instead.
复活的
🌐 Reanimated
目前没有可用的整合,但 Remotion 与 Reanimated 共享一些代码,尤其是 interpolate()、spring() 和 Easing。这使得从 Reanimated 重新构建已有动画更加容易。
🌐 There is no integration available but Remotion shares some code with Reanimated, in particular interpolate(), spring() and Easing. This makes it easier to refactor already existing animation from Reanimated.
裂开
🌐 Rive
使用 @remotion/rive 包。
🌐 Use the @remotion/rive package.
TailwindCSS
参见:TailwindCSS
🌐 See: TailwindCSS
Three.JS
使用 @remotion/three 包。
🌐 Use the @remotion/three package.
Vidstack
🌐 Use the Remotion Provider for Vidstack.
其他库
🌐 Other libraries
你是否有兴趣在 Remotion 中使用其他库?你可以提交 GitHub 问题进行咨询。虽然我们无法保证提供帮助,但你可以注册兴趣并启动讨论。
🌐 Are you interested in using other libraries with Remotion? You can file a GitHub issue to inquire it. While we cannot guarantee to help, you can register interest and kick off the discussion.