纯css3配合vue实现微信语音播放效果

前言

每次写点东西都扯两句-0-，这几天一半精力放在移动端，一半维护之前的项目。书也少看了，不过还好依旧保持一颗学习的心。对于css3我是之前有专门整理过的，因此对于原理之前也算了解。今天是项目中遇到一个效果，来整理一下。

正文

首先我们可以找到微信的语音播放效果。这里自行打开手机微信进行查看。之前后台提起用gif动画，但是对于gif动画有两个难点：1.谁来画？(抱歉这种东西没有设计师来搞前端是不做的。)2.移动端你跟我提用gif?

很显然，必须用css3来搞。不过之前写js写的多了，发现css3有点生疏。但是基本的搜索能力还是有的。找到Loader.css看下基本布局，然后找mdn文档翻翻。基本思路就确定下来了。

先来看代码：

 <div class="cricleplay"   v-on:click="audio" status="stop" no="1">
 	 <div class="small"></div>
 	 <div class="middle stopanimate"></div>
 	 <div class="large stopanimate"></div>
 </div>

用一个cricleplay来包含，然后你看一下语法可能就明白我已经升级vue版本到1.0.8了。因为移动端不想再包含其他的库，于是写原生的js操作dom也花了蛮多时间去熟悉。。。后来发现zepto.min.js其实挺小。然后就替换了一部分。

刚开始考虑的是直接用Border来画，然后四分之一圆这样来。

然而对比一下你可以看见：

这两者非常的不像。。。

于是应该考虑如何画一个弧形，然而在google和百度上找不到。

于是直接去codepen搜索arc。

找一个类似弧形。

之后就能画出类似这种:

直接来贴成品代码：

.small{
  width: 20px;
  height: 20px;
  border-style: solid;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
  color:#A2A2A2;
}

.middle{
  width: 30px;
  height: 30px;
  border-style: solid;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
  margin-left: -22px;
  animation: show2 3s ease-in-out infinite;
  opacity: 1;
  color:#A2A2A2;
}
@keyframes show2 {
  0% { opacity: 0;}
  30% { opacity: 1;}
  100% { opacity: 0;}
}
.cricleplay{
	width: 100%;
}
.large{
  width: 40px;
  height: 40px;
  border-style: solid;
  border-top-color: transparent 大专栏  纯css3配合vue实现微信语音播放效果;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
  margin-left: -32px;
  animation: show3 3s ease-in-out infinite;
  opacity: 1;
  color:#A2A2A2;
}
@keyframes show3 {
  0% { opacity: 0;}
  60% { opacity: 1;}
  100% { opacity: 0;}
}

当然你也可以戳这里看更加直观的效果。

对于这些css3是没什么好讲的，看下代码就能直接理解思路。比较需要时间调试的是动画补间。

然后我们就获取到一个能够不断播放的语音效果。但是我们是需要能够在点击之后才播放。点击其它或者再次点击动画应该消失。因此我们可以把整个效果配上动作处理写成一个vue组件。不过我这里直接从项目中提取部分。

来看代码:

// 添加、移除、检测 className
		function hasClass(element, className) {
			var reg = new RegExp('(\s|^)'+className+'(\s|$)');
			return element.className.match(reg);
		} 

		function addClass(element, className) {
			if (!hasClass(element, className))
			{
				element.className += " "+className;
			}
		} 

		function removeClass(element, className) {
			if (hasClass(element, className)) {
				var reg = new RegExp('(\s|^)'+className+'(\s|$)');
				element.className = element.className.replace(reg,' ');
			}
		}

上面这些是我之前打算纯js处理dom的操作class的方法。

对于让infinite动画能够中途停止，尤其是在移动端。我一开始思路是添加一个class设置animation-iteration-count为0.在chrome调试的时候是可行的。然而在移动端它是不能够停止的。

因此google了一下方案。

最终采用的方案是:

.stopanimate{
		-moz-animation-name: none;
	-webkit-animation-name: none;
	-ms-animation-name: none;
		animation-name: none;
}

将动画名称给清除了。

然后很简单就是对应的动画添加样式或者删除样式

 	addClass(that.currentparent.children[1],"stopanimate");
 	addClass(that.currentparent.children[2],"stopanimate");
 	addClass(event.children[1],"stopanimate");
 	addClass(event.children[2],"stopanimate");

因为我用的是vue，在methods中处理时能获取到event，然后event中找到需要操作的类。当然你可以自己用其它方式获取。

然后就能看到如下效果:

结尾

这篇文章没多大技术含量，主要就是我自己记录下思路。