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

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 秒一次，它会暂停动画几毫秒，导致口吃。）

有什么办法可以解决这个问题吗？ JS 中的某种 "UI-Thread-like" 东西，或者更好的是，在 CSS 中解决这个问题的方法？我真的不知道如何处理它，因为简单的 CSS-Animation 不会解决问题。

Answer 1

您可以使用动画播放状态属性停止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>

代码来自 .

如果你想改变速度，你可以使用Javascript来改变transition-duration 属性。

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

smooth rotation javascript edge browser issue

javascript

css

animation

smoothing

microsoft-edge