CSS動畫效果——語音播放小喇叭

寫業務代碼常常會碰到要本身實現一些設計交給的小動畫，今天咱們就來看下小喇叭那種相似倒過來的wifi圖標同樣的效果：css

語音播放效果

對於這個有幾種實現方案：html

一種是直接把圖標.png文件放在下面，而後再在上面覆蓋一層跟它弧度類似的圓形div，經過css的animation去控制那個覆蓋的div從左向右移動，從而實現出這種效果（其實仍是有區別的，用div控制移動就會出現一個一個逐漸出現且，會同時消失的場景，而不是這種波浪式的遞推）前端

另一種是把這個圖標切分紅三塊，經過佈局調整每一個小圖標的間距，而後經過js去控制每一個小圖標的出現順序以及時間，這種方法的好處就是很靈活，並且代碼編寫起來也比較直觀。html5

可是咱們做爲一個前端攻城獅不能老寫偏中後臺的邏輯代碼，總得學會用css裝飾本身吧，更況且如今css3的出現，頁面的動畫變得能夠像ppt同樣舒服了。因此我介紹下最後一種方式，就是用div塊去設定border而後再給div一個border-radius:50%，作出三個圓調整好位置，而後用一個矩形的div轉變角度去蓋住這三個圓，最後經過css3的animation去控制漸進漸出，從而實現上圖的效果！jquery

話很少說上代碼：css3

div結構

css代碼外部div塊以及圓環通用樣式

css代碼每一個小環的大小、位置以及動畫定義

漸進漸出動畫效果定義

