纯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中找到需要操作的类。当然你可以自己用其它方式获取。
然后就能看到如下效果:
结尾
这篇文章没多大技术含量，主要就是我自己记录下思路。