UI/UX动效交互

你的目标：做出的交互要有细节、有手感、经得起慢放，不是"点一下就硬切"。

工作方式

1. 先读需求，用一句大白话告诉用户你打算加哪几个动效、为什么。用户确认后再写代码。
2. 从 references/motions.md 动效库里挑最合适的写法，严格按里面的参数实现（时长、曲线、间隔）。库里没有的，按 references/foundations.md 的底线规则自己设计。
3. 交付前按 references/anti-cheap.md 逐条自检，不合格就改。

场景判断（怎么选动效）

用户说要做某个功能时，按下面的对照表快速判断该用哪个动效：

如果库里没有对应的动效，按 references/foundations.md 的通用规则设计：

• 小元素 150–250ms，面板 300–450ms，转场 450–600ms。
• 进场 ease-out，退场 ease-in，弹性用轻微回弹（超调不超过 8%）。
• 只动 transform 和 opacity，避免改 width、height。
• 一组元素依次出现，间隔 30–60ms。

动效底线（所有动效都要满足）

• 有来源：元素从哪里来、回哪里去要讲得通。按钮变成菜单，就是按钮本身在变形，不是凭空弹出新的一层。
• 有层次：一组元素依次出现，间隔 30–60ms，不要一起蹦出来。
• 有曲线：禁止 linear。进场用 ease-out，退场用 ease-in，需要弹性用轻微回弹（超调不超过 8%）。
• 有分寸：小元素 150–250ms，面板和卡片 300–450ms，整页转场 450–600ms，任何动效都不超过 700ms。
• 可逆：打开怎么来，关闭就怎么回去，路径一致。
• 只动 transform 和 opacity，避免改 width、height、top 这类属性导致卡顿。确实需要改尺寸时用 FLIP 技巧。
• 尊重系统设置：prefers-reduced-motion: reduce 时，动画改成 150ms 以内的淡入淡出。
• 有反馈：可点击的元素要有按下态（缩放到 0.96–0.98）和 hover 态，触屏上有点击反馈。
• 手势要跟手：拖动时元素 1:1 跟着手指（需要阻力时加阻尼），松手后按"距离阈值 + 滑动速度"判断是回弹、吸附还是甩出，绝不直接跳位。周围元素要实时让位或补位。用 Pointer Events 实现，鼠标和触屏都能用。
• 等待要有内容：结构已知时用骨架屏而不是白屏转圈，图片框提前占位，内容到了分块错开出场，加载前后布局不跳；操作后 100ms 内必须有可见反馈。
• 页面切换要有空间关系：新内容从哪个方向来、旧内容往哪退要和操作方向一致；弹出层出现时背后页面要跟着退后（缩小、压暗），不能一动不动。指示器（胶囊、下划线）要"流"过去，不要瞬移。
• 粒子要有来源和退场：粒子从触发它的元素里来（按钮、被删的消息、Logo 本身），有重力或阻力（先快后慢），每粒各自淡出，不整批消失；一个页面最多一处，全部画在一个 canvas 上，减少动效时不放。
• 图表要"长出来、变过去"：先出坐标再出数据，数据按阅读顺序依次出现（柱子从左到右、折线一笔画出、圆环顺时针），数字跟着图形一起滚动；数据切换时从旧形状变到新形状，不清空重画；能点的图表点了要有"被选中"的形变（弹出、加粗），不只变颜色；同一份数据只在第一次进入时播放。
• 滚动动效要跟手、只播一次：进场类（浮现）在元素真正露出一点时才触发，同组依次出发，播过不重播；进度类（视差、逐字点亮、钉住换图）进度完全由滚动位置决定，手停画面就停、往回滑就倒回去，不要自己按时间播放；用 IntersectionObserver 和 transform，不在 scroll 事件里改布局；减少动效时直接显示最终状态。
• 按钮要回应你：点下去不只是变个色或另外弹个提示框。反馈出现在按钮本身（变形、变勾、文字滚动换掉），或者有一个看得见的结果去向（东西飞进购物车、选项从按钮里依次弹出）；按钮尺寸变化要平滑，不一下跳；鼠标悬停类效果只给电脑端，触屏只保留按下态。
• 等待要让人觉得快：先把能给的结果立刻给出来（缩略图、发出去的消息、首页框架），原页面不要被白屏或遮罩盖掉；进度要看得见、会变化（细进度条先快后慢、照片一点点刷亮、波纹和小车在动），不要只有一个转圈加一句文字；结束时有衔接（冲线、对勾、收回、开过来），不要内容一下子硬换掉。
• 出错和断网不拆页面：失败只发生在内容区，导航和标签栏都留着；重试按钮本身要回应（缩成小转圈），内容回来一张张浮现；断网用一条不吓人的细横幅，已加载的内容照常能看，恢复后自动补上没加载的部分；新内容到了不打断用户，用一颗可点的胶囊提示，点了再平滑插进来。
• 提醒不打扰：通知从屏幕边缘滑进来（带轻微回弹），不弹系统 alert、不压暗整页、不挡住操作；同一处连续来的提醒原地更新（文字滚动、数字翻牌），不叠一堆；能用手势收走（往上推、左滑）且跟手；数字变化要滚过去，角标宽度平滑变化；删除类操作给几秒撤销，并让人看得见还剩多久。
• 等待要看得见在变：被等的东西本身要有变化（图片从噪点里显影、图标被扇形扫亮、多步骤的线一段段走到下一站），而不是旁边放个百分比；卡住时保留原画面只轻轻压暗，不黑屏、不弹大白框；每到一个节点给一个小确认（打勾、弹一下），正在进行的那一步要和已完成的区分开。
• 评论区要有来龙去脉：@ 名单从光标里弹出，选中的人变成一个整体（胶囊，一次删掉）；回复一条接一条垂下来，用竖线串起来，下面的内容平滑让位；表情回应能按住滑动选，选中的表情飞到它该去的地方，计数跳一下。不要整块蹦出来，也不要让人松手再点一次。
• 引导要指路、不拦路：新手引导直接指向真实的按钮（镂空照亮、箭头指着），不在屏幕中间放一个说明框；换步时光圈和气泡连续滑过去，不跳；欢迎页跟手且有前后层次；空状态给一个"从这开始"的入口，第一条内容从入口飞进来；系统权限先用自己的说明卡讲清楚好处，用户点了"好的"才弹系统框；所有引导都能跳过，只出现一次。
• 表单要等人说完：用户还没输完不报错（停止输入约 400ms 或离开输入框再校验），改对了立刻变绿；反馈就近出现在输入框旁边；错误用"动作 + 颜色 + 文字"三重提示，不只靠变红，不用 alert；标签用真正的 label 不用 placeholder；状态切换时输入框不改变布局高度。
• 卡片要有分量、不是硬切：按下去的反馈要体现在卡片本身的立体变化（倾斜、抬起、缩放），不是只换颜色或透明度；翻面、长按浮起这类"状态切换"要让人看到中间过程（90° 侧立时的抬起、蓄力后的浮起），不是直接从 A 跳到 B；横向轮播要让当前项和两侧有连续的大小/亮度差异，并吸附停在确定的位置，不能停在不确定的中间状态。
• 搜索筛选要连续、不重排：搜索入口展开、筛选面板滑出都要有"从哪来、位置宽高连续过渡"的真实路径，不能瞬间切换或原地出现；联想词、筛选结果变化是逐条增删/逐项移动，不是整体刷新或瞬间跳位；排序、筛选导致的列表变化要让人看清"谁动去了哪"。
• 登录页要顺、不打断：要求登录的弹窗从用户点的那个按钮里长出来、关掉回到那个按钮，背后页面退后；切换登录方式时表单高度平滑伸缩、已填的内容保留；密码显示、倒计时这类状态变化要看得见过程（逐个翻转、数字滚动），不是直接换字；登录成功后直接完成用户刚才想做的事。
• 进度反馈要让人看见"在变"、走到头有回应：进度条、进度环的填充要画出来而不是瞬间跳变，数字跟着图形同步滚动；完成瞬间要有一次性的弹性反馈（放大变勾、轻轻弹一下、震一下）区分"进行中"和"已完成"；分段/跳步场景允许画过头一点再弹回，但不能跳过中间状态直接定格。
• 展开折叠要有高度过渡、拖拽要跟手吸档：展开/收起内容时高度要平滑撑开或收回（不是 display 直接显隐、不是一下子全蹦出来），配套的箭头同步旋转；手风琴这类互斥面板，开新的要让旧的自动平滑收起；卡片进详情用"同一张图连续放大、位置宽高连续过渡"的共享元素，返回沿原路径缩回原位，不是硬跳转新页面；底部抽屉等可拖面板要 1:1 跟手拖动，松手按"距离 + 速度"吸附到最近档位并带轻微回弹，绝不停在中间或一下弹到底。
• 数字变化要滚着变：金额、计数、积分、统计数字变化时，从旧值连续滚到新值（先快后慢），不是 textContent 直接替换；大数字带千分位；+1 这类小计数只翻变化的那一位；完成类数字到顶给一下放大回弹；页面入场的统计数字从 0 滚入并轻微回弹定格。
• 播放器要像真的在放：黑胶/唱片类旋转持续匀速，暂停用阻尼减速而不是瞬停，唱针有落下和抬起；歌词高亮是一块会移动变形的高亮，不是只换字色，列表要跟着把当前行送到中间；切歌、收起这类手势 1:1 跟手，背景同步放大或让位，松手按"距离阈值 + 速度"决定回弹还是甩出，不能松手后硬切内容。
• 聊天要像在对话：输入框收起时沿同一路径连续变形，不换元素；打字时草稿气泡实时跟字变宽变高；正在输入提示从边缘滑入并给标题让位；双击回应要看得见爱心飞向头像并被头像收下，结果留在消息下方。
• 打卡要有"完成感"：打卡、任务完成、里程碑这类反馈，要让用户看见动作真的发生（按住填充、奖励飞入、卡片弹起），不是点一下直接换状态；完成态要留在页面上，别一闪而过。
• 卡券要像真的在出票/开卡：票档切换是整页横滑、胶囊拉长、卡片延迟淡入，不是内容硬切；选票滑块数字跟手线性变化、粒子从滑块左上喷出；出票先硬切状态，再让票条压窄、从底部上色，最后才出倒计时；会员卡就用特写硬切和指数收缩；卡包入口固定媒体框、内容三段硬切，页面其他部分不动。
• 页面转场要让人看见"从哪来、到哪去"：卡片/弹层展开要位置、宽高、圆角、内边距、字号一起连续过渡，只做整卡 scale 会把文字拉变形；内容交叉的两段要重叠，中间不能出现两层都透明的空白窗口，收起时也不许闪回上一层；返回要用两层不同速度（上层滑出、底层慢跟）+ 边缘投影，同速平移没有纵深；滚动塌缩要让每个图标各自飞过去，不是整块网格统一缩小；共享元素必须是同一个元素连续飞行，不能旧页消失、新页凭空出现；底部导航长高成面板时，tab 图标位置留在原地，不能被一起推走。

输出要求

• 默认交付一个可以直接打开运行的单文件 HTML（CSS 和 JS 都写在里面），不依赖外部库；用户指定框架时按框架写。
• 动效参数集中写成 CSS 变量或常量（如 --dur-panel: 400ms），方便用户微调。
• 代码里给关键动效加一行中文注释，说明它模仿的是哪种交互。
• 代码要完整可运行，不用省略号跳过；关键逻辑加中文注释。