用途:在 Web Components 中集成 Anime.js 4.0,实现拖放、点击反馈、卡片交换与可取消动画。安装:npm i animejs。
主要能力:animate、createTimeline、stagger、createSpring、createDraggable,以及 createDrawable、createMotionPath、morphTo、splitText、onScroll。支持按属性控制、关键帧、函数式取值、播放控制(play/pause/reverse/restart/seek)、cancel/revert/complete、回调与 Promise、内置缓动与弹簧预设、滚动驱动、SVG 绘制与变形、文本拆分。
使用方式:Web Component 中建议用 WeakMap 管理动画,每次启动前取消旧动画,在 disconnectedCallback 中 revert 清理内联样式。拖拽过程中不要用 animate() 跟踪指针,直接设置 transform 以保证 60fps;释放或返回原位用 animate() 配合 outBack。卡片交换采用 FLIP:先 DOM 交换,再用旧新 getBoundingClientRect 差值做位移动画。点击反馈可用 outElastic 弹性或 linear 抖动。
迁移:V3 的 anime({ targets }) 改为 animate('.el', {...}),easing 改为 ease,direction 改为 alternate,translateX 改为 x,anime.stagger 改为 stagger,finished 改为 then/await。
限制:资料未提供版本兼容范围、浏览器支持、性能基准、收费与授权信息;具体效果与使用步骤需以官方文档为准。