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

【问题标题】：smooth rotation javascript edge browser issue平滑旋转javascript边缘浏览器问题
【发布时间】：2019-04-08 22:10:46
【问题描述】：

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

有一个图像。如果按下按钮，图像将启动缓动旋转动画。当处于最大速度时，它会一直旋转直到按下停止按钮。随后，动画慢慢停止，导致图像停留在某个角度。因为（据我所知和尝试）不可能用 CSS 制作这种动画，我在 JS 中使用了每 16 毫秒更新一次的间隔。这是sn-p：

        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 无法解决问题。

【问题讨论】：

你试过requestAnimationFrame而不是setTimeout/setInterval吗？
感谢 James 的回答，我改用这种方法是因为它修复了 Chrome 和 Firefox 等浏览器中的卡顿问题。但是，主要问题（Edge 中的口吃，这是一种不同的口吃）保持不变。

标签： javascript css animation microsoft-edge smoothing

【解决方案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属性。

【讨论】：

我修改了您的方法以满足我的需求，这解决了口吃的问题。谢谢！