# 洛蒂动画 ## 概述 Lottie 是一个用于在 Web、iOS、Android 和 React Native 上实时渲染 After Effects 动画的库。它由 Airbnb 创建，允许设计师像发送静态资源一样轻松地发送动画。使用 Bodymovin 插件将动画从 After Effects 导出为 JSON 文件，然后以最小的性能开销进行本地渲染。 **何时使用洛蒂：** * 设计师创建的需要像素完美保真度的动画 * 复杂的动画图标和微交互 * 加载动画和进度指示器 * 入门顺序和教程动画 * 营销动画和促销内容 * GIF/视频的替代品，具有更小的文件大小和可扩展性 **主要优点：** * 基于矢量（可扩展而不会造成质量损失） * 文件大小明显小于 GIF 或视频 * 可在运行时编辑（颜色、速度、分段） * 通过 After Effects 进行完全设计师控制 * 跨平台渲染一致性 * 交互式控制（播放、暂停、搜索、循环） ## 核心概念 ### Lottie 格式类型 **1\. JSON 洛蒂 (.json)** * 原始洛蒂格式 * 通过 Bodymovin 插件从 After Effects 导出 * 人类可读的 JSON 结构 * 更大的文件大小（未压缩） * 广泛支持所有平台 **2\.点洛蒂（.lottie）** * 现代压缩格式 * 包含 JSON + 资产的 ZIP 存档 * 支持一个文件中的多个动画和主题 * 文件大小更小（减少高达 90%） * 推荐用于生产用途 ### 库选项 **lottie-web**（原始库）：从“lottie-web”导入lottie；洛蒂.loadAnimation({ 容器： document.getElementById('lottie-container'), 渲染器: 'svg', // 或 'canvas', 'html' 循环：真，自动播放：正确，路径：'animation.json' //或animationData：jsonData }); **@lottiefiles/dotlottie-web** （现代，推荐）：从'@lottiefiles/dotlottie-web'导入{DotLottie}；新的多特洛蒂（{ 画布： document.getElementById('canvas'), src: '动画.lottie', 自动播放：正确，循环：真 }); **@lottiefiles/dotlottie-react** （React 集成）：从'@lottiefiles/dotlottie-react'导入{DotLottieReact}； **lottie-react** （替代 React 包装器）：从“lottie-react”导入洛蒂；从“./animation.json”导入动画数据； <洛蒂animationData={animationData}循环={true}/> ### 动画数据源 **1\. LottieFiles** (lottie.host) * 100,000+个免费动画 * 直接URL嵌入 * CDN托管 **2\.本地 JSON/dotLottie 文件** * 与应用程序捆绑在一起 * 更好的性能（无网络请求） * 版本控制友好 **3\. After Effects 导出** * 定制设计师动画 * 需要 Bodymovin 插件 * 导出设置对文件大小至关重要 ## 常见模式 ### 1\.与 dotLottie-web 的基本 HTML 集成 <头> <风格> #画布{ 宽度：400px；高度：400像素； } <正文>

<脚本类型=“模块”> 从 'https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm' 导入 { DotLottie } ；新的多特洛蒂（{ 画布： document.getElementById('canvas'), src: 'https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie', 自动播放：正确，循环：真 }); ### 2\.带有控件的 React 组件从“反应”导入反应；从'@lottiefiles/dotlottie-react'导入{DotLottieReact}； const 动画按钮 = () => { const [dotLottie, setDotLottie] = React.useState(null); const handlePlay = () => dotLottie?.play(); const handlePause = () => dotLottie?.pause(); const handleStop = () => dotLottie?.stop(); const handleSeek = (frame) => dotLottie?.setFrame(frame); 返回（

）； }; ### 3\.事件监听器和生命周期挂钩从 'react' 导入 React, { useEffect }; 从'@lottiefiles/dotlottie-react'导入{DotLottieReact}； const EventDrivenAnimation = () => { const [dotLottie, setDotLottie] = React.useState(null); 使用效果（（）=> { if (!dotLottie) 返回； const onLoad = () => console.log('动画已加载'); const onPlay = () => console.log('动画开始'); const onPause = () => console.log('动画暂停'); const onComplete = () => console.log('动画完成'); const onFrame = ({ currentFrame }) => console.log('Frame:', currentFrame); dotLottie.addEventListener('load', onLoad); dotLottie.addEventListener('播放', onPlay); dotLottie.addEventListener('暂停', onPause); dotLottie.addEventListener('完成', onComplete); dotLottie.addEventListener('frame', onFrame); 返回（）=> { dotLottie.removeEventListener('load', onLoad); dotLottie.removeEventListener('播放', onPlay); dotLottie.removeEventListener('暂停', onPause); dotLottie.removeEventListener('完成', onComplete); dotLottie.removeEventListener('frame', onFrame); }; }, [点洛蒂]); 返回（）； }; ### 4\.使用lottie-react 滚动驱动动画从“lottie-react”导入洛蒂；从'./robot.json'导入robotAnimation； const ScrollAnimation = () => { 常量交互性 = { 模式：'滚动'，行动：[ { 可见度: [0, 0.2], 类型：'停止'，帧数：[0] }, { 可见度：[0.2，0.45]，类型：'寻求'，帧数：[0, 45] }, { 可见度：[0.45，1.0]，类型：'循环'，帧数：[45, 60] } ] }; 返回（ <洛蒂动画数据={机器人动画} 样式={{高度：300}} 交互性={交互性} /> ）； }; ### 5\.悬停触发片段播放从 'lottie-react' 导入 { useLottie, useLottieInteractivity }; 从'./like-button.json'导入likeButton； const 悬停动画 = () => { const lottieObj = useLottie({ 动画数据：likeButton }); const 动画 = useLottieInteractivity({ 洛蒂Obj, 模式：'光标'，行动：[ { 位置: { x: [0, 1], y: [0, 1] }, 类型：'循环'，帧数：[45, 60] }, { 位置：{x：-1，y：-1}，类型：'停止'，帧数：[45] } ] }); return

