界面动效先说明状态的Skill

为界面添加有节制的微交互和状态过渡动画。

emilkowalski-motion 是为已有界面补动效的 Skill。它先看真实页面,再挑少量能说明状态或层级的动作,如按钮反馈和内容切换。

用户刚点完按钮,需要知道操作已发生;内容换了位置,需要看得懂前后关系。围绕这些时刻选动作,比给每个元素都加进入动画更有依据。

同一页面的节奏应一致,自动动画也要照顾减少动态的偏好。原文时长范围是参考,不能所有控件统一套秒数;长列表逐个出现还可能拖慢阅读。

适合在结构已稳定后润色交互。本文未修改界面或调用动画库;离开页面需清理观察器、计时器与动画实例,效果是否清楚还要在真实操作中验证,不能凭一段演示认定产品体验完成。

分类:设计创作

来源仓库:nexu-io/open-design

适合用来做什么

  • 在 Vue 项目中使用 GSAP 实现一个动画效果。
  • 请解释如何在 SvelteKit 中集成 GSAP 进行动画处理。

安装 emilkowalski-motion

npx skills add https://www.iskills.cc/skills/nexu-io/open-design/emilkowalski-motion/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 emilkowalski-motion 的用途与原始说明

浏览全部 Skill 指南