проблема с браузером с плавным поворотом javascript - PullRequest
Новая
       85

проблема с браузером с плавным поворотом javascript

0 голосов
/ 05 ноября 2018

В настоящее время я пытаюсь понять, как плавно повернуть изображение в 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 не предназначен для частого обновления пользовательского интерфейса. Кажется, даже на некоторых, не очень быстрых устройствах он работает не так гладко (имеется в виду, что если в фоновом режиме выполняется много сценариев, то есть каждые 6 секунд, анимация приостанавливается на несколько миллисекунд, что приводит к заиканию).

Есть ли способ решить эту проблему? Что-то вроде «UI-Thread-like» в JS или, что еще лучше, способ решить эту проблему в CSS? Я действительно понятия не имею, как с этим бороться, потому что простая CSS-анимация не сработает.

1 Ответ

0 голосов
/ 06 ноября 2018

Вы можете остановить анимацию CSS, используя свойство animation-play-state.

Пожалуйста, обратитесь к следующему образцу: 

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

...