SuperAPI AI 工具集

ux-animation-motion

设计与创作

查看项目

更新于 10-16 05:45

技能介绍

用途:为界面提供响应式且可访问的动效,覆盖悬停反馈、状态过渡、加载动画与成功庆祝等场景,基于 Anime.js v4。

主要能力:项目在 js/utils/animations.js 中提供可复用动画,如 shake、pressEffect、successBounce、glow,并导出 DURATION 与 EASE 常量。DURATION 含 instant 100、quick 200、normal 300、slow 500、celebration 600;EASE 含 snap(easeOutQuad)、smooth(easeInOutQuad)、bounceOut(easeOutBack)。常见模式包括按压反馈(scale 1→0.95→1)、成功弹跳、错误抖动、发光、脉冲,以及淡入、滑入、缩放进入、列表错峰等过渡。还给出属性变化、阶段切换、得分更新、成就解锁等状态动画写法。

使用方式:通过 import { animate } from 'animejs' 引入,项目用 import maps 解析到本地 node_modules;也可从 utils/animations.js 导入封装函数。简单状态变化优先用 CSS transition。

减少动效:用 window.matchMedia('(prefers-reduced-motion: reduce)') 检测,命中时直接应用最终状态或加类名;并提供 CSS 媒体查询兜底与 safeAnimate 包装函数。

性能与限制:建议只用 transform 和 opacity,交互动画控制在 300ms 内,谨慎使用 will-change,元素卸载时暂停动画;避免动画 width、height、margin、padding,避免频繁交互用长时长、链式过多动画及离屏元素动画。资料未提供安装命令、收费与平台信息。