如何编写实现视口边缘循环动画的 JavaScript 动画教程？

本文共计1184个文字，预计阅读时间需要5分钟。

通过滚动事件与模型运算精确控制一个+div+元素的四周移动，避免常见边界判断错误，提供高性能、无跳变的纯+css+transform+和+position+实现方案。

要让一个元素沿浏览器视口边缘（顺时针：顶部→右侧→底部→左侧→顶部…）平滑、无缝地循环移动，关键在于将滚动位置映射为周期性路径坐标，而非依赖易出错的 getBoundingClientRect() 实时边界比较（如原代码中 rect.bottom == window.innerHeight 在高 DPI 或缩放下极易失效，且无法处理滚动抖动与异步渲染延迟）。

核心思路是：将整个运动路径视为一个闭合矩形周长，其总长度为
2 × (可用垂直距离 + 可用水平距离)，其中

• 可用垂直距离 = window.innerHeight − 元素高度（即从顶边到底边可移动的 Y 范围）
• 可用水平距离 = window.innerWidth − 元素宽度（即从左边到右边可移动的 X 范围）

利用 scrollY 对该周长取模，即可获得当前在单圈路径中的相对位置 position；再通过分段逻辑将其解构为当前所处边（上/右/下/左）及对应坐标偏移。