【随手小记】实现语音录入动画

导读：手撸一个语音录入竖线动画、高低错落（非实时的）

1、实现页面的竖线布局

1.1 array.fill(value[,start[,end]]),

填充数组，简单来说，就是原来的数组从 索引值 start 到 end-1 的全部元素变成传入的value,直接作用在原数组不创建新数组。

[1,23,333].fill(100,0,2) // [100, 100, 333]

[1,23,333].fill(100)  // [100, 100, 100]

1.2 生成一个长度为4的空数组，占位

new Array(4).fill('')  // ['','','','']

<template>
  <div class="container">
    <div
      v-for="(item, idx) in new Array(10).fill('')"
      :key="idx"
    ></div>
  </div>
</template>

2、实现竖线高度波动的动画

动画名 wave

@keyframes wave {
  0% {
    height: 0%;
  }
  20% {
    height: 50%;
  }
  50% {
    height: 100%;
  }
  80% {
    height: 50%;
  }
  100% {
    height: 0%;
  }
}

3、动画延时形成参差

.container {
  width: 92px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  > div {
    height: 100%;
    width: 1px;
    background: #8e95ae;
    border-radius: 50px;
    vertical-align: middle;
    display: inline-block;

    &:nth-child(5n + 1) {
      animation: wave 0.6s infinite 0.1s;
    }
    &:nth-child(5n + 2) {
      animation: wave 0.6s infinite 0.3s;
    }
    &:nth-child(5n + 3) {
      animation: wave 0.6s infinite 0.5s;
    }
    &:nth-child(5n + 4) {
      animation: wave 0.6s infinite 0.6s;
    }
    &:nth-child(5n + 5) {
      animation: wave 0.6s infinite 0.7s;
    }
  }
}

4、最后，封装组件

将竖线的条数count，线条颜色bgColor，线条宽度width 作为props参数，传递给组件。
即可得到一个任意粗细，条数，颜色的语音动画。

<template>
  <div class="container">
    <div
      :style="{ backgroundColor: bgColor, width: width + 'px' }"
      v-for="(item, idx) in new Array(count).fill('')"
      :key="idx"
    ></div>
  </div>
</template>