Lottie/Rive 动画播放器

Name: Lottie / Rive Player
Author: @motion_kevin

ReactLottieRive动画Player更新于 2026-08-14

使用场景： 在 Web 应用中嵌入 Lottie（After Effects）或 Rive（矢量）动画——加载态、插画、启动屏与可交互动画图标。

安装

npx skills add lottie-rive-player

克隆

git clone https://github.com/skillhub-community/lottie-rive-player.git

仓库文档

描述

统一 Lottie（After Effects 经 Bodymovin 导出的 JSON）与 Rive（可交互矢量动画）的动画播放器组件。LottiePlayer 基于 lottie-web：自动播放/循环/片段控制、悬停播放、加载/播放/失败的状态管理（带静态图兜底）与性能选项（svg/canvas 渲染器、preserveAspectRatio）。RivePlayer 基于 @rive-app/canvas：加载 .riv 文件、触发状态机输入、监听动画状态变化驱动 UI。

提供实用建议：何时选 Lottie 还是 Rive（Lottie 适合丰富 AE 导出，Rive 适合可交互/状态驱动或文件极小）、如何精简动画文件（经播放器或预处理移除未用图层）、接近视口时才懒加载动画，以及减少动态处理（播放静态帧而非动画）。附带共享 PlayerShell，给两个播放器一致的 API 与深浅色主题感知。

AI Hub

跑 Skill 需要模型接口？

AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。

打开 AI Hub

元数据

作者@motion_kevin

许可证MIT

版本1.0.0

依赖0