文末附上完整代碼：瀏覽器

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>微信語音樣式</title>
    <style type="text/css"> *{ margin: 0; padding: 0; } .box { width: 120px; height: 120px; box-sizing: border-box; position: relative; margin: 50px auto; } .wifi-symbol { width: 50px; height: 50px; box-sizing: border-box; overflow: hidden; transform: rotate(135deg); } .wifi-circle { border: 5px solid #999999; border-radius: 50%; position: absolute; } .first { width: 5px; height: 5px; background: #cccccc; top: 45px; left: 45px; } .second { width: 25px; height: 25px; top: 35px; left: 35px; animation: fadeInOut 1s infinite 0.2s;. } .third { width: 40px; height: 40px; top: 25px; left: 25px; animation: fadeInOut 1s infinite 0.4s; } @keyframes fadeInOut { 0% { opacity: 0; /*初始狀態 透明度爲0*/ } 100% { opacity: 1; /*結尾狀態 透明度爲1*/ } } </style>
</head>
<body>
    <div class="box">
        <div class="wifi-symbol">
            <div class="wifi-circle first"></div>
            <div class="wifi-circle second"></div>
            <div class="wifi-circle third"></div>
        </div>
    </div>
</body>
</html>複製代碼

方案二

微信語音播放動畫：bash

// html
<div class="voice">
  <div class="bg voicePlay"></div>
</div>
複製代碼

css3: 微信

.voice{ 
  padding-top: 12px;
  padding-left: 10px;
  margin: 100px auto;
  height: 35px;
  width: 150px;
  background: #1bbc9b;
  border-radius: 0 7px 7px;
}

.bg {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;
    width: 24px;
    height: 24px;
  background-size: 400%;
}

.voicePlay {
  animation-name: voicePlay;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}複製代碼

方案3 ---

html5 audio

思路

關於播放動畫，這個很簡單，咱們能夠用css3的逐幀動畫來實現。關於逐幀動畫，我以前的文章也寫過：www.haorooms.com/post/zhuzhe…markdown

圖片以下：

除了動畫以外，剩下的就是js對audio的控制了。

html5 audio

關於html5 audio標籤，有不少屬性，你們能夠搜索一下，例如preload、autoplay、loop、controls等等。讓其隱藏，咱們能夠添加一個隱藏參數，代碼以下：

<audio preload="auto" hidden="true"><source src="mp3/Kalimba.mp3" type="audio/mpeg"></audio>複製代碼

這樣，這個audio 就能夠隱藏顯示，接下來咱們就能夠用js對其進行操做控制了。

audio經常使用方法

addTextTrack()    向音頻/視頻添加新的文本軌道

canPlayType()     檢測瀏覽器是否能播放指定的音頻/視頻類型

load()    從新加載音頻/視頻元素

play()    開始播放音頻/視頻

pause()    暫停當前播放的音頻/視頻複製代碼

audio經常使用事件

事件對咱們很是有用，能夠經過判斷音頻是否加載完成，來進行動畫的操做，例如，咱們點擊錄音，先有一個加載loading動畫，而後在變成咱們前面所講的逐幀動畫。

abort    當音頻/視頻的加載已放棄時
canplay    當瀏覽器能夠播放音頻/視頻時
canplaythrough    當瀏覽器可在不因緩衝而停頓的狀況下進行播放時
durationchange    當音頻/視頻的時長已更改時
emptied    當目前的播放列表爲空時
ended    當目前的播放列表已結束時
error    當在音頻/視頻加載期間發生錯誤時
loadeddata    當瀏覽器已加載音頻/視頻的當前幀時
loadedmetadata    當瀏覽器已加載音頻/視頻的元數據時
loadstart    當瀏覽器開始查找音頻/視頻時
pause    當音頻/視頻已暫停時
play    當音頻/視頻已開始或再也不暫停時
playing    當音頻/視頻在已因緩衝而暫停或中止後已就緒時
progress    當瀏覽器正在下載音頻/視頻時
ratechange    當音頻/視頻的播放速度已更改時
seeked    當用戶已移動/跳躍到音頻/視頻中的新位置時
seeking    當用戶開始移動/跳躍到音頻/視頻中的新位置時
stalled    當瀏覽器嘗試獲取媒體數據，但數據不可用時
suspend    當瀏覽器刻意不獲取媒體數據時
timeupdate    當目前的播放位置已更改時
volumechange    當音量已更改時
waiting    當視頻因爲須要緩衝下一幀而中止複製代碼

例如以下代碼：

audio.onloadedmetadata = function () {
    $(_this).removeClass("loading");
    $(_this).addClass("playing");
}複製代碼

當音頻文件已經加載到瀏覽器以後，去除加載動畫，增長播放動畫。

js 操做音頻文件播放暫停

以下代碼能夠控制audio播放仍是暫停

var audio = document.getElementById('haorooms'); 
 if(audio!==null){             
    //檢測播放是否已暫停.audio.paused 在播放器播放時返回false.
     alert(audio.paused);
  if(audio.paused)                     {                 
      audio.play();//audio.play();// 這個就是播放  
  }else{
   audio.pause();// 這個就是暫停
  }
 } 複製代碼

固然也能夠經過jquery輕鬆操做！

var audio = $(that).children("audio")[0];//獲取，這段代碼直接從咱們文件中copy而來，能夠直接寫$("audio")[0]
    audio.load();//加載
    audio.play();//播放
  audio.pause();//暫停複製代碼

值得注意的是，咱們能夠用定時器來讓語音播放結束以後，動畫去掉。

定時器能夠用setTimeout來寫！關於setTimeout，能夠看我以前的文章！

定時器是一個變量！

var second=$(that).data("second");//獲取音頻秒數
            _this.dshiqi=setTimeout(function(){ //dshiqi是外層定義好的一個變量！
                $(that).removeClass("playing");//播放完畢去除動畫
            },second*1000)複製代碼

記得在每次切換點擊的時候，清除以前的定時器

clearTimeout(_this.dshiqi);複製代碼

不清除定時器，來回點擊錄音，會有問題！

上面就是對html5的audio實現高仿微信語音播放效果簡單總結，歡迎留言交流！

ps ：好多朋友問有沒有demo，找了一下，發現只有一個很挫的靜態頁面，是以前用jquery寫的，你們將就着看下吧！

地址：resource.haorooms.com/softshow-29…