前端 · 设计 · 动效

图标动效的阻尼调整

一个图标的回弹，单独看很舒服。放进 95 个里，它变成了默认质感。先看在线画廊的实拍，再用一个只改阻尼比的对照实验，弄清「过冲」到底由哪个数字决定，以及一条真正拦得住它的约束该长什么样。

Yhazrin2026.10.19

单独看，一个铃铛被点一下，铃舌甩出去再荡回来，很好。把它旁边再放 87 个同样会荡的东西，一起点，就不对了——不是某一个图标难看，是回弹本身变成了默认质感。单看每个都合格，合起来像在喊。

这件事发生在我自己的 apple-motion-icons 仓库里。它收集了 95 个对象（13 个通用图标、14 个学习/录屏/导航图标、60 个图库图标，以及 8 个循环加载动画），每个对象都有一张自己的动作表和一个弹簧。这一篇不介绍怎么画图标，只讲一件事：弹性的质感是被一个数字控制的，而那条控制线应该由代码来守，而不是靠手感。

先说明本文的三种对象，免得混在一起：

在线画廊 https://icon.yhazrin.xyz/motion/ 和它的源码仓库，是我自己的作品，MIT 许可，文章里的截图是实拍。
后面出现的连续变形示例，是同一个仓库里的一个文件，跑的是同一套生产渲染器。
那个只改阻尼比的对照实验，是本文新写的工具，不是图标库的一部分，也不替代它。

一屏画廊：动作表长什么样

Apple Motion Icons 在线画廊首屏，顶部是分组与搜索，下面每张卡片列出该对象的动作名、符号效果、姿态切换和展开进度 — 2026-10-19 从 https://icon.yhazrin.xyz/motion/ 实拍的运行界面。卡片不是示意图：点动作名就会播放，姿态之间可以切换，「展开进度」这类滑杆可以直接把对象停在中间。
本文独立实验本文实拍：icon.yhazrin.xyz/motion/ · 2026-10-19

截图里每张卡片下面的那串词，就是这个对象的动作表：今天有「天光舒展 / 迎接白昼 / 迎接夜晚 / 太阳变月亮」四种；词库有「书封带出内页 / 沿书脊展开 / 内页收回书封」。右边那条展开进度滑杆更关键——它不是播放按钮，而是把对象直接停在 0% 到 100% 之间的任意一帧。

把 95 张卡片排在一起，问题就藏不住了：每个动作都在动，动法却各不相同。原问题是这个集合没有统一的弹性纪律，而不是某几个图标没调好。所以接下来的修法，也不是逐个去调那 95 份配方。

过冲不是一个形容词，是一个数字

弹簧系统用两个量描述：刚度 k 和阻尼 c。SwiftUI 不直接给这两个，它给响应时间 response 和阻尼比 ζ，换算关系是：

text

stiffness = (2π / response)²
damping   = 2 ζ √stiffness        （质量取 1）

ζ 是本文唯一的主角。它小于 1，系统会冲过目标再荡回来，过冲量；等于 1，刚好停在目标不越界，不多不少地叫临界阻尼。大于 1，爬升慢一点但绝不越界。

对一个阶跃输入，过冲大致是：ζ 1 → 0%，.86 → ≈ 0.6%，.72 → ≈ 4%，.3 → ≈ 37%。

问题的根就在这张表里。我引擎最初的预设是照着卡通的强调感调的：pop 用 ζ .39（约 26% 过冲），rebound ζ .34，swing ζ .19，shake ζ .25。.19 是什么概念——来回荡将近十次才停。这些值单看都有理由，用在一个图标上也没人会有意见。可它们是默认预设，87 个对象的动作表里谁都能调，于是过冲变成了这个库的出厂纹理。廉价感来自默认值，不来自某一次具体的调参。

先自己量一遍

下面的实验不看图标，只看一个方块。它求解真实的弹簧-质量-阻尼系统，用的是上面那套换算式；它不调用任何 CSS 缓动函数，所以你看到的每一条曲线都是数值积分出来的。响应时间固定为 0.40s（与库里 bouncy 相同），变的只有阻尼比。

只改阻尼比，让它停在你面前

查看实际运行的源码

实际运行的 CSS

css

/* Experiment geometry and semantic markers only. Controls come from journal-controls/v1. */
.lab{max-width:720px;margin:0 auto}.slider{flex:1 1 220px;display:block;font-size:12px;color:var(--jc-muted)}.slider span{display:flex;justify-content:space-between;margin-bottom:5px}.slider b{font-variant-numeric:tabular-nums;color:var(--jc-ink);font-size:13px}.check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--jc-muted)}.track{position:relative;height:56px}.target{position:absolute;left:78%;top:-6px;bottom:-6px;width:2px;background:var(--jc-ink);opacity:.85;border-radius:1px}.target::after{content:"目标";position:absolute;left:5px;top:-2px;font-size:10px;color:var(--jc-muted);white-space:nowrap}.peak{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--jc-warn);border-radius:1px;opacity:0;transition:opacity .2s ease}.peak.on{opacity:1}.peak::after{content:"过冲";position:absolute;left:5px;bottom:-2px;font-size:10px;color:var(--jc-warn);white-space:nowrap}.block{position:absolute;top:10px;left:0;width:44px;height:36px;border-radius:9px;background:var(--jc-accent)}@media(prefers-reduced-motion:reduce){.peak{transition:none}}

实际运行的 JavaScript

js

/* 本文实验：阻尼比对照。
 * 求解一个真实的质量-弹簧-阻尼系统，不使用 CSS 缓动。
 * 换算与被讨论的图标库一致：k = (2π / response)²，c = 2ζ√k，质量为 1。 */
