javascript - 修改这些简单的加载点

这是使用 TweenMax 库创建简单加载点动画的代码。

TweenMax.staggerTo(".dots", 2, {
  x: 220,
  backgroundColor: 'white',
  repeat: -1,
  ease: SlowMo.ease.config(0.5, 0.4, false)
}, 0.4);
TweenMax.staggerFrom(".dots", 2, {
  opacity: 0,
  scale: 0.7,
  repeat: -1,
  ease: SlowMo.ease.config(0.5, 0.4, true)
}, 0.4);

html {
  width: 260px;
  height: 32px;
  overflow: hidden;
}

body {
  background-color: transparent;
  text-align: center;
  padding: 50px;
}

.container {
  background-color: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dots {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #d0c9d8;
  opacity: 1;
  left: -120px;
}

.link {
  position: absolute;
  bottom: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  text-decoration: none;
}

<div class="container">
  <div class="dots"></div>
  <div class="dots"></div>
  <div class="dots"></div>
  <div class="dots"></div>
  <div class="dots"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<script src="script.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

如您所见，有 5 个点在动画中。 但我想将点数减少到 3 。

删除 2 个 div 会在即将出现的动画点和淡出的动画点之间创建一个很长的空间......

最佳答案

通过删除 2 个 div 并将 TweenMax 代码更新为:

// Change ease:SlowMo.ease.config Power from 0.4 to 0.6
// Change stagger from 0.4 to 0.66
TweenMax.staggerTo(".dots",2,{x:220,backgroundColor:'white',repeat:-1,ease:SlowMo.ease.config(0.5,0.6,false)},0.66);
TweenMax.staggerFrom(".dots",2,{opacity:0,scale:0.7,repeat:-1,ease:SlowMo.ease.config(0.5,0.6,true)},0.66);

您可以通过 3 点获得类似的结果:

TweenMax.staggerTo(".dots", 2, {
  x: 220,
  backgroundColor: 'white',
  repeat: -1,
  ease: SlowMo.ease.config(0.5, 0.6, false)
}, 0.66);
TweenMax.staggerFrom(".dots", 2, {
  opacity: 0,
  scale: 0.7,
  repeat: -1,
  ease: SlowMo.ease.config(0.5, 0.6, true)
}, 0.66);

html {
  width: 260px;
  height: 32px;
  overflow: hidden;
}

body {
  background-color: transparent;
  text-align: center;
  padding: 50px;
}

.container {
  background-color: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dots {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #d0c9d8;
  opacity: 1;
  left: -120px;
}

.link {
  position: absolute;
  bottom: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  text-decoration: none;
}

<div class="container">
  <div class="dots"></div>
  <div class="dots"></div>
  <div class="dots"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<script src="script.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

关于javascript - 修改这些简单的加载点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56516165/