javascript - CSS动画暂停并使用javascript播放

标签 javascript html css animation pause

我需要一个按钮和我的动画。按下该按钮我想暂停动画，再次按下我想播放动画。我对 css3 关键帧动画有点陌生，所以我对此感到困惑。这是我的动画页面代码及其 CSS，位于同一文件中。

<!DOCTYPE html>
<head>
    <title>Animation</title>
    <style>
                figure#night-day {
                    margin: 0 auto;
                    font-size: 0;
                    max-width: 1000px;
                    height: 500px;
                    background-color: #000;
                    overflow: hidden;
                    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield_stock_1.jpg);
                    background-size: cover;
                    position: relative;
                }

                @keyframes suntrack {
                    from {
                        transform: rotate(.15turn);
                    }

                    to {
                        transform: rotate(-.85turn);
                    }
                }

                @keyframes moontrack {
                    from {
                        transform: rotate(.15turn);
                    }

                    to {
                        transform: rotate(-.85turn);
                    }
                }

                @keyframes sunpulse {
                    from {
                        box-shadow: 0 0 100px rgba(255, 255, 0, .4), 0 0 100px rgba(255, 255, 0, .4);
                    }

                    to {
                        box-shadow: 0 0 50px rgba(255, 255, 0, .8), 0 0 75px rgba(255, 255, 0, .8);
                    }
                }


                .sun {
                    width: 15vw;
                    height: 15vw;
                    background: #ff0;
                    background: radial-gradient(ellipse at center, #f90 0%, #fc0 60%, #ff0 100%);
                    border-radius: 100%;
                    position: absolute;
                    bottom: -7vw;
                    right: 7vw;
                    transform-origin: -28vw 7vw;
                    animation: suntrack 24s infinite forwards linear, sunpulse 2s alternate infinite;
                }

                .moon {
                    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon8.png);
                    width: 15vw;
                    height: 15vw;
                    position: absolute;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 90% 90%;
                    border-radius: 100%;
                    bottom: -7vw;
                    right: 7vw;
                    transform-origin: -28vw 7vw;
                    animation: moontrack 24s infinite backwards linear;
                    animation-delay: 12s;
                    opacity: .8;
                }
    </style>
</head>
<body>

    <figure id="night-day">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop stop-color="rgb(0,0,12)" offset="0%" id="zenith">
                    <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)"
                             repeatCount="indefinite" />
                    <animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0" repeatCount="indefinite" />
                </stop>

                <stop stop-color="rgb(0,0,12)" offset="100%" id="horizon">
                    <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)"
                             repeatCount="indefinite" />
                </stop>
            </linearGradient>
            <rect id="sky" x="0" y="0" width="100%" height="100%" style="fill:url(#skyGradient)" />
        </svg>
        <div class="sun"></div>
        <div class="moon"></div>
    </figure>
</body>

更新:

我已经使用以下 javascript 代码成功暂停并播放了太阳和月亮类(class)

<script>
    var sun = document.querySelectorAll('.sun');
    var moon = document.querySelectorAll('.moon');
    document.getElementById('PlayPause').onclick = function () {

        for (var i = 0; i < sun.length; i++) {
            if (sun[i].style.animationPlayState == 'paused') {
                sun[i].style.animationPlayState = 'running';
            }
            else {
                sun[i].style.animationPlayState = 'paused';
            }
        }
        for (var i = 0; i < moon.length; i++) {
            if (moon[i].style.animationPlayState == 'paused') {
                moon[i].style.animationPlayState = 'running';
            }
            else {
                moon[i].style.animationPlayState = 'paused';
            }
        }
    }

</script>

但是当我暂停动画时，背景颜色过渡仍在继续，即；我想太阳脉冲动画仍在以某种方式工作我也想暂停背景颜色的变化。提前致谢。

最佳答案

你快到了；你只需要暂停你的 SVG 动画。

注意:我已将 click 事件绑定(bind)到此示例的 figure 元素。

var figure=document.getElementById("night-day"),
    sky=figure.querySelector("svg"),
    sun=figure.querySelector(".sun"),
    moon=figure.querySelector(".moon");
figure.addEventListener("click",function(){
    sky.animationsPaused()?sky.unpauseAnimations():sky.pauseAnimations();
    sun.classList.toggle("paused");
    moon.classList.toggle("paused");
},0);
#night-day{
    background-color:#000;
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield_stock_1.jpg);
    background-size:cover;
    font-size:0;
    height:500px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    max-width:1000px;
}
.sun{
    animation:suntrack 24s infinite forwards linear,sunpulse 2s alternate infinite;
    background:radial-gradient(ellipse at center, #f90 0%, #fc0 60%, #ff0 100%);
    border-radius:100%;
    bottom:-7vw;
    height:15vw;
    position:absolute;
    right:7vw;
    transform-origin:-28vw 7vw;
    width:15vw;
}
.moon{
    animation:moontrack 24s infinite backwards linear;
    animation-delay:12s;
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon8.png);
    background-position:center;
    background-repeat:no-repeat;
    background-size:90% 90%;
    border-radius:100%;
    bottom:-7vw;
    height:15vw;
    opacity:.8;
    position:absolute;
    right:7vw;
    transform-origin:-28vw 7vw;
    width:15vw;
}
.paused{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
@keyframes suntrack{
    from{
        transform:rotate(.15turn);
    }
    to{
        transform:rotate(-.85turn);
    }
}
@keyframes moontrack{
    from{
        transform:rotate(.15turn);
    }
    to{
        transform:rotate(-.85turn);
    }
}
@keyframes sunpulse{
    from{
        box-shadow:0 0 100px rgba(255,255,0,.4),0 0 100px rgba(255,255,0,.4);
    }
    to{
        box-shadow:0 0 50px rgba(255,255,0,.8),0 0 75px rgba(255,255,0,.8);
    }
}
<figure id="night-day">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop stop-color="rgb(0,0,12)" offset="0%" id="zenith">
                <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)" repeatCount="indefinite" />
                <animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0" repeatCount="indefinite" />
            </stop>
            <stop stop-color="rgb(0,0,12)" offset="100%" id="horizon">
                <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)" repeatCount="indefinite" />
            </stop>
        </linearGradient>
        <rect id="sky" x="0" y="0" width="100%" height="100%" style="fill:url(#skyGradient)" />
    </svg>
    <div class="sun"></div>
    <div class="moon"></div>
</figure>

关于javascript - CSS动画暂停并使用javascript播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37280408/

上一篇：JavaScript - 动态 SVG - onload 属性 - 未触发事件

下一篇：html - 防止包装 block 格式 UL 弹出菜单项

相关文章：

javascript - 创建新子级时如何将parent_id的外键分配给post路由

javascript - 将 HTML 表格复制到 Word 文件 - 覆盖错误

javascript - 试图在 javascript 中更改光标

css - 使用 Gulp、Sass 在 Material Design Lite 主题上定制变体

javascript - 每行显示 2 个项目[react native]

Javascript onClick图像更改

JavaScript - for 循环抛出 undefined variable 。 (SSCCE 提供)

javascript - HTML 一次性使用页面

html - CSS:单击时列内的链接移动

html - 两个堆叠的 div 和控制高度

©2024 IT工具网  联系我们