{Animation}

; }; ### 6\.多动画和主题支持从'@lottiefiles/dotlottie-react'导入{DotLottieReact}；从 'react' 导入 React, { useState, useEffect }; const ThemedAnimation = () => { const [dotLottie, setDotLottie] = useState(null); const [动画，setAnimations] = useState([]); const [主题，setThemes] = useState([]); const [currentAnimationId, setCurrentAnimationId] = useState(''); const [currentThemeId, setCurrentThemeId] = useState(''); 使用效果（（）=> { if (!dotLottie) 返回；常量 onLoad = () => { setAnimations(dotLottie.manifest.animations || []); setThemes(dotLottie.manifest.themes || []); setCurrentAnimationId(dotLottie.activeAnimationId); setCurrentThemeId(dotLottie.activeThemeId); }; dotLottie.addEventListener('load', onLoad); return () => dotLottie.removeEventListener('load', onLoad); }, [点洛蒂]); 返回（

{主题.长度 > 0 && ( setCurrentAnimationId(e.target.value)}> {animations.map((anim) => ( <选项键={anim.id} 值={anim.id}>{anim.id} ))} )}

）； }; ### 7\.性能 Web Worker (DotLottieWorker) 从'@lottiefiles/dotlottie-web'导入{DotLottieWorker}； // 将动画渲染卸载给网络工作者新的 DotLottieWorker({ 画布： document.getElementById('canvas'), src: 'heavy-animation.lottie', 自动播放：正确，循环：真， workerId: 'worker-1' // 按worker对多个动画进行分组 }); // 不同worker中的多个动画新的 DotLottieWorker({ 画布：document.getElementById('canvas-2'), src: 'animation-2.lottie', 自动播放：正确，循环：真，工人 ID：'工人-2' }); ## 集成模式 ### 使用 GSAP ScrollTrigger 从“lottie-react”导入洛蒂；从“gsap”导入 gsap；从 'gsap/ScrollTrigger' 导入 ScrollTrigger；从“./animation.json”导入动画数据； gsap.registerPlugin(ScrollTrigger); const GSAPlottieIntegration = () => { const lottieRef = React.useRef(); React.useEffect(() => { const anim = lottieRef.current； if (!anim) 返回； // 将 Lottie 与滚动同步 gsap.to(动画, { 滚动触发器：{ 触发器：'#animation-section', 开始：'顶部中心'，结束：'底部中心'，磨砂膏：1、 onUpdate: (自我) => { constframe = Math.floor(self.progress * (anim.totalFrames - 1)); anim.goToAndStop(frame, true); } } }); }, []); 返回（

<洛蒂洛蒂参考={洛蒂参考} 动画数据={动画数据} 自动播放={假} 循环={假} />

）； }; ### 使用成帧器运动从'framer-motion'导入{motion}；从'@lottiefiles/dotlottie-react'导入{DotLottieReact}；常量 MotionLottie = () => { 返回（ <运动.div 初始={{不透明度：0，比例：0.8}} 动画={{ 不透明度: 1, 比例: 1 }} 过渡={{持续时间:0.6}} > ）； }; ### Vue 3 集成 <脚本设置> 从'@lottiefiles/dotlottie-vue'导入{DotLottieVue}； <模板> ### 精简集成 <脚本语言=“ts”> 从'@lottiefiles/dotlottie-svelte'导入{DotLottieSvelte}；从 '@lottiefiles/dotlottie-svelte' 导入类型 { DotLottie }；让 dotLottie: DotLottie |空=空；函数播放（）{ dotLottie?.play(); } dotLottie = ref} /> <按钮上：点击= {播放}>播放 ## 性能优化 ### 文件大小优化 **1\. After Effects 中的导出设置：** * 启用“跳过未使用的图像” * 尽可能使用“Glyphs”代替字体 * 简化路径（减少illustrator中的点） * 避免产生大数据的影响（粒子、噪音） * 使用形状图层而不是矢量图层 **2\.压缩：** * 使用dotLottie格式（.lottie）进行自动压缩 * 通过 Lottie 优化器工具运行 JSON * 删除不必要的元数据 **3\.延迟加载：** const LazyLottie = () => { const [shouldLoad, setShouldLoad] = React.useState(false); React.useEffect(() => { const 观察者 = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { setShouldLoad（真）； } }); observer.observe(document.getElementById('lottie-trigger')); return () =>observer.disconnect(); }, []); 返回（

