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

玉發表於2019-03-29
CSS動畫

96

寫業務程式碼經常會碰到要自己實現一些設計交給的小動畫，今天我們就來看下小喇叭那種類似倒過來的wifi圖示一樣的效果：

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

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

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

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

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

話不多說上程式碼：


CSS動畫效果——語音播放小喇叭
div結構
CSS動畫效果——語音播放小喇叭
css程式碼外部div塊以及圓環通用樣式
CSS動畫效果——語音播放小喇叭
css程式碼每個小環的大小、位置以及動畫定義
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>複製程式碼



方案二

微信語音播放動畫：

// 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%;
  }
}複製程式碼

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


方案3  ---

html5 audio


思路

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

圖片如下：

enter image description here

除了動畫之外，剩下的就是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…


相關文章