如何將動畫暫停後再次執行的時候從暫停的地方開始執行

時間 2019-11-12

標籤如何動畫暫停再次執行時候地方開始简体版

原文原文鏈接

作了一個相似於網易雲音樂播放器的東西，思路是這樣的。。css

點擊一個div，圓形播放器開始轉動，點擊，暫停，再次點擊，繼續從暫停位置開始轉動html

<!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。jquery

可是這邊有個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的方法。並且本人並未實現url

最後，久經波折。無心中發現一個屬性spa

animation-play-state:paused;

這個屬性表明暫停動畫，而且繼續動畫的時候會從以前暫停的位置開始執行動畫code

最後完整效果以下orm

<!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>

完美解決動畫暫停繼續的問題xml

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。