用 JavaScript 模拟的 90% 相似度 macOS Dock 放大效果

预览： （ https://www.zhihu.com/pin/1179182286955741184 ）

之前在网络上找的都是模仿得很不像的；但这也证明 Apple 一开始有多细腻。

主要的细节是：

• 图标的缩放系数 ∈ [0, 1)为关于 event.clientX 与左边距的差 l′、图标宽度 w′、高度 h′ 的余弦的积分，即

(l, w) = (l′, w′) / h′,
r = l + w,
a = 8 / 9,
l, r ∈ [-3 / a, 3 / a]（超出以限定极值计）,
k = ∫_l^r {0.5 cos(a x) + 0.5} / w.
// 分割线的相对宽度 w 是 0.5 h，也要考虑缩放

设缩放最大高度为 hm′，则实际宽度为 k * (hm′ - h′) + h′

​　  我之前试过正态分布曲线、三次绝对值的类正态曲线，但是似乎并不对；网上有的甚至直接用线性变化

• 图标不足以形成一个完整的钟形时，整体水平上有一段偏移 offset 来保证至少有一个边的位置是恒定的；
  即假设左右两端各额外有 4 个图标，分别计算左侧 4 个额外图标的理论宽度总和 m 和右侧 4 个总和 p，则
  offset = 0.5 * (m - p)

• 鼠标进入和移出的瞬间有 0.1s 的 transition，但是这个的效果有点 bug （视频中有卡顿的一些地方）

目前在尝试用 CSS 和 JS 模拟 macOS 的 UI

源码太烂就不放了 ==