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">

修改这些简单的加载点

1 个答案: