動畫場景： 讓一個圓形圖框讓它轉動起來。當然如果單純這樣做很簡單，聲明一個keyframe,控制transform: rotate(deg)屬性從0到360度變化。然后在animation中使用這個keyframe就可以了。
在這個基礎上再要求： 增加動畫的暫停和重新播放功能。
這樣的話又該如何實現呢？就類似於音樂軟件的那個轉盤，想要讓它在音樂暫停的時候轉動動畫也暫停，等到音樂播放的時候再繼續轉動，如下所示。
這時候我發現了一個最為關鍵的問題：傳統的animation屬性或者keyframe提供的是沒有中斷控制的功能，也就是直接從開始播放到結束。
正當我感到煩惱的時候我查詢到了一個我正需要的CSS屬性：animation-play-state。
它包含有兩個值：paused和running。
前者可以使animation屬性制定的動畫處於暫停狀態，后者可以使動畫處於播放狀態。
下面我們來實現暫停和繼續的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="viewport-fit=cover,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.btns {
text-align: center;
}
.search {
width: 30px;
height: 30px;
margin: 30px auto;
}
.serachIcon {
width: 100%;
animation: searchRotate 3s linear infinite;
}
@keyframes searchRotate {
0% {
transform:rotateZ(0deg);
}
100% {
transform:rotateZ(360deg);
}
}
.active {
animation-play-state: running;
}
.paused {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="search">
<img class="serachIcon" src="./img/search.png" alt="">
</div>
<div class="btns">
<button class="paused">暫停/繼續</button>
</div>
<script src="./js/jquery-2.2.4.min.js"></script>
<script>
var playFlag = true;
$('.paused').on('click', () => {
if(playFlag) {
$('.serachIcon').removeClass('active').addClass('paused');
playFlag = false;
} else {
$('.serachIcon').removeClass('paused').addClass('active');
playFlag = true;
}
});
</script>
</body>
</html>
在style中添加了兩個類：active類和paused類，分別設為animation-play-state: running; 和animation-play-state: paused;
當我們點擊 暫停/繼續 按鈕的時候，給serachIcon添加和刪除類名即可。