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

Question

这是使用 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 在即将到来的动画点和正在淡出的动画点之间创建了一个很长的空间...

Answer 1

通过删除 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">