(function () {
  'use strict';

  var RESPONSE = 0.40;          // 秒；与库中 bouncy 的 response 相同
  var REST = 0.005;             // 静止阈值：行程的 0.5%
  var STEP = 1 / 240;           // 固定子步长，保证高阻尼下也稳定
  var MAX_TIME = 6;             // 秒；超时判定为已经停住

  var frameId = 0;
  var preference = matchMedia('(prefers-reduced-motion: reduce)');
  var zeta = 0.72;
  var stiffness = Math.pow(2 * Math.PI / RESPONSE, 2);

  var el = {
    zeta: document.getElementById('zeta'),
    zetaValue: document.getElementById('zeta-value'),
    play: document.getElementById('play'),
    reset: document.getElementById('reset'),
    reduce: document.getElementById('reduce'),
    presets: document.getElementById('presets'),
    block: document.getElementById('block'),
    peak: document.getElementById('peak'),
    over: document.getElementById('over'),
    settle: document.getElementById('settle'),
    crossings: document.getElementById('crossings'),
    state: document.getElementById('state')
  };

  function reduced() { return el.reduce.checked || preference.matches; }
  function stop() { cancelAnimationFrame(frameId); frameId = 0; }

  function metrics() {
    var track = el.block.parentElement;
    var span = track.clientWidth - el.block.offsetWidth;
    return { targetPx: span * 0.78 };
  }

  function paint(value, peakValue, stats) {
    var m = metrics();
    el.block.style.transform = 'translateX(' + (value * m.targetPx).toFixed(2) + 'px)';
    if (peakValue > 1.001) {
      el.peak.classList.add('on');
      el.peak.style.left = (peakValue * m.targetPx).toFixed(2) + 'px';
    } else {
      el.peak.classList.remove('on');
    }
    el.over.textContent = stats.over.toFixed(1) + '%';
    el.settle.textContent = stats.settle === null ? '—' : stats.settle.toFixed(2) + 's';
    el.crossings.textContent = String(stats.crossings);
  }

  function run() {
    stop();
    var damping = 2 * zeta * Math.sqrt(stiffness);

    if (reduced()) {
      // 减少动态：直接落位，不制造往返；但仍报告这条曲线本该有的量。
      el.block.style.transform = 'translateX(' + metrics().targetPx.toFixed(2) + 'px)';
      el.peak.classList.remove('on');
      el.over.textContent = '0%（已按减少动态落位）';
      el.settle.textContent = '—';
      el.crossings.textContent = '0';
      el.state.textContent = 'ζ ' + zeta.toFixed(2) + ' · 减少动态：直接到达目标';
      return;
    }

    var x = -1, v = 0, t = 0;         // 相对目标的位移与速度；起点离目标一个单位
    var peak = 0, crossings = 0, settled = null, lastSign = -1;
    var previous = performance.now();

    function frame(now) {
      var dt = Math.min((now - previous) / 1000, 0.064);
      previous = now;
      var remaining = dt;
      while (remaining > 0) {
        var h = Math.min(STEP, remaining);
        remaining -= h;
        var a = -stiffness * x - damping * v;
        v += a * h;
        x += v * h;
        t += h;
        if (x > peak) peak = x;
        if (settled === null && Math.abs(x) <= REST && Math.abs(v) <= REST * 4) {
          settled = t;
        }
        if (settled === null && t > 0.02) {
          var sign = x > 0 ? 1 : x < 0 ? -1 : 0;
          if (sign !== 0 && sign !== lastSign) { crossings++; lastSign = sign; }
        }
      }

      var value = 1 + x;
      paint(value, 1 + peak, {
        over: Math.max(0, peak) * 100,
        settle: settled,
        crossings: Math.max(0, crossings - 1)
      });
      el.state.textContent = 'ζ ' + zeta.toFixed(2) + ' · 播放中…';

      if ((settled === null && t < MAX_TIME) || (settled !== null && Math.abs(x) > REST)) {
        frameId = requestAnimationFrame(frame);
      } else {
        el.block.style.transform = 'translateX(' + metrics().targetPx.toFixed(2) + 'px)';
        el.state.textContent = 'ζ ' + zeta.toFixed(2) + ' · 已静止';
      }
    }
    frameId = requestAnimationFrame(frame);
  }

  function reset() {
    stop();
    el.block.style.transform = 'translateX(0px)';
    el.peak.classList.remove('on');
    el.over.textContent = '—';
    el.settle.textContent = '—';
    el.crossings.textContent = '—';
    el.state.textContent = 'ζ ' + zeta.toFixed(2) + ' · 等待播放';
  }

  el.zeta.addEventListener('input', function () {
    zeta = parseFloat(el.zeta.value);
    el.zetaValue.textContent = zeta.toFixed(2);
    el.state.textContent = 'ζ ' + zeta.toFixed(2) + ' · 等待播放';
    reset();
  });
  el.play.addEventListener('click', run);
  el.reset.addEventListener('click', reset);
  el.presets.addEventListener('click', function (event) {
    var button = event.target.closest('button[data-zeta]');
    if (!button) return;
    zeta = parseFloat(button.dataset.zeta);
    el.zeta.value = String(zeta);
    el.zetaValue.textContent = zeta.toFixed(2);
    reset();
    run();
  });

  el.reduce.addEventListener('change', function () { if (reduced()) run(); else reset(); });
  preference.addEventListener('change', function () { if (reduced()) run(); else reset(); });
  window.addEventListener('pagehide', stop);
  reset();
})();

独立打开，不受文章布局限制 ↗

本文新写的对照实验。它求解真实的弹簧-质量-阻尼系统，k = (2π/response)²、c = 2ζ√k、质量为 1，与被讨论的图标库同一套换算；不用任何 CSS 缓动函数。配色与字体属于实验本身。

本文独立实验本文实验：阻尼比对照

按 旧 pop 0.39 播放一次，再按 smooth 1.00 播放一次。读数里的过冲和来回次数是你要看的两列——前者是幅度，后者是次数；很多「活泼」的错觉其实只发生在前者。

实验给出的几组数字：

