CSS3动画实现多个跳动小球（语音输入动画）

VUE使用CSS3动画实现多个跳动小球（语音输入动画）

之前实习期间，有做过一个需求，安卓端嵌H5页面，实现语音输入并包含输入时动画，跳动的小球。通过查阅各种资料，根据实际需求场景，最终实现了其功能。在此便回顾记录一下吧。

单个小球无限跳动

首先，实现单个小球跳动。
分析： 小球起始位置在顶部，中间时间段到底部，最后又回到顶部，并且是无限循环的。通过相对定位与CSS3的关键帧结合实现。

<div class="ball"></div>

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  animation-name: bouncing; // 动画名称
  animation-duration: 1.6s; // 单次动画持续时长
  animation-iteration-count: infinite; // 动画无限循环
  background: rgb(244, 7, 7);  // 小球背景色
}

// 关键帧动画
@keyframes bouncing {
  0% {
    top: 0px; // 初始位于顶部
  }

  50% {
    top: 100px; // 中间位于底部
  }

  100% {
    top: 0px; // 最终回到顶部
  }
}

多个小球跳动

分析： 多个小球同时跳动，相对定位需要left不相同，其次每个小球动画开始有时间差，其次就是小球颜色了。

/** balls = [1,2,3,4,5]  多个小球 */
<div v-for="ball in balls" :key="ball" :class="['ball', `ball${ball}`]"></div>

// 公共样式抽离
.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  animation-name: bouncing; // 动画名称
  animation-duration: 1.6s; // 单次动画持续时长
  animation-iteration-count: infinite; // 动画无限循环
}

.ball1 {
  @extend .ball;
  left: 0;
  background: rgb(244, 7, 7);

}

.ball2 {
  @extend .ball;
  animation-delay: 0.25s; // 动画延迟
  left: 30px;
  background: rgb(16, 106, 241);
}

.ball3 {
  @extend .ball;
  animation-delay: 0.5s; // 动画延迟
  left: 60px;
  background: rgb(251, 236, 13); 
}

.ball4 {
  @extend .ball;
  animation-delay: 0.75s; // 动画延迟
  left: 90px;
  background: rgb(233, 23, 233); 
}
.ball5 {
  @extend .ball;
  animation-delay: 1.0s; // 动画延迟
  left: 120px;
  background: rgb(6, 247, 6); 
}

// 关键帧动画
@keyframes bouncing {
 0% {
    top: 0px; // 初始位于顶部
  }

  50% {
    top: 100px; // 中间位于底部
  }

  100% {
    top: 0px; // 最终回到顶部
  }
}

Demo

分析： 绑定事件监听，按钮长按动画显示，按钮松开动画隐藏。
最后，就是投入使用，看一下实现的效果了。

<el-button id="bouncingBallBtn">语音录入</el-button>
 <bouncing-ball v-if="showBouncing" />

/** data showBouncing: false */
mounted() {
	let theBouncingBtn = document.getElementById("bouncingBallBtn");
	// 移动端
	theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
	theBouncingBtn.addEventListener("touchend", this.endBouncing, false);
	
	// pc端
	theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
	theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
}
  /** 动画显示 */
 startBouncing(event) {
   event.preventDefault();
   this.showBouncing = true;
 },
 /** 动画隐藏 */
 endBouncing(event) {
   event.preventDefault();
   this.showBouncing = false;
 },