🎢 是 过山车 表情的动态版本。Google 设计这段循环动画的目标是传达与静态字形相同的语义,但带上表情或动作里本应有的节奏。
动画放大了 旅行 & 地点 分类的静态字形仅暗示的那个瞬间 — 笑容变宽,物体回应,动作完成。适用于动效能增加清晰度而非噪点的场景。
过山车
过山车(🎢),归属旅行 & 地点。
过山车 动画的最佳使用场景
- 落地页/功能亮点 — 用 过山车 动画替换静态 SVG 主图,无需视频即可获得动效。
- 空状态/成功/错误状态 — 搭配「完成!」「这里还没有内容」之类的文案,页面永远不会显得静止。
- 聊天反应与贴纸 — 在消息 UI 中以 64–128 px 渲染;比 GIF 轻,在任何 DPR 下都更清晰。
- 引导和提示插画 — 在解释功能时作为视觉焦点;~1.2 秒的循环与典型注意力时长吻合。
- 营销文案与社交卡片 — 嵌入博客、更新日志、产品公告,弥补静态表情的平淡感。
把 过山车 嵌入你的项目
选择匹配技术栈的代码片段。所有片段都指向 Google CDN 上同一份 Lottie JSON,无需自托管资源。
Lottie JSON URL
原始 URL。可放入任何 Lottie 兼容渲染器。
https://fonts.gstatic.com/s/e/notoemoji/latest/1f3a2/lottie.json<lottie-player> Web 组件
无需构建的 HTML。所有现代浏览器都能跑。
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f3a2/lottie.json"
background="transparent"
speed="1"
style="width: 160px; height: 160px"
loop
autoplay>
</lottie-player>HTML + lottie-web (CDN)
手动调用 loadAnimation()。完全控制循环、速度、片段。
<div id="lottie-roller-coaster-1f3a2" style="width:160px;height:160px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.getElementById("lottie-roller-coaster-1f3a2"),
renderer: "svg",
loop: true,
autoplay: true,
path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f3a2/lottie.json"
});
</script>React + lottie-react
TypeScript 组件。挂载时抓取 JSON。
import Lottie from "lottie-react";
import { useEffect, useState } from "react";
export function RollerCoaster1f3a2() {
const [data, setData] = useState<unknown>(null);
useEffect(() => {
fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1f3a2/lottie.json").then((r) => r.json()).then(setData);
}, []);
if (!data) return null;
return (
<Lottie
animationData={data}
loop
autoplay
style={{ width: 160, height: 160 }}
/>
);
}最佳实践
- 按 1× 或 2× DPR 渲染。源文件 1024 px,任何不超过 256 px 的尺寸都极其清晰。
- 首屏以下延迟加载。lottie-web 本身 ~50 KB gzipped,等播放器进入视口再实例化。
- 尊重
prefers-reduced-motion。暂停自动播放,回退到 Unicode 字符 🎢 或静态 Noto PNG。 - 在自有 CDN 缓存 JSON。Google 的 gstatic 副本已经在全球边缘,但同源代理能保持连接复用。
- 不要编辑 Lottie 文件。Google 会原地更新标准动画 — 用覆盖层或颜色滤镜来定制。
动画表情常见问题
- 过山车 Lottie 可以免费用于商业用途吗?
- 可以。Google Noto Emoji Animation 以 Apache License 2.0 发布。可在个人和商业项目中使用、修改、再分发 — 只需在打包源码时保留署名和许可证。
- 动画到底来自哪里?
- 每一帧都直接来自 Google CDN https://fonts.gstatic.com/s/e/notoemoji/latest/1f3a2/lottie.json。本站不做镜像也不修改 — 浏览器按需从 fonts.gstatic.com 抓取。Google 一旦更新动画,你的站点会自动取到新版本。
- 不用 lottie-web 也能用这份 Lottie 吗?
- 能。任何 Bodymovin 兼容的渲染器都行:lottie-web、lottie-react、Lottie iOS/Android、Skottie、dotLottie。文件是普通 Lottie JSON v5.8.1,没有厂商绑定。
资源来源
- 码点
- U+1F3A2
- 格式
- Bodymovin Lottie · 60fps · 1024×1024
- 许可证
- Apache 2.0 · Google Noto
动画来源:Google Noto Emoji Animation(Apache License 2.0)。由 Google 在 fonts.gstatic.com 托管。