ζ	过冲	稳定时间	来回次数
1.00	0.0%	0.59s	0
0.86	0.2%	0.40s	0
0.72	3.2%	0.53s	1
0.39	25.9%	0.85s	3
0.30	36.8%	1.22s	5

仓库文档里写的是 ζ .72 → ≈ 4%、ζ .39 → ≈ 26%、ζ .3 → ≈ 37%。两边对得上，说明这个模型和图标库实际用的是同一套参数。（数字略有出入，是因为仓库文档给的是该阻尼比下的概数，实验固定了 response = 0.40s 后实测更准。）

顺带能看出另一件事：从 0.72 降到 0.39，过冲从 3.2% 涨到 25.9%，稳定时间只从 0.53s 涨到 0.85s。多付出的那 0.32 秒，换来的是八倍的过冲。所以「让它更有弹性」几乎从来不是免费的动作。

阻尼比对照实验停在 ζ 0.39：方块越过标着「目标」的竖线后回落，读数显示过冲 25.9%、稳定时间 0.85 秒、来回 3 次 — 文章里嵌的是同一个实验；这张静态图给不方便动交互的读者（例如系统开启了减少动态）留一份同样的结果。数字来自实验真实运行，不是估算。
本文独立实验本文实验实拍 · 2026-10-19

真正的修法：让代码守住下限

知道了数字，就能定规矩。我最后没有去逐个改那 95 份配方，也没有重写动画引擎——那样要重调的正是最不需要重调的东西。改的是一个数字的取值范围。

规矩写在仓库的第七层运行时 assets/motion-icons-signature.js 里，它明确说明自己「不动引擎的字节」就做三件事。跟阻尼相关的部分是这样：

命名预设全部重新对齐。新增 smooth（ζ 1）、snappy（.86）、bouncy（.72）、quick、glide，对应 SwiftUI 的 .smooth / .snappy / .bouncy；旧的 pop、rebound、swing、shake 只改 ζ，不改刚度。

SwiftUI preset response ζ

.smooth smooth 0.42 s 1.0

.snappy snappy 0.30 s 0.86

.bouncy bouncy 0.40 s 0.72

—（压缩进入） quick 0.16 s 1.0

—（长行程） glide 0.55 s 1.0

重新标定后：snap .82、pop .72、impact .86、rebound .72、settle .88、swing .30、shake .38。
装一个下限治理器。每个动作的 run 和 drive 拿到的上下文里都有一个 to()，它会检查传进来的弹簧对象：只要 ζ 低于 0.7，就地抬到 0.7，同时把这次请求记进 MotionIcon.apple.audit = {floor, clamped, subjects}。命名预设原样放行。逐帧检查器的页眉会打印「收敛 N 次低阻尼请求」。

这一步是关键。它把一条口头约定变成了一件可观测的事实：有多少配方想违规、违规了多少次，都写在运行时的计数器里，不需要人去数配方。
留两个有意的例外。swing（ζ .30）用于自由摆——铃舌、沙漏——shake（ζ .38）只用于报错。规矩里写着它们故意留在下限之下，理由是钟摆本来就该荡，SF Symbols 的 wiggle 也给同样的自由度。

SwiftUI	preset	response	ζ
`.smooth`	`smooth`	0.42 s	1.0
`.snappy`	`snappy`	0.30 s	0.86
`.bouncy`	`bouncy`	0.40 s	0.72
—（压缩进入）	`quick`	0.16 s	1.0
—（长行程）	`glide`	0.55 s	1.0

例外必须写进契约，否则半年后没人记得它是例外，只记得下限是 0.7。

下限管不到的部分

治理器只能拦数字。真正决定一组动效好不好看的，是它拦不住的那几条，所以它们只写成了规则：

一个动作只用一次强调。 先选准那个时刻——沙落进瓶口、令牌被接收——在那里用 bouncy，其余全用 smooth 或 snappy。
不透明度、颜色、描边、姿态变形永远不用弹性的弹簧。
活泼应该来自因果和连续性：手停下时物体有惯性，沙子还在流，工作从一个 agent 交到另一个手上——而不是来自多晃两下。

这三条代码一条也验不了。但它们才是那条下限的意义所在：0.7 解决的是「别失控」，不是「别平庸」。 一个守住了下限、却每个动作都用 bouncy 的界面，会精确地落在最难看的那个位置上——不越界，但处处在强调。

最后一条同样属于契约：减少动态时给正确的终态，而不是停在中间。 上面那个实验里勾选「减少动态」，方块会直接落位、不制造往返，但读数仍然如实报告这条曲线本该有的过冲。

反过来：有些时候该动的是几何

阻尼管的是「弹多少」。它管不了另一种失控——过渡中途换了对象。

仓库里那份连续变形的规范记了一个很具体的失败。Add 图标展开成加号再变成对勾，旧公式把最后一个端点的 Y 和曲线的出口 Y 分开插值，结果在 50% 处，曲线从 (48,45) 水平出去，下一段线却奔向 (52,31)：两个向量的叉积是 -42，接缝处起了折角。

改法是让一整段圆角肘部由同一个参数 t 生成：

js

const x = 60 - 30*t;
const y = 32 - 2*t;
const r = 6*t;
const d = `M${x} ${60-16*t}`
  + `L${x} ${y+r}`
  + `Q${x} ${y} ${x+r} ${y}`
  + `L${60-16*t} ${y}`;

第一条线和圆角垂直进，圆角和最后一条线水平出，切向叉积恒为零，轮廓不用改。

连续变形示例：Add 与 Library 两个对象各取 0/25/50/75/100% 五帧，形状在中间进度上仍是同一条线在走，没有中途换成另一张图 — 2026-10-19 实拍仓库里的 examples/continuous-morph.html。它跑的是生产渲染器，不是另画的示意图；截图静止在四个中间进度上，正是最容易被淡入淡出卖的地方。
本文独立实验本文实拍：apple-motion-icons 仓库 examples/continuous-morph.html · 2026-10-19

