纯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来画,然后四分之一圆这样来。

然而对比一下你可以看见:
纯css3配合vue实现微信语音播放效果

这两者非常的不像。。。

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

于是直接去codepen搜索arc。

找一个类似弧形。

之后就能画出类似这种:

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

直接来贴成品代码:

.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中找到需要操作的类。当然你可以自己用其它方式获取。

然后就能看到如下效果:

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

结尾

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

上一篇:微信h5页面audio标签在ios下不能自动播放


下一篇:html5的audio实现高仿微信语音播放效果Demo