CSS实现动画的暂停和播放
动画场景： 让一个圆形图框让它转动起来。当然如果单纯这样做很简单，声明一个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添加和删除类名即可。