上面 Add 的四帧中间进度，形状还是同一条线在走，没有中途换成另一张完成的图。下面 Library 相反：封套保持平面和圆角半径，书页从背后转出来，装订移进书沟而不是淡出，书签沿着封套形状收回。规范里那句话说得直接——对象要一直在场，故事由几何讲，不由不透明度讲。

这两件事放在一起才是完整的约束：该弹的少弹，不该换的别换。 弹簧参数管住前者，几何连续性管住后者，而两者都需要写成能被代码检查或被人名正言顺豁免的条款，而不是留在感觉里。

在线画廊首屏截图，非第三方作品 — 卡片预览用的是同一个站点的截图；源码在 GitHub 上公开，两边是同一套配方。
原作者资料Yhazrin · apple-motion-icons · https://github.com/Yhazrin/apple-motion-icons

画廊里可以按 / 搜索，按用途分组，每个动作都能单独播放，尺寸在 16–96 px 之间调，明暗两套外观都有。想直接看配方，仓库在 GitHub 上是公开的，README、构造规范和逐个对象的词汇表都在里面。

前端 · 设计 · 动效

纸卡动效拆解

打开菜单、翻过卡片、切换场景。先看原样 Demo 和实录，再用一个只改旋转中心的小实验，弄清网页的手感从哪里来。

Yhazrin2026.10.19

把菜单移到角落，点一下。它没有从屏幕正中间凭空冒出来，而是绕着一个角展开。再往下走，一张卡片翻了过去，另一面接着说话。画面里的东西仿佛有厚薄、有正反，也知道自己该从哪里进场。

这些动作并不罕见，难的是让它们属于同一个世界。菜单像纸，内容却像一块发光玻璃；卡片有了背面，文字却在翻转中倒着透出来——只要一处关系不成立，手感就散了。多加一点弹性，通常救不了它。

这篇文章从 playful-motion-patterns 1.1.0 学习包出发。它研究 Maxima Therapy，也附了一份叫 little wonders 的独立演示。下面保留这份演示自己的字体、颜色、插画和交互，不给它换成博客皮肤。我们先看它怎样运动，再把其中一个问题缩小到可以亲手比较。

先玩，再拆

little wonders 学习 Demo 的大字、轮盘场景与独立导航，不是博客界面 — 点击后在独立窗口中操作。字体、颜色、插画和交互保持学习包原貌；它是独立学习示例，不是 Maxima Therapy 网站的源码。
提供的原样素材用户提供的 playful-motion-patterns 1.1.0 · 2026-10-15

打开演示后，可以顺着三个位置看：点 Next world 切换首屏场景；展开 Our world 看纸卡导航；找到 Find your wonder 下的卡组，把一张卡翻过来。完整网页在独立查看器中运行，关掉后回到这里继续读。

如果你现在只想看看运动的节奏，下面是这份 Demo 的一段无声实录。视频适合看先后关系，截图适合停下来找位置；它们不能互相替代。

9 秒看一遍场景切换

画面文字说明

无声实录：学习包 Demo 先显示首屏，点击 Next world 后，圆形场景旋转到下一组内容。字体和插画保持原样。这不是 Maxima Therapy 原站录屏。

直接打开视频 ↗

直接录制学习包自带 Demo 的真实交互；未替换成本站视觉。视频用于先看节奏，完整演示用于亲手操作。

本文独立实验本次从学习包原样 Demo 录制 · 2026-10-19

这里先分清三件事：Maxima Therapy 是研究对象；little wonders 是学习包中的独立示例；后面蓝灰色的旋转中心实验，是本文新写的教学工具。 它们有联系，但不是同一份源码，也不该被说成同一个作品。关于完整项目的制作背景，可以读文末链接的原作者复盘。

菜单展开之前，先决定哪里不能动

一个元素从小变大，读者只会知道“它出现了”。如果它的一角始终钉在同一个地方，剩下的纸面绕着那里转，读者就有了另一种解释：“它原来收在那里，现在被打开了。”

这就是 transform-origin 值得先于 easing 调整的原因。缓动曲线控制速度怎样变化，旋转中心控制物体与空间的关系。后者没确定，前者越夸张，越容易像一张没有重量的贴图。

学习包原样 Demo 中打开的 Our world 纸卡菜单及其背景画面 — 来自学习包原样 Demo 的实际截图，不是 Maxima Therapy 原站截图，也不是新画的一张本站风格示意图。
提供的原样素材playful-motion-patterns 1.1.0，原样运行截图

看截图时可以找两个位置：按钮在哪里，展开后的纸面压到了哪里。再回到演示里收起、展开，留意纸面从哪个角开始走。如果只盯着最终轮廓，就容易漏掉那个让动作成立的固定点。

学习包的历史捕获资料记录，所研究的纸卡导航采用右下枢轴，内部旋转时间线从约 90° 收到约 −4.23°，外层再控制这条时间线的进度。这是一份捕获版本的参数记录，不是本文重新测出的时长或通用配方。 内部时间线的长度，也不等于用户真正等候的时间；还要看它被怎样推进。

换到自己的界面里，不必先复制那几个小数。先把旋转中心画出来，检查展开和收起是否真的绕着它。只要这个关系清楚，幅度小一些也会有手感。

只改一个变量，看看差别

下面的实验有意不复刻完整网页。它只保留一块面板、一个展开动作，以及两种旋转中心。配色和字体属于实验本身，与上面的作品和外面的博客都分开。

只改旋转中心，手感会怎样变化

查看实际运行的源码

实际运行的 CSS

css

