1. 为什么2022年还在聊JavaScript动画库前端圈有个很有意思的现象CSS动画明明越来越强scroll-timeline、property、view-transition这些新特性一个接一个但真正做项目的时候遇到复杂交互、物理效果、时间轴编排最后还是得回到JavaScript动画库的怀抱。原因很简单——CSS擅长的是声明式的简单过渡一旦涉及动态计算、运行时干预、多元素协同纯CSS就开始力不从心。2022年这个时间节点其实挺特殊的。Web Animations APIWAAPI在主流浏览器里的支持度已经相当不错很多轻量库开始基于它做封装同时WebGL、Canvas 2D的性能红利被进一步榨干3D和粒子类动画库的门槛降到了普通业务开发者也能上手的程度。再加上React、Vue这些框架生态成熟动画库和框架的绑定方式也分化出了好几条路线。我这两年陆陆续续在后台管理系统、营销活动页、数据可视化大屏、小游戏这几个场景里换着用不同的动画库踩过的坑不算少。有的库文档写得漂亮但实际性能拉胯有的库API设计反人类但胜在稳定还有的库看起来功能全但打包体积能顶半个业务代码。所以这篇不是那种十大排名式的罗列而是按实际使用场景来拆把每个库的脾气、适用边界、以及我踩过的具体坑讲清楚。如果你正在选型或者手头项目动画卡顿想换方案又或者单纯想搞清楚这些库到底差在哪下面的内容应该能帮你省下不少试错时间。关键词就三个JavaScript动画库、性能、场景适配。2. GSAP功能天花板但别被它的体积吓退2.1 为什么GSAP在2022年依然是最后一道防线GSAPGreenSock Animation Platform在动画库里的地位有点像jQuery在DOM操作时代的地位——你可能觉得它老但真遇到复杂需求绕一圈还是会回来。2022年GSAP 3.x已经非常成熟核心包压缩后大概23KB左右gzip后如果只引核心加几个插件实际增量可以控制在30KB以内。它的核心优势在于时间轴Timeline系统。举个实际例子做一个营销活动页的开场动画需要logo先淡入、然后文字逐字弹出、接着按钮缩放出现、最后背景粒子开始循环。用CSS你得算每个元素的animation-delay改一个时间点全盘重算用GSAP的Timeline代码是这样的const tl gsap.timeline({ defaults: { ease: power2.out } }); tl.from(.logo, { opacity: 0, y: -30, duration: 0.6 }) .from(.title span, { opacity: 0, y: 20, stagger: 0.08, duration: 0.4 }, -0.2) .from(.btn, { scale: 0.8, opacity: 0, duration: 0.3 }, -0.1) .to(.particle, { opacity: 1, duration: 0.5 }, -0.2);stagger做逐字动画、-0.2做时间重叠、defaults统一缓动——这些在CSS里要么做不到要么写起来极其别扭。而且Timeline可以随时pause()、reverse()、seek()、timeScale()做交互动画时这种运行时控制能力是刚需。2.2 ScrollTrigger插件滚动动画的正确打开方式2022年滚动驱动动画是个热点GSAP的ScrollTrigger插件基本是这个领域的标杆。它解决的核心问题是元素进入视口时触发动画并且动画进度和滚动位置绑定。我做过一个数据大屏项目需要图表在滚动到对应位置时逐条生长。用IntersectionObserver也能做但只能做进入触发做不到滚动进度映射。ScrollTrigger的scrub参数可以让动画进度直接跟随滚动条gsap.to(.bar, { scaleY: 1, scrollTrigger: { trigger: .chart, start: top 80%, end: bottom 20%, scrub: 1 } });scrub: 1表示动画进度比滚动位置延迟1秒这样滚动快的时候动画会追上来手感更顺滑。这个参数调0会跟得太紧显得生硬调太大又会有明显滞后感实测1到1.5之间比较舒服。注意ScrollTrigger在移动端和某些嵌套滚动容器里会有触发时机偏差建议在ScrollTrigger.refresh()之后手动校准一次尤其是在字体加载完成、图片撑开布局之后。2.3 GSAP的坑授权和过度设计GSAP核心是免费开源的但2022年的时候SplitText、MorphSVG、Draggable这些高级插件属于Club GreenSock会员专属后来2024年被Webflow收购后才全部免费。如果项目里用了这些插件商用授权是要花钱的。我见过有团队没注意这点上线后被法务提醒。另一个坑是过度设计。GSAP太强了强到容易让人把所有动画都往里塞。结果一个简单的hover效果也写Timeline代码量比CSS多三倍性能还没CSS好。我的经验是能用CSS transition解决的别上GSAP需要时间轴编排、运行时控制、物理效果的再上GSAP。3. Anime.js轻量优雅但2022年要留意维护状态3.1 Anime.js的设计哲学用最少的API做最多的事Anime.js的API设计是我个人最喜欢的之一。它的核心就一个anime()函数通过配置对象描述动画支持CSS属性、SVG属性、DOM属性、JavaScript对象属性——几乎什么都能动。anime({ targets: .box, translateX: 250, rotate: 1turn, backgroundColor: #FF6B6B, duration: 800, easing: easeInOutQuad, direction: alternate, loop: true });targets支持CSS选择器、DOM元素、NodeList、对象数组direction: alternate做往返动画loop做循环。做SVG路径动画时它的strokeDashoffset支持特别顺手做那种线条绘制效果几行代码就搞定。3.2 时间轴和交错动画的实战细节Anime.js的timeline和stagger是它的两个杀手锏。做列表项依次入场anime.timeline({ loop: false }) .add({ targets: .list-item, translateY: [40, 0], opacity: [0, 1], duration: 600, delay: anime.stagger(80) });anime.stagger(80)表示每项间隔80毫秒。它还能做stagger(80, { from: center })从中间向两边扩散或者stagger([0, 200])做不均匀间隔。这些细节在营销页里特别出效果。3.3 2022年的现实问题维护节奏放缓Anime.js在2022年的时候GitHub上的提交频率已经明显下降了。核心功能稳定是好事但遇到新浏览器特性比如某些WAAPI的边界情况时社区响应会慢一些。我在一个项目里遇到过Safari 15下strokeDashoffset动画偶发跳帧的问题最后是手动加了will-change: stroke-dashoffset才缓解。所以我的建议是Anime.js适合中小型项目、对体积敏感、动画需求以2D变换和SVG为主的场景。如果是长期维护的大型项目要评估一下后续维护风险。它的体积确实香压缩后大概17KBgzip后6KB左右比GSAP轻不少。4. Three.js3D动画的门槛与2022年的性能现实4.1 Three.js不是动画库但3D动画绕不开它严格说Three.js是3D渲染库不是动画库。但2022年做3D动画它基本是默认选项。它的动画系统分两块AnimationMixer骨骼动画、关键帧动画和手动更新在requestAnimationFrame里改rotation、position。做产品360度展示const mixer new THREE.AnimationMixer(model); const action mixer.clipAction(gltf.animations[0]); action.play(); function animate() { requestAnimationFrame(animate); mixer.update(0.016); // 约60fps的时间增量 renderer.render(scene, camera); }mixer.update(delta)里的delta要用时钟算不能写死0.016否则在高刷屏上会变快、在低端机上会变慢。这是新手最容易踩的坑之一。4.2 性能优化2022年依然要抠的细节Three.js项目性能问题八成出在draw call太多和材质太复杂上。2022年虽然硬件好了但移动端中低端机跑复杂3D场景还是吃力。几个实测有效的优化合并几何体用BufferGeometryUtils.mergeBufferGeometries()把静态物体合并draw call能从几百降到个位数。InstancedMesh做粒子或重复物体时用实例化网格一个draw call渲染上千个对象。纹理压缩用KTX2格式显存占用能降60%以上加载也快。LODLevel of Detail远处物体用低模近处用高模Three.js有THREE.LOD类直接支持。提示2022年WebGL 2.0普及度已经很高但部分旧设备还是WebGL 1.0。用renderer.capabilities.isWebGL2判断必要时降级。4.3 和框架结合的坑Three.js和React结合时最大的坑是生命周期管理。React的StrictMode在开发环境会双调用useEffect导致场景被创建两次、canvas重复挂载。解决方案是在useEffect的清理函数里彻底销毁renderer、scene、camera并且用useRef存实例而不是useState。另外Three.js的OrbitControls等控制器会直接操作DOM事件和React的合成事件系统偶尔冲突建议在useEffect里手动绑定和解绑。5. Lottie设计师和开发者之间的和平协议5.1 Lottie解决的核心问题AE动画落地Lottie是Airbnb开源的核心价值是把After Effects做的动画导出成JSON在Web/移动端原生渲染。2022年它已经是动效落地的事实标准之一。设计师在AE里用Bodymovin插件导出JSON开发者用lottie-web加载lottie.loadAnimation({ container: document.getElementById(lottie), renderer: svg, // 或 canvas、html loop: true, autoplay: true, path: animation.json });renderer的选择有讲究svg清晰度高、支持CSS干预但复杂动画性能差canvas性能好但缩放会模糊html适合简单动画。实测下来元素数量超过200个的动画用canvas比svg流畅明显。5.2 体积和性能的平衡Lottie的JSON文件大小取决于动画复杂度。一个简单的加载动画可能几KB一个复杂的插画动画能到几百KB甚至上MB。2022年的时候lottie-web的完整包大概250KBgzip后约70KB如果只用svg渲染器可以用lottie_light版本体积减半。性能上Lottie在移动端的表现取决于动画里用了多少表达式expressions和遮罩masks。表达式是AE里的脚本Lottie解析起来很耗性能能不用就不用。遮罩在svg渲染器下会触发重绘复杂遮罩建议预渲染成序列帧或者用canvas。5.3 和交互结合的实战技巧Lottie不只是播放它可以分段播放、进度控制、事件监听const anim lottie.loadAnimation({ /* ... */ }); anim.addEventListener(DOMLoaded, () { anim.goToAndStop(30, true); // 跳到第30帧 }); // 滚动控制进度 window.addEventListener(scroll, () { const progress window.scrollY / (document.body.scrollHeight - window.innerHeight); anim.goToAndStop(anim.totalFrames * progress, true); });这种滚动驱动Lottie的做法在2022年的品牌官网里很常见比视频背景轻量比CSS动画表现力强。6. 其他值得关注的库各自守住一个细分场景6.1 Mo.js动效编排的专业工具Mo.js的定位很明确——做高质量的动效编排尤其是那种爆发延迟交错的复杂效果。它的API比GSAP更声明式用mojs.Timeline和mojs.Shape组合const burst new mojs.Burst({ radius: { 0: 100 }, count: 12, children: { shape: circle, fill: [#FF6B6B, #4ECDC4, #FFE66D], duration: 1000 } });Mo.js的曲线编辑器Curve Editor是它的特色可以在线调贝塞尔曲线然后导出代码。缺点是文档相对零散学习曲线陡而且体积不算小压缩后约50KB。适合做品牌动效、加载动画、按钮反馈这类需要精致感的场景。6.2 Popmotion函数式动画的代表Popmotion的哲学是动画是值的函数。它不直接操作DOM而是输出值你自己决定怎么用import { animate } from popmotion; animate({ from: 0, to: 100, onUpdate: (v) { el.style.transform translateX(${v}px); } });这种设计让它特别适合和React、Vue结合或者做数据驱动的动画。2022年Popmotion的维护状态一般但它的思想影响了很多后来的库比如Framer Motion就是基于它演化的。6.3 Velocity.js老牌但依然能打Velocity.js在2022年已经不算新了但它的性能优化做得扎实尤其是和jQuery时代的项目兼容性好。它的velocity()函数支持颜色动画、transform、SVG而且有velocity.ui扩展包做预设效果。缺点是API偏老派社区活跃度下降新项目不太建议首选但维护老项目时它很稳。6.4 选型对照表库体积(gzip)核心优势最适合场景2022年维护状态GSAP~30KB时间轴、ScrollTrigger复杂交互、营销页活跃Anime.js~6KB轻量、SVG动画中小项目、列表动画放缓Three.js~150KB3D渲染3D展示、数据可视化非常活跃Lottie~70KBAE动画落地品牌动效、加载动画活跃Mo.js~15KB动效编排精致微交互一般Popmotion~10KB函数式、框架友好React/Vue集成一般Velocity.js~15KB性能、兼容性老项目维护低7. 选型时真正该问自己的几个问题7.1 动画是装饰还是核心体验这个问题决定了你该花多少成本。如果动画只是锦上添花用CSS transition加少量JS触发就够了引库反而增加体积和维护成本。如果动画是核心体验比如游戏、交互式故事、数据大屏那GSAP或Three.js这种重武器才值得。我见过一个后台管理系统引了GSAP做按钮hover结果打包体积多了30KB动画效果和CSStransition: 0.2s几乎没区别。这就是典型的杀鸡用牛刀。7.2 团队的技术栈和维护能力如果团队是React技术栈Framer Motion虽然2022年还叫Framer Motion后来改名Motion可能比GSAP更顺手因为它和React的声明式模型天然契合。如果是Vuevueuse/motion或者GSAP的Vue插件更合适。另外要考虑长期维护。一个库如果两年没更新遇到新浏览器版本出问题就只能自己改源码。2022年选型时我会优先看GitHub最近半年的提交频率和issue响应速度。7.3 性能预算和降级方案移动端项目一定要做性能降级。比如检测到navigator.hardwareConcurrency小于4或者window.matchMedia((prefers-reduced-motion: reduce))为真就关闭复杂动画只保留必要的过渡。const prefersReduced window.matchMedia((prefers-reduced-motion: reduce)).matches; if (prefersReduced) { // 跳过动画直接显示最终状态 gsap.set(.animated, { clearProps: all }); } else { // 正常播放动画 }这个prefers-reduced-motion媒体查询是很多开发者会忽略的但对有前庭功能障碍的用户来说动画可能是晕车级别的痛苦。做产品要有这个意识。7.4 打包和按需加载大部分动画库都支持按需引入。GSAP可以只引gsap核心加需要的插件Three.js可以只引用到的模块配合tree-shaking。Lottie可以用lottie_light。Anime.js本身就是单文件。如果动画只在特定页面用用动态import()做代码分割button.addEventListener(click, async () { const { default: gsap } await import(gsap); gsap.to(.box, { x: 100 }); });这样首屏不会加载动画库交互时再拉取对首屏性能友好。8. 我踩过的几个具体坑和对应解法8.1 GSAP Timeline的内存泄漏GSAP的Timeline如果创建后不销毁在SPA里反复创建会累积。尤其是在React组件里每次渲染都gsap.timeline()组件卸载后Timeline还在跑。解法是在useEffect清理函数里tl.kill()useEffect(() { const tl gsap.timeline(); // ... 添加动画 return () tl.kill(); }, []);kill()会停止动画并释放引用。如果只是暂停用pause()但组件卸载一定要kill()。8.2 Lottie在Safari下的首帧闪烁Lottie在Safari里加载时偶尔会先显示一帧空白或者错位然后才正常。原因是Safari对SVG的渲染时机和Chrome不同。解法是给容器设visibility: hidden在DOMLoaded事件后再显示anim.addEventListener(DOMLoaded, () { container.style.visibility visible; });或者用rendererSettings: { preserveAspectRatio: xMidYMid slice }明确指定缩放方式减少布局抖动。8.3 Three.js的移动端黑屏移动端Three.js黑屏九成是纹理太大或者着色器编译失败。纹理超过4096x4096在部分中低端机上会直接失败。解法是压缩纹理到2048以内或者用texture.minFilter THREE.LinearFilter减少mipmap生成。着色器问题可以用renderer.debug.checkShaderErrors true打开错误检查控制台会输出具体哪一行编译失败。8.4 Anime.js的stagger顺序错乱Anime.js的stagger默认按DOM顺序但如果元素是动态生成的顺序可能和视觉顺序不一致。解法是用anime.stagger(80, { from: first })明确指定或者给元素加> 2022年JavaScript动画库选型指南：GSAP、Anime.js、Three.js、Lottie场景适配与性能优化
1. 为什么2022年还在聊JavaScript动画库前端圈有个很有意思的现象CSS动画明明越来越强scroll-timeline、property、view-transition这些新特性一个接一个但真正做项目的时候遇到复杂交互、物理效果、时间轴编排最后还是得回到JavaScript动画库的怀抱。原因很简单——CSS擅长的是声明式的简单过渡一旦涉及动态计算、运行时干预、多元素协同纯CSS就开始力不从心。2022年这个时间节点其实挺特殊的。Web Animations APIWAAPI在主流浏览器里的支持度已经相当不错很多轻量库开始基于它做封装同时WebGL、Canvas 2D的性能红利被进一步榨干3D和粒子类动画库的门槛降到了普通业务开发者也能上手的程度。再加上React、Vue这些框架生态成熟动画库和框架的绑定方式也分化出了好几条路线。我这两年陆陆续续在后台管理系统、营销活动页、数据可视化大屏、小游戏这几个场景里换着用不同的动画库踩过的坑不算少。有的库文档写得漂亮但实际性能拉胯有的库API设计反人类但胜在稳定还有的库看起来功能全但打包体积能顶半个业务代码。所以这篇不是那种十大排名式的罗列而是按实际使用场景来拆把每个库的脾气、适用边界、以及我踩过的具体坑讲清楚。如果你正在选型或者手头项目动画卡顿想换方案又或者单纯想搞清楚这些库到底差在哪下面的内容应该能帮你省下不少试错时间。关键词就三个JavaScript动画库、性能、场景适配。2. GSAP功能天花板但别被它的体积吓退2.1 为什么GSAP在2022年依然是最后一道防线GSAPGreenSock Animation Platform在动画库里的地位有点像jQuery在DOM操作时代的地位——你可能觉得它老但真遇到复杂需求绕一圈还是会回来。2022年GSAP 3.x已经非常成熟核心包压缩后大概23KB左右gzip后如果只引核心加几个插件实际增量可以控制在30KB以内。它的核心优势在于时间轴Timeline系统。举个实际例子做一个营销活动页的开场动画需要logo先淡入、然后文字逐字弹出、接着按钮缩放出现、最后背景粒子开始循环。用CSS你得算每个元素的animation-delay改一个时间点全盘重算用GSAP的Timeline代码是这样的const tl gsap.timeline({ defaults: { ease: power2.out } }); tl.from(.logo, { opacity: 0, y: -30, duration: 0.6 }) .from(.title span, { opacity: 0, y: 20, stagger: 0.08, duration: 0.4 }, -0.2) .from(.btn, { scale: 0.8, opacity: 0, duration: 0.3 }, -0.1) .to(.particle, { opacity: 1, duration: 0.5 }, -0.2);stagger做逐字动画、-0.2做时间重叠、defaults统一缓动——这些在CSS里要么做不到要么写起来极其别扭。而且Timeline可以随时pause()、reverse()、seek()、timeScale()做交互动画时这种运行时控制能力是刚需。2.2 ScrollTrigger插件滚动动画的正确打开方式2022年滚动驱动动画是个热点GSAP的ScrollTrigger插件基本是这个领域的标杆。它解决的核心问题是元素进入视口时触发动画并且动画进度和滚动位置绑定。我做过一个数据大屏项目需要图表在滚动到对应位置时逐条生长。用IntersectionObserver也能做但只能做进入触发做不到滚动进度映射。ScrollTrigger的scrub参数可以让动画进度直接跟随滚动条gsap.to(.bar, { scaleY: 1, scrollTrigger: { trigger: .chart, start: top 80%, end: bottom 20%, scrub: 1 } });scrub: 1表示动画进度比滚动位置延迟1秒这样滚动快的时候动画会追上来手感更顺滑。这个参数调0会跟得太紧显得生硬调太大又会有明显滞后感实测1到1.5之间比较舒服。注意ScrollTrigger在移动端和某些嵌套滚动容器里会有触发时机偏差建议在ScrollTrigger.refresh()之后手动校准一次尤其是在字体加载完成、图片撑开布局之后。2.3 GSAP的坑授权和过度设计GSAP核心是免费开源的但2022年的时候SplitText、MorphSVG、Draggable这些高级插件属于Club GreenSock会员专属后来2024年被Webflow收购后才全部免费。如果项目里用了这些插件商用授权是要花钱的。我见过有团队没注意这点上线后被法务提醒。另一个坑是过度设计。GSAP太强了强到容易让人把所有动画都往里塞。结果一个简单的hover效果也写Timeline代码量比CSS多三倍性能还没CSS好。我的经验是能用CSS transition解决的别上GSAP需要时间轴编排、运行时控制、物理效果的再上GSAP。3. Anime.js轻量优雅但2022年要留意维护状态3.1 Anime.js的设计哲学用最少的API做最多的事Anime.js的API设计是我个人最喜欢的之一。它的核心就一个anime()函数通过配置对象描述动画支持CSS属性、SVG属性、DOM属性、JavaScript对象属性——几乎什么都能动。anime({ targets: .box, translateX: 250, rotate: 1turn, backgroundColor: #FF6B6B, duration: 800, easing: easeInOutQuad, direction: alternate, loop: true });targets支持CSS选择器、DOM元素、NodeList、对象数组direction: alternate做往返动画loop做循环。做SVG路径动画时它的strokeDashoffset支持特别顺手做那种线条绘制效果几行代码就搞定。3.2 时间轴和交错动画的实战细节Anime.js的timeline和stagger是它的两个杀手锏。做列表项依次入场anime.timeline({ loop: false }) .add({ targets: .list-item, translateY: [40, 0], opacity: [0, 1], duration: 600, delay: anime.stagger(80) });anime.stagger(80)表示每项间隔80毫秒。它还能做stagger(80, { from: center })从中间向两边扩散或者stagger([0, 200])做不均匀间隔。这些细节在营销页里特别出效果。3.3 2022年的现实问题维护节奏放缓Anime.js在2022年的时候GitHub上的提交频率已经明显下降了。核心功能稳定是好事但遇到新浏览器特性比如某些WAAPI的边界情况时社区响应会慢一些。我在一个项目里遇到过Safari 15下strokeDashoffset动画偶发跳帧的问题最后是手动加了will-change: stroke-dashoffset才缓解。所以我的建议是Anime.js适合中小型项目、对体积敏感、动画需求以2D变换和SVG为主的场景。如果是长期维护的大型项目要评估一下后续维护风险。它的体积确实香压缩后大概17KBgzip后6KB左右比GSAP轻不少。4. Three.js3D动画的门槛与2022年的性能现实4.1 Three.js不是动画库但3D动画绕不开它严格说Three.js是3D渲染库不是动画库。但2022年做3D动画它基本是默认选项。它的动画系统分两块AnimationMixer骨骼动画、关键帧动画和手动更新在requestAnimationFrame里改rotation、position。做产品360度展示const mixer new THREE.AnimationMixer(model); const action mixer.clipAction(gltf.animations[0]); action.play(); function animate() { requestAnimationFrame(animate); mixer.update(0.016); // 约60fps的时间增量 renderer.render(scene, camera); }mixer.update(delta)里的delta要用时钟算不能写死0.016否则在高刷屏上会变快、在低端机上会变慢。这是新手最容易踩的坑之一。4.2 性能优化2022年依然要抠的细节Three.js项目性能问题八成出在draw call太多和材质太复杂上。2022年虽然硬件好了但移动端中低端机跑复杂3D场景还是吃力。几个实测有效的优化合并几何体用BufferGeometryUtils.mergeBufferGeometries()把静态物体合并draw call能从几百降到个位数。InstancedMesh做粒子或重复物体时用实例化网格一个draw call渲染上千个对象。纹理压缩用KTX2格式显存占用能降60%以上加载也快。LODLevel of Detail远处物体用低模近处用高模Three.js有THREE.LOD类直接支持。提示2022年WebGL 2.0普及度已经很高但部分旧设备还是WebGL 1.0。用renderer.capabilities.isWebGL2判断必要时降级。4.3 和框架结合的坑Three.js和React结合时最大的坑是生命周期管理。React的StrictMode在开发环境会双调用useEffect导致场景被创建两次、canvas重复挂载。解决方案是在useEffect的清理函数里彻底销毁renderer、scene、camera并且用useRef存实例而不是useState。另外Three.js的OrbitControls等控制器会直接操作DOM事件和React的合成事件系统偶尔冲突建议在useEffect里手动绑定和解绑。5. Lottie设计师和开发者之间的和平协议5.1 Lottie解决的核心问题AE动画落地Lottie是Airbnb开源的核心价值是把After Effects做的动画导出成JSON在Web/移动端原生渲染。2022年它已经是动效落地的事实标准之一。设计师在AE里用Bodymovin插件导出JSON开发者用lottie-web加载lottie.loadAnimation({ container: document.getElementById(lottie), renderer: svg, // 或 canvas、html loop: true, autoplay: true, path: animation.json });renderer的选择有讲究svg清晰度高、支持CSS干预但复杂动画性能差canvas性能好但缩放会模糊html适合简单动画。实测下来元素数量超过200个的动画用canvas比svg流畅明显。5.2 体积和性能的平衡Lottie的JSON文件大小取决于动画复杂度。一个简单的加载动画可能几KB一个复杂的插画动画能到几百KB甚至上MB。2022年的时候lottie-web的完整包大概250KBgzip后约70KB如果只用svg渲染器可以用lottie_light版本体积减半。性能上Lottie在移动端的表现取决于动画里用了多少表达式expressions和遮罩masks。表达式是AE里的脚本Lottie解析起来很耗性能能不用就不用。遮罩在svg渲染器下会触发重绘复杂遮罩建议预渲染成序列帧或者用canvas。5.3 和交互结合的实战技巧Lottie不只是播放它可以分段播放、进度控制、事件监听const anim lottie.loadAnimation({ /* ... */ }); anim.addEventListener(DOMLoaded, () { anim.goToAndStop(30, true); // 跳到第30帧 }); // 滚动控制进度 window.addEventListener(scroll, () { const progress window.scrollY / (document.body.scrollHeight - window.innerHeight); anim.goToAndStop(anim.totalFrames * progress, true); });这种滚动驱动Lottie的做法在2022年的品牌官网里很常见比视频背景轻量比CSS动画表现力强。6. 其他值得关注的库各自守住一个细分场景6.1 Mo.js动效编排的专业工具Mo.js的定位很明确——做高质量的动效编排尤其是那种爆发延迟交错的复杂效果。它的API比GSAP更声明式用mojs.Timeline和mojs.Shape组合const burst new mojs.Burst({ radius: { 0: 100 }, count: 12, children: { shape: circle, fill: [#FF6B6B, #4ECDC4, #FFE66D], duration: 1000 } });Mo.js的曲线编辑器Curve Editor是它的特色可以在线调贝塞尔曲线然后导出代码。缺点是文档相对零散学习曲线陡而且体积不算小压缩后约50KB。适合做品牌动效、加载动画、按钮反馈这类需要精致感的场景。6.2 Popmotion函数式动画的代表Popmotion的哲学是动画是值的函数。它不直接操作DOM而是输出值你自己决定怎么用import { animate } from popmotion; animate({ from: 0, to: 100, onUpdate: (v) { el.style.transform translateX(${v}px); } });这种设计让它特别适合和React、Vue结合或者做数据驱动的动画。2022年Popmotion的维护状态一般但它的思想影响了很多后来的库比如Framer Motion就是基于它演化的。6.3 Velocity.js老牌但依然能打Velocity.js在2022年已经不算新了但它的性能优化做得扎实尤其是和jQuery时代的项目兼容性好。它的velocity()函数支持颜色动画、transform、SVG而且有velocity.ui扩展包做预设效果。缺点是API偏老派社区活跃度下降新项目不太建议首选但维护老项目时它很稳。6.4 选型对照表库体积(gzip)核心优势最适合场景2022年维护状态GSAP~30KB时间轴、ScrollTrigger复杂交互、营销页活跃Anime.js~6KB轻量、SVG动画中小项目、列表动画放缓Three.js~150KB3D渲染3D展示、数据可视化非常活跃Lottie~70KBAE动画落地品牌动效、加载动画活跃Mo.js~15KB动效编排精致微交互一般Popmotion~10KB函数式、框架友好React/Vue集成一般Velocity.js~15KB性能、兼容性老项目维护低7. 选型时真正该问自己的几个问题7.1 动画是装饰还是核心体验这个问题决定了你该花多少成本。如果动画只是锦上添花用CSS transition加少量JS触发就够了引库反而增加体积和维护成本。如果动画是核心体验比如游戏、交互式故事、数据大屏那GSAP或Three.js这种重武器才值得。我见过一个后台管理系统引了GSAP做按钮hover结果打包体积多了30KB动画效果和CSStransition: 0.2s几乎没区别。这就是典型的杀鸡用牛刀。7.2 团队的技术栈和维护能力如果团队是React技术栈Framer Motion虽然2022年还叫Framer Motion后来改名Motion可能比GSAP更顺手因为它和React的声明式模型天然契合。如果是Vuevueuse/motion或者GSAP的Vue插件更合适。另外要考虑长期维护。一个库如果两年没更新遇到新浏览器版本出问题就只能自己改源码。2022年选型时我会优先看GitHub最近半年的提交频率和issue响应速度。7.3 性能预算和降级方案移动端项目一定要做性能降级。比如检测到navigator.hardwareConcurrency小于4或者window.matchMedia((prefers-reduced-motion: reduce))为真就关闭复杂动画只保留必要的过渡。const prefersReduced window.matchMedia((prefers-reduced-motion: reduce)).matches; if (prefersReduced) { // 跳过动画直接显示最终状态 gsap.set(.animated, { clearProps: all }); } else { // 正常播放动画 }这个prefers-reduced-motion媒体查询是很多开发者会忽略的但对有前庭功能障碍的用户来说动画可能是晕车级别的痛苦。做产品要有这个意识。7.4 打包和按需加载大部分动画库都支持按需引入。GSAP可以只引gsap核心加需要的插件Three.js可以只引用到的模块配合tree-shaking。Lottie可以用lottie_light。Anime.js本身就是单文件。如果动画只在特定页面用用动态import()做代码分割button.addEventListener(click, async () { const { default: gsap } await import(gsap); gsap.to(.box, { x: 100 }); });这样首屏不会加载动画库交互时再拉取对首屏性能友好。8. 我踩过的几个具体坑和对应解法8.1 GSAP Timeline的内存泄漏GSAP的Timeline如果创建后不销毁在SPA里反复创建会累积。尤其是在React组件里每次渲染都gsap.timeline()组件卸载后Timeline还在跑。解法是在useEffect清理函数里tl.kill()useEffect(() { const tl gsap.timeline(); // ... 添加动画 return () tl.kill(); }, []);kill()会停止动画并释放引用。如果只是暂停用pause()但组件卸载一定要kill()。8.2 Lottie在Safari下的首帧闪烁Lottie在Safari里加载时偶尔会先显示一帧空白或者错位然后才正常。原因是Safari对SVG的渲染时机和Chrome不同。解法是给容器设visibility: hidden在DOMLoaded事件后再显示anim.addEventListener(DOMLoaded, () { container.style.visibility visible; });或者用rendererSettings: { preserveAspectRatio: xMidYMid slice }明确指定缩放方式减少布局抖动。8.3 Three.js的移动端黑屏移动端Three.js黑屏九成是纹理太大或者着色器编译失败。纹理超过4096x4096在部分中低端机上会直接失败。解法是压缩纹理到2048以内或者用texture.minFilter THREE.LinearFilter减少mipmap生成。着色器问题可以用renderer.debug.checkShaderErrors true打开错误检查控制台会输出具体哪一行编译失败。8.4 Anime.js的stagger顺序错乱Anime.js的stagger默认按DOM顺序但如果元素是动态生成的顺序可能和视觉顺序不一致。解法是用anime.stagger(80, { from: first })明确指定或者给元素加>