周期回绕

Periodic wrap · wrap-modulo

把任意正负位置折回一个周期，循环列表才不会在负数端出错。

JavaScript 的 % 保留被除数的符号，-0.2 % 1 仍是负数。循环索引直接用它会落到列表外；双重取余能得到 0…周期，中心回绕则给出距中间那一份的最短位移。

公式

wrap(x,p) = ((x % p) + p) % p
centered(x,p) = wrap(x + p/2,p) − p/2

参数

	本页默认	成熟实现
period p	1	GSAP `wrap(min,max,value)`周期必须大于零。
centered	[−p/2, p/2)	our `centred()`在视觉中心附近选最近的副本。

怎样做好

负值也要回到合法索引；GSAP 的 wrap() 同样用了双重取余。GSAP src/gsap-core.js:557–560
连续滚动时保留未回绕的原始位置，只在取索引或排布时回绕。www-motion/rewrite/formation/geometry.js:44–49
需要最短的中心位移时用中心回绕；我们的运行时把它命名为 centred。www-motion/rewrite/lib/case-runtime.js:4–5

在我们的案例里

32 个案例用到周期回绕。formation 在环形布局里回绕浏览位置，也在横向布局里用中心回绕算卡片位移；这两个输出区间服务于不同的排布问题。

参考实现 · basics.js

/** x folded into [0, period) — also for negative x, unlike `%`. */
export const wrap = (x, period) => ((x % period) + period) % period;
/** x folded into [-period/2, period/2): "how far from the centre copy". */
export const wrapCentered = (x, period) => wrap(x + period / 2, period) - period / 2;

周期回绕

公式

参数

怎样做好

在我们的案例里

出现在 32 个案例

参考实现 · basics.js

相关