Question

当前，我正在尝试弄清楚如何平稳地旋转HTML中的图像。

有图像。如果按下按钮，则图像开始缓动旋转动画。当达到最大速度时，它会一直旋转直到按下停止按钮。随后，动画将缓慢停止，从而使图像保持一定角度。因为（根据我的了解和尝试）不可能用CSS制作这种动画，所以我在JS中使用了一个间隔，该间隔每16毫秒更新一次。这是代码段：

        var counter = 0;
        var rotation = 0;
        var speedVal = 0.01;
        var speedFactor = 3;
        var spinInterval = setInterval(function () {
                rotation += counter * speedFactor;
                rotation = rotation % 360;
                if (counter != 0) $("#pumpIcon").css('transform', 'rotate(' + rotation + 'deg)');//set the image to a certain angle
                if (counter < pump.spinning) {
                    counter += speedVal;
                }
                else if (counter >pump.spinning) {
                    counter -= speedVal;
                }
                if (counter * 100 < 1) counter = 0;//This way, the animation will fully stop/not accelerate when it reached a certain value
            }
        }, 16);

有一个for循环，因为有两个单独的图像在旋转，所以只需忽略这一事实。

问题在于在Edge浏览器中使用这种解决方案：似乎图像在晃动，我猜是因为JS并不是要频繁更新UI。甚至在某些不那么快的设备上似乎运行也不流畅（这意味着，如果在后台每隔6秒执行许多脚本，则动画会暂停几毫秒，从而导致结结。）< / p>

有什么办法解决这个问题？ JS中某种类似于“ UI线程”的东西，或者甚至更好的一种方法，可以解决CSS中的此问题？我真的不知道如何处理它，因为简单的CSS动画无法解决问题。

Answer 1

您可以使用animation-play-state属性停止CSS动画。

请参考以下示例：

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 120px;
            margin: -60px 0 0 -60px;
            -webkit-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        @-moz-keyframes spin {
            100% {
                -moz-transform: rotate(360deg);
            }
        }

        @-webkit-keyframes spin {
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <img id="theImage" class="image" src="https://brainful.s3.amazonaws.com/assets/images/twoStates/circle.png" alt="">
    <button onclick="Rotate.start()">Start</button>
    <button onclick="Rotate.stop()">Stop</button>
    <button onclick="Rotate.setSpeed('1s')">Speed</button>
    <button onclick="Rotate.setEasing()">Earsing</button>
    <script>
        Rotate = {
            speed: 2,
            start: function () {
                var elem = document.getElementById('theImage');
                elem.style.animationPlayState = 'running';
            },
            stop: function () {
                var elem = document.getElementById('theImage');
                elem.style.animationPlayState = 'paused';
            }
        };
    </script>
</body>

来自this link的代码。

如果要更改速度，可以使用Javascript更改transition-duration属性。

平滑旋转javascript边缘浏览器问题

1 个答案: