SuperAPI AI 工具集

forms-inputs

通用与其它

查看项目

更新于 10-15 21:36

技能介绍

用途:为表单字段、输入框、文本域、下拉框及交互式表单元素设计动画,改善可用性与操作反馈。

主要能力:将迪士尼十二动画原则映射到表单元素,包括聚焦时输入框轻微扩展、提交按钮点击压缩、复选框切换回弹;标签上浮的预备动作;聚焦字段的视觉突出与其余字段弱化;定义默认、聚焦、已填、有效、无效、禁用等状态及平滑过渡;浮动标签落位、校验图标回弹、字符计数微动等跟随动作;缓动曲线建议(聚焦用 ease-out,校验用 ease-in-out,标签浮动用 cubic-bezier(0.4, 0, 0.2, 1));标签沿弧线移动;边框高亮、标签浮动、辅助文字出现的次级动作协调;时间建议(聚焦边框 100-150ms、标签浮动 150-200ms、校验反馈 200ms、错误抖动 300ms 3-4 次、成功勾选 250ms、复选框切换 150ms);错误抖动与成功脉冲的夸张表现;圆角、字体与图标比例的一致性;以及提升表单完成率的吸引力原则。

使用方式:以 CSS 过渡与关键帧实现,资料给出 .input-field、.floating-label 的 transition 写法、聚焦时标签位移缩放规则,以及 shake 关键帧示例;关键属性涉及 transform 的 translateY/translateX、border-color、box-shadow、color、opacity。

适用场景:需要为表单交互增加清晰反馈与愉悦感的界面。

限制:资料未提供安装命令、依赖、平台支持范围、收费或价格信息,也未给出完整可运行示例。