如何将动画暂停后再次执行的时候从暂停的地方开始执行

做了一个类似于网易云音乐播放器的东西，思路是这样的。。

点击一个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%;width: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>

完美解决动画暂停继续的问题

posted @ 2017-04-19 10:18  人生不过百余年  阅读(1556)  评论(0)  编辑  收藏  举报