# Remotion 界面组件与流程动画模板

14 个免费 Remotion 界面动画模板：组合框、命令菜单、轻提示、滑块、标签页，以及完整的注册、结账和设置流程。可编辑或获取代码。

Canonical URL: https://www.subclip.app/zh/motion-graphics-templates/remotion/ui-animations

这些 Remotion 模板为界面中的各个部分添加动画：组合框展开、命令菜单过滤、点击后滑入的轻提示、被拖动的滑块。其中几个是完整流程，由光标填写注册表单或完成结账。它们适合需要展示应用运行效果、又不想真的录屏的产品演示和 SaaS 发布视频。

## 组件与流程

每个组件模板演示一种交互：Combobox 输入查询并选择结果，Command Menu 过滤命令列表，Context Menu 通过右键打开，Tabs 切换面板，Slider 拖动数值，Stepper 逐步推进，Resizable 拖动分隔手柄，Skeleton 变为加载完成的内容，Toast 确认操作，Typing Indicator 展示三个圆点的脉动。Search Reveal 用辅助圆构建出搜索栏。

流程模板把这些串联起来：Signup Flow 填写所有字段并提交，Checkout Flow 选择方案并输入卡片信息，Settings Toggle Flow 打开开关、选择主题并保存。

## 编辑界面

每个模板都是一个 TSX 组件，标签、数值和时间都写在简单的 props 和数组中，您可以把文案改成与自己的产品一致。可以在 Subclip 中与录屏一起编辑，也可以把代码复制到您自己的 Remotion 项目中。

## 14 个模板

- [Search Reveal](https://www.subclip.app/zh/motion-graphics-templates/remotion/search-reveal) (Remotion, 界面): 细细的辅助圆扩展并吸附成搜索栏，文字自动输入，随后一块多彩的图形面板在其后方展开。
- [Combobox](https://www.subclip.app/zh/motion-graphics-templates/remotion/combobox) (Remotion, 界面): 可搜索的选择组件，带占位文本触发器、展开的选项面板和高亮行，适合界面演示视频。
- [Command Menu](https://www.subclip.app/zh/motion-graphics-templates/remotion/command-menu) (Remotion, 界面): 带搜索框和快捷键命令列表的键盘命令面板，在变暗的背景上以展开状态显示。
- [Context Menu](https://www.subclip.app/zh/motion-graphics-templates/remotion/context-menu) (Remotion, 界面): 带四个操作和一个悬停行的右键菜单面板，可直接放在界面演示中的光标位置。
- [Resizable](https://www.subclip.app/zh/motion-graphics-templates/remotion/resizable) (Remotion, 界面): 带分隔手柄的双面板布局，可为界面演示视频设置分栏比例和手柄状态。
- [Skeleton](https://www.subclip.app/zh/motion-graphics-templates/remotion/skeleton) (Remotion, 界面): 一张骨架屏加载卡片，一道光泽扫过圆形头像和两行文字。
- [Slider](https://www.subclip.app/zh/motion-graphics-templates/remotion/slider) (Remotion, 界面): 简洁的范围滑块，可设置填充数值和滑钮状态，当前数值显示在滑钮上方。
- [Stepper](https://www.subclip.app/zh/motion-graphics-templates/remotion/stepper) (Remotion, 界面): 带三个带标签步骤的横向引导步骤条，可设置当前步骤来展示进度。
- [Tabs](https://www.subclip.app/zh/motion-graphics-templates/remotion/tabs) (Remotion, 界面): 带胶囊或下划线指示器的标签页组件，激活的标签下方有一小段面板文字。
- [Toast](https://www.subclip.app/zh/motion-graphics-templates/remotion/toast) (Remotion, 界面): 带图标、标题和一行说明的小型通知卡片，有默认和成功两种样式，适合应用演示视频。
- [Typing Indicator](https://www.subclip.app/zh/motion-graphics-templates/remotion/typing-indicator) (Remotion, 界面): 一排小圆点依次以平滑的波浪跳动，就像聊天应用中的正在输入提示。
- [Signup Flow](https://www.subclip.app/zh/motion-graphics-templates/remotion/signup-flow) (Remotion, 界面): shadcn 风格的注册卡片，光标填写姓名、邮箱和密码，提交时显示加载状态，并收到成功提示。
- [Checkout Flow](https://www.subclip.app/zh/motion-graphics-templates/remotion/checkout-flow) (Remotion, 界面): 带计费周期切换、卡号输入和条款复选框的结账卡片，由光标填写并付款，最后显示成功提示。
- [Settings Toggle Flow](https://www.subclip.app/zh/motion-graphics-templates/remotion/settings-toggle-flow) (Remotion, 界面): 双栏设置卡片，光标开启通知、选择主题、拖动滑块并保存。