使用TweenMax的加载点动画再次显示后失真问题求助

你的问题根源在于每次调用showDots()时都会添加新的无限循环动画，但之前的动画没有被清除，导致多个动画叠加作用在同一个点元素上，第二次显示时元素的位置、缩放等属性被多个动画同时修改，自然就会出现拥挤、失真的情况。

下面是具体的修复方案：

核心修改点 #

• 存储动画实例，方便后续清除
• 在隐藏动画时主动终止所有相关TweenMax动画
• 每次显示动画前确保旧动画已被清除

修改后的JavaScript代码 #

// 全局存储动画实例，方便后续清除
let dotToAnimation;
let dotFromAnimation;

function hideDots(){ 
  const dots = document.querySelector('.dotContainer'); 
  // 先清除所有相关动画，避免残留
  if (dotToAnimation) dotToAnimation.kill();
  if (dotFromAnimation) dotFromAnimation.kill();
  
  dots.style.opacity = 0; 
  dots.addEventListener('transitionend', hideDotsAnime); 
  function hideDotsAnime() { 
    dots.style.display = "none"; 
    dots.removeEventListener("transitionend", hideDotsAnime); 
  } 
} 

function showDots(){ 
  // 先清除可能存在的旧动画，确保新动画是唯一的
  if (dotToAnimation) dotToAnimation.kill();
  if (dotFromAnimation) dotFromAnimation.kill();
  
  // 存储新的动画实例
  dotToAnimation = TweenMax.staggerTo(".dots",2,{
    x:220,
    backgroundColor:'white',
    repeat:-1,
    ease:SlowMo.ease.config(0.5,0.4,false)
  },0.4); 
  
  dotFromAnimation = TweenMax.staggerFrom(".dots",2,{
    opacity:0,
    scale:0.7,
    repeat:-1,
    ease:SlowMo.ease.config(0.5,0.4,true)
  },0.4); 
  
  const dots = document.querySelector('.dotContainer'); 
  dots.style.display = "block"; 
  setTimeout(() => dots.style.opacity = 0.75, 200); 
} 

setTimeout(() => showDots(), 2500); 
setTimeout(() => hideDots(), 5900); 
setTimeout(() => showDots(), 10000);

CSS和HTML代码保持不变 #

body{ background-color: black } 
.dotContainer { 
  background-color: transparent; 
  position: absolute; 
  top: 60vh; 
  left: 42vw; 
  transform: translate(-50%,-50%); 
  display: none; 
  transition: all 0.5s linear; 
  z-index: 11; 
} 
.dots { 
  position: absolute; 
  width: 1em; 
  height: 1em; 
  border-radius: 50%; 
  background-color: #e2daeb; 
  opacity: 0.8; 
}

<script SRC="https://langfox.ir/english/TweenMax.min.js" TYPE="text/javascript"></script> 
<div class="dotContainer"> 
  <div class="dots"></div> 
  <div class="dots"></div> 
  <div class="dots"></div> 
  <div class="dots"></div> 
  <div class="dots"></div> 
</div>

为什么这样修复？ #

TweenMax的repeat:-1会创建无限循环的动画，这些动画会一直运行直到你主动调用.kill()方法终止它们。之前的代码中，隐藏加载点时只是修改了DOM的display和opacity，但后台的动画还在持续修改元素的x位置、缩放等属性。当你第二次调用showDots()时，又添加了新的动画，多个动画叠加就会导致元素的属性计算混乱，出现你看到的拥挤、失真现象。

通过存储动画实例并在合适的时机kill它们，就能确保每次显示加载点时，只有一组动画在作用，从而保证动画的流畅性和正确性。

内容的提问来源于stack exchange，提问作者Sara Ree