/* Geometry only; the shared kit owns typography, controls and working surfaces. */
.lab{max-width:760px;margin:auto}.lab header span{display:none}.controls label{font-size:12px}.reduce{margin-left:auto;display:flex;gap:6px;align-items:center}.scene{height:240px;position:relative}.paper{width:220px;height:164px;position:absolute;left:calc(50% - 110px);top:36px;padding:20px;background:#fff;border:0;border-radius:10px;box-shadow:0 7px 20px #192b4114;transform-origin:100% 100%;transform:rotate(75deg);transition:transform .7s cubic-bezier(.22,1,.36,1)}.paper.open{transform:rotate(-4deg)}.paper-label{font-size:12px;color:var(--jc-muted)}.paper-rule{height:8px;margin:9px 0}.scene .paper p{font-size:20px;line-height:1.4;font-weight:600;margin:0;color:var(--jc-ink)}.pivot{position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;background:#e65d4d;border-radius:50%;outline:3px solid #e65d4d30}.paper.center .pivot{right:calc(50% - 5px);bottom:calc(50% - 5px)}#value{font:12px ui-monospace,monospace;color:var(--jc-muted)}.calm .paper{transition:none}@media(prefers-reduced-motion:reduce){.paper{transition:none}}

实际运行的 JavaScript

js

(() => {
  const paper=document.querySelector('.paper');
  const origin=document.querySelector('#origin');
  const play=document.querySelector('#play');
  const reset=document.querySelector('#reset');
  const reduce=document.querySelector('#reduce');
  const preference=matchMedia('(prefers-reduced-motion: reduce)');
  let open=false;
  const render=()=>{
    paper.style.transformOrigin=origin.value;
    paper.classList.toggle('center',origin.value==='50% 50%');
    paper.classList.toggle('open',open);
    document.documentElement.classList.toggle('calm',reduce.checked||preference.matches);
    document.querySelector('#state').textContent=`旋转中心：${origin.selectedOptions[0].textContent} · ${open?'展开':'收起'}`;
    document.querySelector('#value').textContent=`transform-origin: ${origin.value};`;
  };
  origin.addEventListener('change',render);
  play.addEventListener('click',()=>{open=!open;render();});
  reset.addEventListener('click',()=>{open=false;origin.value='100% 100%';render();});
  reduce.addEventListener('change',render);
  preference.addEventListener('change',render);
  render();
})();

独立打开，不受文章布局限制 ↗

本文单独制作的变量实验，不是原作。它使用自己的中性实验界面；下方源码与实际运行的文件是同一份。

本文独立实验本文实验：旋转中心对照

先保持“右下角”，展开一次；收起，把旋转中心改成“中心”，再展开。面板、角度和过渡曲线没有换，换的只是绕哪里转。右下角更容易读成一个被固定住的铰链；中心更像一块在空中转动的面板。哪一个好，不取决于谁更热闹，而取决于界面想表达什么。

下方展开的 CSS 和 JavaScript 就是这个实验正在运行的文件，不是另摘的一段简化示意代码。想移植时，先读完整文件里的状态更新，再决定留下哪些部分。

这里还有一个容易被忽略的细节：动作允许中途改变主意。 试着连续点“展开 / 收起”。CSS 过渡会从当前插值状态转向新目标，而不是每次跳回第一帧。复杂的 GSAP 时间线也要面对同一个问题：输入会打断动画，不能假设用户总会等它播完。

“减少动态”则换了一道问题：状态是否一定要靠大幅度运动才能说清楚？在这个实验里，缩短或去掉过渡，并不妨碍读者知道面板已展开。完整作品可以有自己的处理策略；教学实验没有替它宣称做过无障碍验证。

翻卡片，不是把一张图片转过去

菜单解决了“从哪里来”，翻卡接着回答“另一面是什么”。

如果只给整个容器加 rotateY(180deg)，前面的字也会跟着转过去；若正反面同时可见，翻到一半还会叠在一起。浏览器并不知道你想做的是纸卡。它只知道一组元素在三维空间里被变换了。

学习包的 little wonders 卡片翻到背面，背面具有自己的排版与内容 — 卡组演示实截图。这里要观察的是前后面的关系，不是把读者的注意力重新拉回博客的按钮和边框。
提供的原样素材playful-motion-patterns 1.1.0，翻卡状态截图

最小的双面结构通常长这样。它是结构示意，不是 little wonders 的源码摘录：

css

.card { perspective: 900px; }
.card__body {
  transform-style: preserve-3d;
  transition: transform 600ms ease;
}
.card__body.is-flipped { transform: rotateY(180deg); }
.card__face { backface-visibility: hidden; }
.card__back { transform: rotateY(180deg); }

perspective 提供观看距离；preserve-3d 保留子元素之间的三维关系；backface-visibility 避免一面的反向文字透出来；背面先转半圈，等整个卡体翻过去时，它才正好朝向读者。这里的 900px 和 600ms 只是说明写法的示例值，不是原作参数。

但视觉结构只完成了一半。背面藏起来时，它的链接和按钮是否还在键盘焦点顺序里？按返回，焦点回到哪里？读屏是否仍会读出被挡住的内容？这些问题不能用“看起来已经背过去了”来回答。实际项目要随状态管理 inert、可见性和焦点，而不是只改一个旋转类名。

卡片也不适合塞下所有正文。若背面需要读很长一段、还要滚动和操作多个按钮，翻面的趣味会变成找内容的阻力。让一张卡回答一个问题，通常比把整篇文章折进去更有效。

画面一起动，为什么反而会显得平？

轮盘切换、文字入场、插画偏移，如果全部同一时刻开始、沿同一个方向走、用同一条速度曲线，画面虽然很忙，空间却可能更平。读者看见的像是一整张截图在移动。

可以先把关系拆成三层：大形状交代场景变化，标题负责阅读入口，小装饰稍晚一点回应。不要把“稍晚”理解成每层统一加一个固定延迟。真正重要的是：哪个动作让人知道场景已经换了，哪个内容现在应该能读，哪个装饰可以不动。

回看上面的九秒视频，先只看大圆，再看字。这样比一次盯着所有元素更容易分辨主次。想检查一张卡的正反关系，就看静态图；想知道场景切换时谁先动，就回到视频或实际演示。选对观察方式，比多放几个 GIF 更有用。

另一个实现陷阱是让几个系统争用同一个 transform。外层负责滚动位移，内层负责 hover 倾斜，图案层负责局部旋转；每层只管一件事，往往比在一条字符串里拼出所有变换更容易维护。要不要增加这些层，应由当前效果决定，而不是预先搭一个庞大的动效框架。

借走机制，别连适用条件一起忘了

这种明亮、夸张的纸卡语言，适合希望人停下来探索的页面。换成结算、搜索结果或后台表格，同样的动作可能会挡住任务。评判它有没有帮助，不是数用了多少个动画，而是问：

展开过程有没有说明入口与内容的关系？
翻面以后，读者是否更清楚“同一对象的另一组信息”？
场景移动有没有提示变化，还是让正文更难读？
用户连续操作、只用键盘或减少动态时，状态还能不能成立？

真正值得带走的是一组约束：有固定点，就围绕它运动；有另一面，就管理正反关系；有前后景，就给运动分工。它们不要求你的页面也变成 little wonders，更不要求文章里的每个作品都长成这个博客的样子。

下一次做菜单，先试着只改旋转中心。下一次做翻卡，先把背面的焦点顺序走通。等这两件小事成立，再去挑弹性、加装饰，选择会清楚很多。

本文学习示例预览，非原作者文章封面 — 卡片预览使用学习 Demo 的截图；链接指向原作者文章，不把两者当成同一个作品。
原作者资料Nicolas Garnier · Codrops · 2026-04-06

资料与边界

本文依据 2026 年 10 月 15 日整理的 playful-motion-patterns 1.1.0 学习包及其历史捕获说明。原样演示的文件校验记录、第三方资源说明和字体许可随演示保留。文中的截图与九秒视频均来自这份学习 Demo 的本次运行，不是 Maxima Therapy 原站录屏；蓝灰色变量实验为本文另写。机制解释和适用性判断是本文的分析，不能当成对原网站所有运行状态的测试结论。

Vord

随手收词

遇到一个词，不必把阅读变成另一项任务。全局快捷键打开 Quick Add，离线释义出现在词下方；确认保存，浮球收回原位。原句和来源可以一起留在词库。

项目原有的收词反馈动效研究

Option + Space · 查词
Return · 保存
Escape · 返回阅读

主动回忆

一轮可以从几个到期词开始。单词与释义的两个方向独立复习；Space 揭晓，Again 或 Known 由你选择。真正忘记的词会再出现，完成一轮不等于每个词都已掌握。

交互示意 · 非真实词库wonder

复习流程示意，不是应用截图

Space · 揭晓
1 · Again
2 / Return · Known

键入练习

选这一轮、到期词，或自己的词库；也可以粘贴、导入完整英文篇章。错误逐字标出，退格修正，完成后重练错词。篇章按顺序分段，不只练开头的一小段。

自己的词库

完整英文篇章

逐字反馈

只重练错处

输入练习路径示意；实际练习在 Vord 中进行

自己的词库
完整英文篇章
逐字反馈
只重练错处

学习记录

短轮复习、听写、输入和口语材料从同一个 Study 入口继续。Today 留下练习日历和真实目标进度，让下一次开始有据可依，也不惩罚偶尔空下的一天。

Vord 首页设计稿

Today
Study
Library

OverLaunch

启动窗口

国服战网入口、已保存的启动配置和当前状态，在一个原生窗口里汇合。熟悉的橙色动作按钮不负责承诺帧率，只负责把你带到下一个清楚的步骤：打开战网，再由官方客户端进入游戏。

原项目素材

原生启动入口
保存的配置
国服战网

容器导入

选择已有完整容器之前，先确认Mac、系统与Rosetta。导入会查找战网和守望先锋，并确认容器位于支持写时复制的同一APFS卷。组件在临时位置准备，游戏文件克隆进独立环境；原来的安装不是直接拿来改。

检查在写入前

写时复制

独立环境

功能机制示意；不是产品实机截图

检查在写入前
写时复制
独立环境

画质配置

自动匹配、流畅优先、均衡、清晰优先与手动，给不同需求一个清楚的起点。推荐看的是设备与像素负担，并不把芯片名称换算成承诺的FPS。更改先留在草稿里，保存后才进入下一次启动。

按负载推荐

允许手动

下次启动生效

功能机制示意；不是产品实机截图

按负载推荐
允许手动
下次启动生效

渲染比例

窗口尺寸决定图像最后放在哪里，3D渲染比例决定先画多少像素。这两件事分开设置，才有清楚的取舍。常见输出预设之外可以自定义；遇到过大的桌面，推荐会转向合适比例的窗口。

1920 × 1080内部渲染尺寸

渲染比例 100%固定 1920 × 1080 输出的数学示意，不是帧率测试。

功能机制示意；不是产品实机截图

输出尺寸
50–100%渲染
17项预设

英雄图标

53个本地英雄图标可以搜索、选择，也可以恢复默认。把偏好留在Dock和正在运行的应用上，而不是改动游戏账号或英雄资料。一个小小的入口，也可以属于你。

原项目素材

本地素材
搜索与恢复
仅外观

帧率分析

手动圈定一段真实游戏过程，再看平均FPS、1%low、P99帧时间与长帧数量。报告同时记录编译相关的长帧，帮助提出更准确的问题；相关并不直接等于原因。少于60秒的样本会明确提示不足。

手动取样

连续帧数据

导出报告

功能机制示意；不是产品实机截图

手动取样
连续帧数据
导出报告

故障诊断

工具箱分别检查运行组件、游戏文件、图形组件、系统图形环境与显示供电。已识别的启动错误会给出对应解释；需要交流时，导出保存在本机的诊断报告，而不是把账号、令牌和原始日志一起交出去。

检查

修复

诊断

功能机制示意；不是产品实机截图

检查
修复
诊断

Apple Motion Icons

动作试验

选一个物件，触发一个真正属于它的动作。解锁、响铃、展开、保存——名称、轮廓与运动，在同一件事上达成一致。

原项目真实配方与演示；不执行真实认证、支付或 AI 请求。

状态反馈

边框回应处理过程，锁扣在成功时打开；失败则给出另一种清楚的反馈。每一个结果都留在自己的状态，不必再靠一行解释补上含义。

原项目真实配方与演示；不执行真实认证、支付或 AI 请求。

连续变形

沿着进度慢慢拖动，圆角与线条一直相连；书页从遮挡后显露，封面仍是同一本书。展开，也能沿同一条路径收回。

原项目真实配方与演示；不执行真实认证、支付或 AI 请求。

界面动效

从查词和收藏，到生成例句、记忆场景与进度反馈，图标陪着一次操作走完，而不是独自循环表演。

原项目真实配方与演示；不执行真实认证、支付或 AI 请求。

手绘图标

图标集

飞碟和火箭向外探索，信封与文件夹收起信息，台灯、打印机和收纳筐留在工作桌上。它们不是十一枚同形按钮，而是十一件可以辨认的东西；共同的墨线与少量颜色，让它们自然待在一起。

打开原始 SVG ↗

原项目素材

11 枚
80 × 80
原生 SVG

几何结构

底座托住灯杆，灯杆连到灯罩后方的颈部，灯泡留在罩内，开口朝向左下。允许线条不完全对称，但每一个部件都应该有连接、有方向。松弛的笔触，不靠失去结构获得。

原项目素材

支撑
连接
内外

路径与层次

后方纸张进入进纸槽，前面的纸从出纸口伸出来，再落到托盘上。机身的顶面、正面和右侧面属于同一个体积；手绘可以有弯曲，但不能让纸张悬空，也不能让接缝失去方向。

原项目素材

后方进纸
同一体积
托盘承接

遮挡关系

火箭的尾翼先画，筒身随后盖住尾翼内缘；喷口最后压住底边，让火焰有了明确的出口。小人的手臂也先于上衣绘制，肩膀藏进袖口。顺序不是文件里的小事，它决定物件看起来是否成立。

原项目素材

后件
主体
前件

尺寸预览

缩小会抹掉装饰，却留下轮廓、重心与关键间隙。把同一枚 SVG 直接放到 40、64 与 96 px，不替它补锐化或额外细节。看得清，再留下一点人的笔迹。

40 px

64 px

原项目素材

40 px
64 px
96 px

SVG 源文件

选择单枚 SVG，或用 sprite 放进已有界面。接着画下一枚时，先定义物体与视角，写出部件关系，安排遮挡，再选择两到四种主体色。结构文件和绘制规范一起交付，让风格可以延续，而不是只能复制。

轮廓、部件、遮挡。

保留可编辑路径，而不是一张放大后模糊的图片。

带走原始 SVG ↓

原项目素材

#ffdc54
#64b7af
#387b77
#df4b39
#f6f1e4
#bcbdb4

MiWarp

工作区

MiWarp 把正在做的目录、会话历史和当前执行放在同一工作台。先回到项目，再继续问题；不需要在散开的终端窗口之间重新拼接上下文。

一个目录可以承载多段会话。把当前任务放在前景，需要时再从历史找回之前的方向，避免让过去的输出淹没眼前的工作。

MiWarp 原生空白首页；不代表正在执行任务

项目目录
会话历史
继续当前工作

主题

从克制的莫兰迪、冷静的北欧，到碳黑玫红与极光青柠，主题改变的不只是一颗按钮。背景的深浅层次、正文与辅助文字、状态色和侧栏，会一起组成完整的配色。

每个主题都有亮、暗两种模式。选择跟随系统时，应用响应系统外观变化；换主题不改变正在阅读的内容，也不把字体当作随机装饰。

Codex

把工作留在现场。

背景、文字、强调与状态，各有层次。

Read / Edit / Bash工具卡片的配色取样

完成等待异常

开始下一段工作 ↑

原始 CSS token · 独立取样，不是应用截图

MiWarp 原始主题 token 取样；介绍页交互样本，非原生截图

12 套内置主题
24 个明暗变体
跟随系统
独立背景 / 文字 / 强调 / 状态 token

色彩配置

高级主题编辑器把颜色按用途分开：六级背景、三组强调色、三层文字，以及运行、完成、失败等状态。需要更安静的面板，或更清楚的文字，可以改对应角色，而不必重做整套主题。

单项覆盖可以撤回，整套配置可以导入、导出。色彩偏好是一组可保存的选择，不是每次打开都重新调一次。

背景

六层空间

文字

主次信息

强调

当前动作

状态

结果与等待

主题变量的角色分组示意；不是原生编辑器截图。

背景层级 × 6
强调颜色 × 3
文字层级 × 3
状态颜色 × 7
单项恢复 / JSON 配置

执行记录

工具事件进入时间线时，名称、状态和摘要各有位置。阅读文件、执行命令、编辑内容，不需要挤成一段难以分辨的终端文字。

概览负责让人快速理解正在发生什么，详情负责保留足够的上下文。想知道一次 Edit 改了哪里，再展开对应内容；不用为了看见过程，始终展开所有输出。

Read读取项目上下文

查看该步工具的参数、过程与结果。这里是呈现机制示意，没有伪造执行日志。

Edit检查文件改动

查看该步工具的参数、过程与结果。这里是呈现机制示意，没有伪造执行日志。

Bash查看命令与输出

查看该步工具的参数、过程与结果。这里是呈现机制示意，没有伪造执行日志。

基于实际源码的交互说明；不是原生运行截图

工具名称与状态
简短过程摘要
按需展开详情

代码变更

Edit 和 Write 有专门的差异展示，原文与变化不必靠记忆比较。需要撤回时，Rewind 从 checkpoint 开始，先尝试预览受影响的文件，再确认操作。

这不是无限制的时光机：预览和按文件选择依赖当前 CLI 支持。遇到不支持的情况，界面有明确退化分支；介绍页不能承诺每个运行时都能做到相同精度。

查看 Diff

选择 checkpoint

预览受影响文件

确认回退

基于实际源码的交互说明；不是原生运行截图

查看 Diff
选择 checkpoint
预览受影响文件
确认回退

会话分支

继续当前会话，保留正在推进的方向；Fork 建立带来源关系的新 run，并复制已有事件，给另一种尝试一个起点。它不是默默把原会话和新会话都变成同时运行的团队。

需要交给另一段会话的，只选那一段文字。选择目标后，转发会作为目标会话的新用户消息发送；上下文的去向由你明确决定。

Resume · 继续方向

Fork · 建立新分支

Forward · 发送选中文字

基于实际源码的交互说明；不是原生运行截图

Resume · 继续方向
Fork · 建立新分支
Forward · 发送选中文字

分屏

分屏工作台提供单、双、三、四面板布局。活动面板承载当前聊天与输入，其余面板展示只读重放内容；选择另一个面板，再把它带到当前工作位置。

这让参考与执行能留在同一视野里，也保留了清楚的操作焦点。多个面板，不等于四个输入同时争抢注意力。

基于实际源码的交互说明；不是原生运行截图

single
dual
triple
quad
一个活动面板

可视化输出

聊天内容不止段落。源码中登记了 Mermaid、Vega-Lite，以及进度、KPI、时间线和思维导图等结构化内容；合适的输出能成为可阅读的图，而不只是一段 JSON。

流式文字还在到达时，避免不断重建复杂图形；内容稳定后再展示结构。图形服务于理解，而不是把每一句回答包装成仪表盘。

Mermaid

Vega-Lite

进度

KPI

时间线

思维导图

基于实际源码的交互说明；不是原生运行截图

Mermaid
Vega-Lite
进度
KPI
时间线
思维导图

窗口材质

外观可以分层选择。颜色主题决定界面的配色；macOS 的原生窗口材质决定侧栏如何透出背后的环境；UI 缩放与质量、平衡、性能模式则照顾实际工作密度。

Sidebar 和 HeaderView 是原生材质选项，不是一张透明 PNG。网页说明可以解释层次，但不能拿 CSS 模糊冒充原生窗口效果。

主题颜色

原生窗口材质

独立 UI 缩放

质量 / 平衡 / 性能 / 自动

窗口层级示意；原生材质效果依赖 macOS 环境

主题颜色
原生窗口材质
独立 UI 缩放
质量 / 平衡 / 性能 / 自动

World

空岛

欢迎页不急着列出全部作品。方块地形先组成一个可以辨认的地方，再让工位、站点和实验逐段进入视野。向下滚动，看的不是一张越来越长的清单，而是同一座世界换一个角度。

原项目素材

空间入口
连续镜头
真实 WebGL

四季

按下东侧季候环，春夏秋冬依次推进。新的颜色沿地形铺开，深处的方块稍后响应；花瓣、萤火、落叶和雪花跟着季节更替。上一轮还未完成时，环会给出反馈，而不是叠加另一场变化。

花瓣 · 鸟

原项目配色取样；地形传播机制见正文。

功能机制示意；不是产品实机截图

从东侧传播
深度延迟
季节生态

昼夜

白天的陶土色过渡到夜里的蓝灰。天空、灯光、曝光与地形侧面的色层一起变化，高处仍保留更亮的轮廓。昼夜不打断已经选择的季节，而是叠加另一种观看方式。

日光

暮色

夜间

功能机制示意；不是产品实机截图

天空
主辅光
地形色层

入口

Studio、Play、Skills 与 Sites 各自对应一种组合。地形方块在同一个结构里重排，选中的入口带出自己的观察角度；也可以拖动结构，绕过正面看看侧面。最终，它仍是一个可以去往真实页面的入口。

同一组方块

四种组合

直接进入

功能机制示意；不是产品实机截图

同一组方块
四种组合
直接进入

声音

先播放一段内置节拍。低频给地形连续的起伏，拍点在不同位置激起脉冲，高频则点亮局部色块。同一段声音，拆成几种能被看见的动作。停止播放，场景也跟着安静。

40–160 Hz · 低频

2–8 kHz · 高频

节拍脉冲

功能机制示意；不是产品实机截图

40–160 Hz · 低频
2–8 kHz · 高频
节拍脉冲

岛屿剖面

翻看失败层，把成品背后的过程留在同一个空间里。实验室通往原型与失败样本，公开笔记记录方法、判断与复盘。结束探索时，不必只带走一个成品链接，也可以继续看它怎么成为现在这样。

原型

判断

复盘

功能机制示意；不是产品实机截图

原型
判断
复盘

Reapple Music

MidtownAdam Burgess · Overwatch · Blizzard Entertainment

0:00−1:57

播放器

让封面先占据视线，再让信息围绕它排列。小空间保留核心操作，大空间展开进度与辅助功能，音乐不必挤在一排按钮之间。

End Credits (Xeuphoria Piano Ver.) 专辑封面 — End Credits (Xeuphoria Piano Ver.)

原项目素材

播放控制

播放和暂停不是突然换图：两层符号相互接替。上一首与下一首则用有方向的箭头交接，让手势与结果之间有一段看得见的联系。

点击查看同一套播放 / 暂停动效

图形演示，不播放音频。实际播放在页首。

原项目素材

歌词与队列

自动跟随时，让当前歌词清晰；想回读时，滚动把整段交还给你。展开队列安排接下来的音乐，收起便回到原来的歌词阅读状态。

当前一句

歌词视图

接着听

待播队列

功能机制示意；不是产品实机截图

迷你播放器

收进一枚悬浮播放胶囊。34pt 专辑封面、清楚的歌名和常用播放动作，仍然连接网易云本来的操作。展开与收起，听歌都继续。

Midtown700 × 54 pt

功能机制示意；不是产品实机截图