css-语音的声波和水波效果

最近在做语音识别，遇到两个css效果感觉以后会有用就记录一下。用到了vue的class和style动态绑定功能。vue class与style绑定

声波效果

长按的时候出现蒙层，中间出现声波，松开消失。

  <view class="wrap">
    <view class="mask" :style="displayStyle">
      <sound-wave></sound-wave>
    </view>
   
    <view class="paster">
      <view class="paster-body" @tap="handleClick" @touchStart="touchStart" @touchEnd="touchEnd">
        <image :src="https://juejin.cn/post/imageSrc" class="paster-image" />
        <image src="https://juejin.cn/assets/speaking.png" style="display: none;" />
        <view class="paster-text">智能导诊</view>
      </view>
    </view>
  </view>
复制代码

paster是按钮部分，mask是蒙层，兄弟组件关系。

    touchStart(event) {
      this.imageSrc = '../../assets/speaking.png'
      this.displayStyle = { display: 'block' } // 展现蒙层
    },
    touchEnd(event) {
      clearInterval(timer)
      this.imageSrc = '../../assets/microphone.png'
      this.displayStyle = { display: 'none' } // 隐藏蒙层
    },
复制代码

sound-wave是网上找的css例子
sound-wave.vue

<template>
  <view class="loader">
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
    <view class="span"></view>
  </view>
</template>

<script>
import './sound-wave.less'
  export default {
    name: '',
    data() {
      return {
        
      }
    }
  }
</script>
复制代码

sound-wave.less

.loader {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 175px;
  height: 100px;
  display: flex;
  justify-content: center;
}
.loader .span {
  display: block;
  background: #ccc;
  width: 7px;
  height: 10%;
  border-radius: 14px;
  margin-right: 5px;
  float: left;
  margin-top: 25%;
}
.loader .span:last-child {
  margin-right: 0px;
}
.loader .span:nth-child(1) {
  animation: load 2.5s 1.4s infinite linear;
}
.loader .span:nth-child(2) {
  animation: load 2.5s 1.2s infinite linear;
}
.loader .span:nth-child(3) {
  animation: load 2.5s 1s infinite linear;
}
.loader .span:nth-child(4) {
  animation: load 2.5s 0.8s infinite linear;
}
.loader .span:nth-child(5) {
  animation: load 2.5s 0.6s infinite linear;
}
.loader .span:nth-child(6) {
  animation: load 2.5s 0.4s infinite linear;
}
.loader .span:nth-child(7) {
  animation: load 2.5s 0.2s infinite linear;
}
.loader .span:nth-child(8) {
  animation: load 2.5s 0s infinite linear;
}
.loader .span:nth-child(9) {
  animation: load 2.5s 0.2s infinite linear;
}
.loader .span:nth-child(10) {
  animation: load 2.5s 0.4s infinite linear;
}
.loader .span:nth-child(11) {
  animation: load 2.5s 0.6s infinite linear;
}
.loader .span:nth-child(12) {
  animation: load 2.5s 0.8s infinite linear;
}
.loader .span:nth-child(13) {
  animation: load 2.5s 1s infinite linear;
}
.loader .span:nth-child(14) {
  animation: load 2.5s 1.2s infinite linear;
}
.loader .span:nth-child(15) {
  animation: load 2.5s 1.4s infinite linear;
}
@keyframes load {
  0% {
      background: #ccc;
      margin-top: 25%;
      height: 10%;
  }
  50% {
      background: #444;
      height: 100%;
      margin-top: 0%;
  }
  100% {
      background: #ccc;
      height: 10%;
      margin-top: 25%;
  }
}
复制代码

水波效果

水波的效果主要是在paster-body上再加一个ripple的样式，ripple设置了before和after伪类，波纹就用border实现，动效就用animation实现。

    <view class="paster">
      <view :class="[isActive ? 'ripple' : '', 'paster-body']" @tap="handleClick" @touchStart="touchStart" @touchEnd="touchEnd">
        <image :src="https://juejin.cn/post/imageSrc" class="paster-image" />
        <image src="https://juejin.cn/assets/speaking.png" style="display: none;" />
        <view class="paster-text">智能导诊</view>
      </view>
    </view>
复制代码

css

.ripple::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  border: 10px solid rgba(0, 110, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 2s linear 1s infinite;
}
.ripple::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  border: 10px solid rgba(0, 110, 255, 0.8);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 2s linear 1s infinite;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  25% {
    transform: scale(1.25);
    opacity: 0.1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.3;
  }

  75% {
    transform: scale(1.75);
    opacity: 0.5;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}
复制代码

长按和松手的时候修改isActive的状态即可

    touchStart(event) {
      this.isActive = true
    },
    touchEnd(event) {
      this.isActive = false
    },
复制代码