自主学习练习、逐帧观察与参考答案

你可以按时间挑练习，不必逐章打卡。每次完成“预测→操作→观察→解释”，比只背参数更容易形成判断。

D.1 弹簧演示的学习顺序

先播放“到达目标”，比较阻尼8、20、40。刚度100、质量1时，临界阻尼为20：8会回弹，20不振荡归位，40也不回弹但更慢。

再选“0.20秒改到左侧”，定位到改目标瞬间，点下一帧。目标框已在左，但弹簧速度箭头可能仍向右；它先刹车再转向。普通缓动例子会从当前值重新设定一段曲线，因此可位置连续、速度突变。演示不是在说所有普通缓动实现都必须突变，而是展示两种常见模型。

最后选阻尼40复看：阻尼更大，惯性继续向前的时间/距离会变化；逐帧观察比背公式更直观。暂停状态有位置、方向和速度读数；时间轴按模拟60帧/秒，不等于浏览器真实刷新率。

D.2 十分钟：按钮反馈

做原始、轻微按压、过强按压三种版本；比较 scale1、0.97、0.9。保持文字和命中范围合理。Hover 仅有能力时启用，键盘有焦点指示，reduce 下不缩放。

验收：鼠标靠近边缘时快速按压/松开不丢事件；触屏没有粘住的 hover；不靠动画告知提交成败。

D.3 十五分钟：文字揭示

用三到五个词做错峰，预测最后结束时间。故意删除 backwards、overflow、inline-block 各观察一次，再恢复。比较逐字和逐词的长标题，保留完整可访问文本。

参考答案：缺 backwards 时等待期可能先显示；缺裁切时起始文字在外部可见；普通 inline 子项无法直接按预期变换；延迟按数量累计。

D.4 二十分钟：可反向提示面板

分别用“切动画名的固定 keyframes”和“同一元素 transition 改目标”实现开关。每到25%、50%、75%进度反向，录屏比较。再用同一 WAAPI Animation.reverse 体会 keyframes 本身不等于无法中断。

验收：身份稳定、状态正确、没有旧完成回调覆盖新目标；reduce 版本没有依赖不存在的结束事件。

D.5 二十分钟：动态高度

短文本→长文本→带图片→窄窗口换行。测量内层、动画外层；先故意把 ref 放到动画层，观察反馈问题。设置真实空内容，检验“0等于没测量”的假设是否成立。

验收：图片加载/字体变化能更新；快速切换不跳；reduce 下释放固定高度；焦点不会被溢出裁切遮住。

D.6 二十五分钟：拖拽关闭卡片

Track 直接跟手，Release 根据方向、距离、速度决定关闭或归位。慢拖、短快甩、往回拉、pointercancel、中途抓住归位卡片各测一次。遮罩从同一 y 值派生。

参考答案：跟手阶段加 spring 导致滞后；只看绝对速度可能反向误关闭；新手势用静止起点会跳；独立遮罩时间线会失去同步。

D.7 十五分钟：滚动两种时钟

一张图进入阈值后只播一次，另一条进度随滚动来回变化。预测后上滚测试。关闭 JS，正文仍可读；开启 reduce，装饰运动关闭。观察 rootMargin 正/负变化的实际触发位置。

参考答案：Triggered 用时间，scrubbed 用滚动位置；给 scrub 再加延迟会追赶手；负底 margin 缩小检测区，不是提前扩大。

D.8 二十分钟：性能证据

比较同一块面板使用 left 与 translate 的录制；改变内容数量，检查样式/布局/绘制。记录实验条件。再比较每次 pointermove 更新 state 与表现值更新，观察真实 render 数与帧时间。

参考答案：不能只凭属性名宣布快慢；布局语义可能不同；CPU节流不等于真实手机GPU。报告需含复现、录制和同条件比较。

D.9 综合项目：多步骤反馈抽屉

功能：按钮打开→表单→提交中→成功→关闭，支持返回、重试、Escape、焦点恢复、长内容滚动。设计 brief 后选择现有原语；Motion 只负责必要的状态与高度变化。

必须处理：快速反向、网络失败、重复提交、方向数据、自动高度、表单 label、触屏拖动与滚动、reduce、媒体暂停。不要为了展示所有学过效果而全部加入。

交付：一页 brief、实现、两段普通/减少运动录制、一次问题诊断记录、review 表。完成标准是操作与信息清楚，而不是动画数量多。

D.10 二十题自查答案