前言官网演示图如果可以的话去官网看看效果非常震撼anime.js 是老牌的前端动画库轻量~14KB gzipped、API 优雅、文档齐全GitHub Star 超 52k。但今年发布的v4 大版本是颠覆性的——API 几乎全部重写v3 的代码拿来直接跑第一行就报错。我在把 17 个 v3 Demo 迁移到 v4 的过程中踩了无数坑最终整理出这套完整的 DEMO 集涵盖 Logo 动画、SVG 绘制、拖拽交互、萤火虫粒子系统、WAAPI 硬件加速等全部核心功能。每个 DEMO 都可以独立运行、直接复制改造。项目代码地址官网GitHub 仓库demo源码一、v3 → v4一图看懂 API 巨变在你开始之前先建立全局认知。下面这张表覆盖了日常开发中最常用的变更功能v3 写法 ❌v4 写法 ✅创建动画anime({ targets, ... })anime.animate(targets, { ... })时间线anime.timeline()anime.createTimeline()交错延迟anime.stagger(80)stagger(80)随机值anime.random(10, 100)random(10, 100)或utils.random(10, 100)DOM 选择document.querySelector()anime.$(#id)缓动函数easeOutExpooutExpoSVG 路径变形anime.path(#path)anime.morphTo(#path)线条绘制anime({ strokeDashoffset: ... })anime.createDrawable(el)draw: 0 1拆分文字手动 splitanime.splitText(el, { chars: true })时间轴标签tl.add(...) offsettl.add(el, params, label)字符串位置拖拽无内置createDraggable(el, { ... })FLIP 布局无内置createLayout(el, { ... })缓动创建anime.easings[easeOutElastic]eases.outElastic()属性级缓动不支持translateY: { to: -280, ease: inQuart, duration: 320 }自动播放autoplay: falseautoplay: false一致WAAPI 加速无内置anime.waapi.animate(el, { ... })核心规律v4 将大量全局方法打散成独立导出命名全部去掉ease/anime前缀更像一套有设计体系的工具箱。二、Demo 全景17 个动画究竟长什么样先快速感受一下每个 Demo 的效果和核心 API编号Demo效果核心 API①Logo 动画anime.js 品牌字标逐笔登场SVG 路径变形线条绘制文字乱码解密createTimeline,morphTo,createDrawable,stagger,modifier②Timer 定时器带环形进度条的控制面板播放/暂停/seek/反向createTimer,onUpdate,seek,restart③Animation 动画循环动画、多阶段关键帧、函数式随机值animate,keyframes, 函数值,alternate④Timeline 时间线标签编组、网格交错、动画同步与回调createTimeline,label,add,sync,call⑤Animatable 对象轻量动画属性鼠标跟随平滑移动createAnimatable, getter/setter,utils.clamp⑥Draggable 拖拽弹簧物理释放网格吸附拖拽createDraggable,createSpring,snap⑦Layout 布局4 种 CSS Grid 布局的 FLIP 动画过渡createLayout,update, 数据集驱动⑧Scope 作用域响应式动画竖屏/横屏不同效果createScope,mediaQueries,add⑨Events 事件滚动驱动 SVG 贝塞尔曲线同步绘制onScroll,createDrawable,draw⑩SVG 动画路径变形线条绘制沿路径运动morphTo,createDrawable,createMotionPath⑪Text 文字字符拆分弹入乱码解密切换splitText,scrambleText,stagger⑫Utilities 工具stagger/cragrid、随机、数学函数面板stagger({ grid }),utils.randomPick,utils.mapRange,utils.lerp⑬Easings 缓动36 种缓动函数可配置弹簧物理可视化eases.in/out/inOut(),eases.steps(),createSpring⑭WAAPI 加速硬件加速文字弹跳动画waapi.animate,splitText, 合成器线程⑮Engine 引擎动画优先级priority调度演示priority,engine.update,fps⑯Fireflies 萤火虫225 个粒子轨道运动鼠标聚合/散开createTimer,utils.random,composition: blend⑰Loading 合集9 种加载动画 WAAPI 遮罩animate,createTimer,waapi.animate,splitText这些 Demo 组织的原则是一个 Demo 只聚焦一个主题每个页面不超过 150 行核心逻辑。看完可以直接理解这个 API 的用法复制改造到项目中也不会被无关代码干扰。三、核心 Demo 深度拆解下面我选 6 个最有代表性的 Demo从代码层面剖析 v4 的关键设计理念。3.1 Logo 动画Timeline 编排的终极示范这是整个项目中最复杂的动画完整展示了 v4 Timeline 的编排能力。动画分为 6 个阶段FALL → WIGGLE → POP → SWEECH → FOUR → TEXT 线条下落 线条摇摆 字母弹入 路径变形 数字登场 打字机字幕关键代码片段consttlcreateTimeline().label(FALL).add(#line,{translateY:[0,280],...}).add(#dot,{rotate:90,...}).label(POP).add(anime.$(.letter p),{translateY:{to:[-280,19],ease:inQuart,duration:320},stagger:stagger(50,{from:center})}).label(SWEECH)// morphTo 代替 v3 的 anime.path().add(#a-line,anime.morphTo(#n,0)).add(#n-line,anime.morphTo(#i,0)).add(#i-line,anime.morphTo(#m,0)).add(#m-line,anime.morphTo(#e,0)).label(FOUR).add(#four,{scale:[0,1],filter:blur(10px)}).label(TEXT).add(#sub-text span,{opacity:1,stagger:30,...});v4 的亮点设计属性级缓动translateY: { to: [-280, 19], ease: inQuart, duration: 320 }这种写法让同一个元素的每个 CSS 属性都能独立设置缓动和时长这在 v3 中完全做不到。时间轴位置SWEECH00、、-290这些字符串位置标签极大简化了复杂时序的维护不用再心算毫秒偏移。3.2 SVG 动画路径变形、线条绘制、沿路径运动三合一SVG 是 anime.js 的传统强项v4 在这方面又做了大幅改进① 路径变形morphToanime.animate(#target-path,{d:anime.morphTo(#triangle-path),duration:1200,ease:inOutExpo,loop:true,direction:alternate});不需要再手动处理路径点数量匹配morphTo()自动采样和对齐。② 线条绘制createDrawableconstdrawableanime.createDrawable(#curve);anime.animate(drawable,{draw:0 1,duration:2000,ease:inOutSine});这是 v4 新增的最让人欣喜的功能之一再也不用折腾stroke-dasharray和stroke-dashoffset了。③ 沿路径运动createMotionPathanime.animate(#point,{...anime.createMotionPath(.track),duration:3000,loop:true,ease:linear});createMotionPath()返回{ x, y, angle }属性对象用扩展运算符合并到 animate 参数中非常简洁。3.3 Draggable 拖拽弹簧物理网格吸附v4 将拖拽交互提升为一等公民// 弹簧物理释放createDraggable(#ball-spring,{releaseEase:createSpring({stiffness:200,damping:15}),container:.sandbox});// 网格吸附createDraggable(#ball-snap,{snap:{x:60,y:60},container:.sandbox});createSpring()让你可以精细控制弹性释放的物理参数实际体验非常跟手。snap支持按轴独立配置做可视化编辑器时非常有用。3.4 Fireflies 萤火虫粒子系统的正确打开方式225 个粒子全部通过createTimer()驱动高频更新consttimercreateTimer({duration:1000*60*3,loop:true,onUpdate:(self){particles.forEach((p,i){// 轨道运动p.anglep.speed*0.01;p.xcxMath.cos(p.angle)*p.radius;p.ycyMath.sin(p.angle)*p.radius;anime.set(p.el,{x:p.x,y:p.y,opacity:utils.random(0.3,1),scale:utils.random(0.5,1.5)});});}});注意这里用的是anime.set()而不是直接操作 DOM style这样可以利用 anime 的渲染管线保证性能。timer的onUpdate每帧都会触发是实现粒子系统、游戏循环等高频场景的完美选择。3.5 Easings 缓动36 种曲线可视化弹簧物理控制器v4 的缓动系统做了彻底的重新设计变成一套函数式 API// 内置缓动eases.in(circ);// easeInCirceases.out(elastic);// easeOutElasticeases.inOut(back);// easeInOutBackeases.steps(10);// 阶梯缓动eases.irregular(5);// 不规则缓动eases.outElastic();// 带默认参数的弹性缓动eases.outBounce();// 弹跳缓动// 弹簧物理ease:createSpring({bounce:20,frequency:5})Demo 中有一个可拖拽的滑块实时调整bounce弹性和frequency频率参数让你直观感受到不同参数对动画节奏的影响。这个交互本身也是用createDraggable实现的狗食狗粮了属于是。3.6 WAAPI 加速让动画跑在合成器线程v4 原生集成了 Web Animations API 的支持可以绕过 JS 主线程直接在合成器线程上执行动画anime.waapi.animate(anime.splitText(#text,{chars:true}),{y:[-20,0],opacity:[0,1],scale:[0.8,1],stagger:stagger(80,{from:center}),duration:600,loop:true,alternate:true,ease:inOut(3)});语法和anime.animate()几乎一致但动画跑在 GPU 上即便主线程阻塞也不会卡顿。waapi-loading Demo 里还有 8 种纯 WAAPI 实现的加载动画脉冲波纹、旋转点阵、弹跳圆点、双环旋转等全部支持loopalternate无限播放适合作为组件库的 loading 组件。四、迁移避坑清单我踩过的 7 个致命坑这部分是血泪经验建议收藏。坑 1anime({ targets })直接报错// ❌ v3anime({targets:.box,translateX:250});// ✅ v4 — 两个独立参数anime.animate(.box,{x:250});v4 不再接受单对象参数targets必须是第一个独立参数动画属性作为第二个参数。坑 2缓动命名全部改名v3 的easeOutExpo→ v4 的outExpov3 的easeInOutBack→ v4 的inOutBack。规则很简单去掉ease前缀即可但如果忘了改动画会静默失效无缓动很难排查坑 3Timeline 链式调用被分号打断// ❌ 这个分号会切断整个 TL 链后续 .add() 变成顶级语句 → SyntaxError.add(#a,{...},SWEECH);.add(#b,{...});// ✅ 正确去掉分号继续链式.add(#a,{...},SWEECH).add(#b,{...})这种错误 ESLint 不会提示Prettier 可能会自动加分号非常阴险。坑 4anime.stagger和anime.random不存在了// ❌ v3anime.stagger(80)anime.random(10,100)// ✅ v4stagger(80)random(10,100)// 或 utils.random(10, 100)stagger和random作为顶层导出直接使用不用挂载在anime下。坑 5SVG 动画不能用scale属性在 SVGcircle等元素上v4 的scale不会生效因为 SVG 不支持 CSS transform 的transform-box在部分场景下有兼容性问题。正确的做法是用元素自身的属性// ✅ SVG circle 用 r 属性代替 scaleanime.animate(circle,{r:[0,50]});坑 6anime.path()→anime.morphTo()返回值类型不同// v3: anime.path() 返回一个函数需要调用d:anime.path(#target)// v4: anime.morphTo() 直接返回值对象不需要调用d:anime.morphTo(#target)这个改动非常隐蔽如果你按 v3 的习惯加括号调用会直接报错。坑 7WAAPI 动画不支持ease: outElastic等弹性缓动anime.waapi.animate()底层是原生的Element.animate()只能使用 CSS 标准的缓动函数linear,ease,ease-in-out等。如果需要弹性效果只能用 JS 引擎的anime.animate()。五、我的推荐什么场景用什么 API场景推荐 API原因页面入场动画createTimeline多阶段编排天然支持位置偏移悬停/点击反馈animatealternate简单直接来回切换滚动驱动动画onScrollcreateDrawable原生滚动同步无需手写 IntersectionObserver拖拽/滑动createDraggable内置弹簧物理零配置粒子/游戏循环createTimer高频 onUpdate性能可控复杂多阶段动画createTimelinelabel标签化管理逻辑清晰大量元素动画animatestagger交错执行GPU 友好低功耗动画waapi.animate合成器线程不阻塞主线程响应式动画createScope媒体查询驱动自动重绘六、快速上手在 HTML 中引入 anime.js v4scriptsrchttps://cdn.jsdelivr.net/npm/animejs4.4.1/lib/anime.min.js/script最小示例——让一个方块动起来dividboxstylewidth:50px;height:50px;background:#FF4B4B;/divscriptanime.animate(#box,{x:250,duration:800,ease:outElastic,loop:true,alternate:true});/script结语anime.js v4 是一次值得尊敬的重构。它没有兼容 v3 的包袱敢于打破旧的 API 设计虽然增加了迁移成本但换来的是更一致、更模块化、更现代的工具箱。特别是createDrawable、createMotionPath、createSpring、createDraggable这些全新能力让前端动画的边界又往外推了一截。17 个 Demo 的完整代码已经分享每个页面都可以直接打开运行。如果你也在用 anime.js v4欢迎在评论区交流踩坑经验。