{shouldLoad && }

）； }; ### 运行时性能 **1\.渲染器选择：** // SVG：最佳质量，复杂动画速度较慢 // Canvas：更好的性能，光栅化 // HTML：支持有限，仅用于简单动画 // 对于复杂的动画，更喜欢canvas 新的多特洛蒂（{ 画布： document.getElementById('canvas'), src: '动画.lottie', 自动播放：正确，循环：真，渲染配置：{ devicePixelRatio：window.devicePixelRatio || 1 } }); **2\.网络工作者：** // 将重动画卸载给worker 从'@lottiefiles/dotlottie-web'导入{DotLottieWorker}；新的 DotLottieWorker({ 画布： document.getElementById('canvas'), src: 'heavy-animation.lottie', 自动播放：正确，循环：真 }); **3\.移动优化：** // 降低移动设备上的质量 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 新的多特洛蒂（{ 画布： document.getElementById('canvas'), src： isMobile ？ '动画-low.lottie' : '动画-high.lottie', 自动播放：正确，循环：真，渲染配置：{ devicePixelRatio： isMobile ？ 1：window.devicePixelRatio } }); ## 常见陷阱 ### 1\.清理不当导致内存泄漏 **问题：** 卸载组件时不销毁 Lottie 实例。 **解决方案：** const SafeAnimation = () => { const [dotLottie, setDotLottie] = React.useState(null); React.useEffect(() => { 返回（）=> { // 卸载时始终销毁实例 dotLottie?.destroy(); }; }, [点洛蒂]); 返回 ; }; ### 2\.事件监听器清理 **问题：** 事件侦听器未删除，导致多个处理程序。 **解决方案：** 使用效果（（）=> { if (!dotLottie) 返回； const handleComplete = () => console.log('完成'); dotLottie.addEventListener('完整',handleComplete); // 必须返回清理函数返回（）=> { dotLottie.removeEventListener('完整',handleComplete); }; }, [点洛蒂]); ### 3\.大文件大小 **问题：** 对于简单动画，导出的 JSON 文件大小为 500KB 以上。 **解决方案：** * 简化 After Effects 合成（减少图层、关键帧） * 使用dotLottie格式进行压缩 * 检查 Bodymovin 导出设置（如果不需要，禁用“包含表达式”） * 导出前删除未使用的资源 * 使用 Lottie 优化工具： ### 4\.动画性能问题 **问题：** 动画卡顿或丢帧。 **解决方案：** * 从 SVG 渲染器切换到 Canvas 渲染器 * 使用 `DotLottieWorker` 进行 Web Worker 渲染 * 降低 After Effects 的复杂性（更少的层、更简单的形状） * 降低移动设备上的 devicePixelRatio * 避免同时为太多属性设置动画 ### 5\.路径/URL 引用不正确 **问题：** 由于 CORS 或不正确的路径，动画无法加载。 **解决方案：** // 使用animationData进行本地导入（最适合捆绑应用程序）从“./animation.json”导入动画数据； <洛蒂animationData={animationData} /> // 或者使用外部 URL 的路径（需要 CORS 标头） // 对于 Next.js，放置在 public/ 文件夹中 ### 6\. After Effects 导出兼容性 **问题：** 某些 After Effects 功能无法导出到 Lottie。 **不支持的功能：** * 图层效果（阴影、发光）- 使用形状图层代替 * 混合模式（有限支持） * 3D图层 * 表达式（部分支持） * 轨道遮罩（部分支持） **解决方案：** * 尽早并经常测试导出 * 导出前使用 LottieFiles 预览 * 检查 Bodymovin 兼容性： * 尽可能将效果转换为形状 ## 资源该技能包括： ### 脚本/ * `generate_lottie_component.py` \- 生成 React/Vue/Svelte Lottie 组件样板 * `optimize_lottie.py` \- 优化 Lottie JSON 文件大小 ###参考资料/ * `api_reference.md` \-lottie-web、lottie-react 和 dotlottie-web 的完整 API 文档 * `after_effects_export.md` \- 从 After Effects 导出动画的指南 * `performance_guide.md` \-详细的性能优化策略 ###资产/ * `starter_lottie/` \- 带有 Lottie 示例的完整 React + Vite 入门模板 * `examples/` \- 真实世界的 Lottie 动画模式和用例 ## 相关技能 * **gsap-scrolltrigger** \- 用于与页面滚动同步的滚动驱动的 Lottie 动画 * **motion-framer** \- 与 Framer Motion 结合用于包裹 Lottie 的布局动画 * **动画组件库** \- 可能包含 Lottie 动画的预构建组件 * **twojs-webgl** \- 用于超出 Lottie 2D 功能的 3D 动画 * **react-三纤维** \- 复杂 3D 动画场景的替代方案

洛蒂动画

包含技能