做了一个类似于网易云音乐播放器的东西，思路是这样的。。
点击一个div，圆形播放器开始转动，点击，暂停，再次点击，继续从暂停位置开始转动
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style> .myMove{ margin: 0 auto; text-align: center; } .move{ width: 180px; height: 180px; border-radius: 50%; text-align: center; line-height: 150px; display: table; vertical-align: middle; border: 10px solid rgba(0,0,0,.1); margin: 0 auto; } .moveclass{ animation:moveTurn 10s linear infinite; animation-fill-mode: forwards; } @keyframes moveTurn{ 0%{transform:rotate(0deg)} /*25%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(270deg)}*/ 100%{transform:rotate(360deg)} } .middle{ width: 94%; height: 94%; border-radius: 50%; background-image: url("images/singlecover.png"); background-position: center; margin: 0 auto; vertical-align: middle; display: table-cell; } .center{ width: 80%; height: 80%; border-radius: 50%; background: #666; background-image: url("images/1.jpg"); text-align: center; line-height: 20px; margin: 0 auto; background-position:center; } </style> </head> <body> <div class="myMove"> <div onclick="controllMove()"> 点击我，让下面的哥们不在转 </div> <div class="move" id="move"> <div class="middle"> <div class="center"></div> </div> </div> </div> </body> <script src="js/jquery.min.js"></script> <script> function controllMove(){ //判断是否有动画，如果有，则记录角度 //如果没有，则添加动画 var isMove = $(".move").hasClass("moveclass");//判断是否有moveclass jiaodu = $(".moveclass").css("transform"); if(isMove){//有，说明正在旋转 jiaodu = $(".moveclass").css("transform"); } else{//说明停止旋转了 jiaodu=0; } $(".move").toggleClass("moveclass"); console.log(jiaodu); $(".move").css("transform",jiaodu); } </script> </html>
刚开始是用点击事件的同时插入动画class 暂停的时候则把动画class移除。。。再次点击的时候再次添加此动画class。
但是这边有个bug，就是怎么动态改变 @keyframes 内的值。网上搜索了一下，唯一有个靠谱的是
var tt=document.styleSheets[0];
tt.deleteRule(6);//清除之前写入的动画样式
console.log(tt);
tt.insertRule("@keyframes mymove{0%{} 100%{transform:rotateZ(0deg);top:10%;left:30%;400px}}",6);//写入样式
但是这个insertRule是xml的方法。而且本人并未实现
最后，久经波折。无意中发现一个属性
animation-play-state:paused;
这个属性代表暂停动画，并且继续动画的时候会从之前暂停的位置开始执行动画
最后完整效果如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style> .myMove{ margin: 0 auto; text-align: center; } .move{ width: 180px; height: 180px; border-radius: 50%; text-align: center; line-height: 150px; display: table; vertical-align: middle; border: 10px solid rgba(0,0,0,.1); margin: 0 auto; animation:moveTurn 10s linear infinite; animation-fill-mode: forwards; animation-play-state:paused; } @keyframes moveTurn{ 0%{transform:rotate(0deg)} /*25%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(270deg)}*/ 100%{transform:rotate(360deg)} } .middle{ width: 94%; height: 94%; border-radius: 50%; background-image: url("images/singlecover.png"); background-position: center; margin: 0 auto; vertical-align: middle; display: table-cell; } .center{ width: 80%; height: 80%; border-radius: 50%; background: #666; background-image: url("images/1.jpg"); text-align: center; line-height: 20px; margin: 0 auto; background-position:center; } </style> </head> <body> <div class="myMove"> <div onclick="controllMove()"> 点击我，让下面的哥们不在转 </div> <div class="move" id="move"> <div class="middle"> <!--如果没有图片，看字的动画效果--> <div class="center">我叫人生不过百余年</div> </div> </div> </div> </body> <script src="js/jquery.min.js"></script> <script> var ClickTime = true; var move = document.getElementById("move"); function controllMove(){ if(ClickTime){ move.style.animationPlayState = "running"; ClickTime = !ClickTime; }else{ move.style.animationPlayState = "paused"; ClickTime = !ClickTime; } } </script> </html>
完美解决动画暂停继续的问题