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

标签： javascripthtmlcssgsap

Answer 1

通过删除 2 divs 并将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">