SuperAPI AI 工具集

responsive-adaptive

设计与创作

查看项目

更新于 10-15 17:32

技能介绍

用途:在构建依赖上下文的动画时使用,让动画时长根据设备能力、位移距离、用户偏好与交互类型调整,而非对所有场景使用同一时长。

主要能力:给出适配策略与实现模式。基于距离的时长可按位移缩放;基于设备的时长可通过媒体查询在桌面、平板、移动端分别设定;基于偏好的时长可响应用户减少动效设置。文中还给出情境规则表,例如触摸设备、小视口、大位移、小位移、用户偏好减少动效、低电量模式、高频操作、首次浏览、重复交互等对应的时长调整方向。

用法要点:以 CSS 变量建立时长体系(如 instant、fast、normal、slow),再在媒体查询中按断点或偏好覆盖这些变量;可在 JS 中按基准时长与基准距离用平方根公式计算时长并限制上限。示例命令与代码保持原样,如 @media (max-width: 768px)、@media (prefers-reduced-motion: reduce)。

适用场景:需要跨设备、跨情境一致且合理动效体验的前端动效系统,尤其是响应式界面中的过渡与动画时长管理。

限制:资料未提供具体库依赖、安装命令、浏览器兼容范围、性能基准或框架集成细节;各情境调整幅度属于参考建议,实际取值需自行测试。核心观点是时长随情境变化,动画原则保持不变,应构建系统而非固定值,并跨情境测试。