这个问题与 Spine Web Components 的 offscreen behavior（离屏行为）设置有关。
当 Web Component 滚动到屏幕外时，默认情况下会暂停动画更新（offscreen="pause"）。当它重新回到可见区域时，动画会从暂停的位置继续播放，而不是跳到应该播放到的时间点，这就导致了多个相同动画之间的不同步。
解决方法：
在你的 <spine-skeleton> 标签中添加 offscreen="update" 或 offscreen="pose" 属性：
<spine-skeleton
atlas="your-atlas.atlas"
skeleton="your-skeleton.skel"
animation="your-animation"
offscreen="update"
></spine-skeleton>
三种 offscreen 模式的区别：
offscreen="pause"（默认）：滚动到屏幕外时完全暂停，包括 AnimationState 更新和 Skeleton 更新offscreen="update"（推荐）：即使在屏幕外也继续更新动画状态，但不调用 updateWorldTransform（最节省 CPU）offscreen="pose"：即使在屏幕外也执行所有更新函数
对于你的同步需求，使用 offscreen="update" 是最佳选择。这样即使元素滚动到屏幕外，动画时间轴仍会继续前进，当重新进入视口时就能保持同步。
