Делай что-нибудь после каждых 180 градусов

Question

У меня есть div с некоторым текстом, который я хотел бы поворачивать на 360 градусов в течение x раз, но я также хотел бы изменять текст каждые 180 градусов. Как я могу добиться этого в Jquery или Javascript?

До сих пор я застрял в этом, поскольку я не знаю, как контролировать вращение.

$('.pie_chart').css({'transform' : 'rotate(2000deg)'});

Я посмотрел на этот пост, думая, что мог бы использовать решение, но оно не сработало для меня, или я мог просто использовать его неправильно: кросс-браузер ротации CSS с jquery.animate()

Answer 1

Это очень неточно, но оно дает представление и должно быть достаточно, чтобы вы на правильном пути

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#square');
    var texts = ['text', 'another thing', 'one more thing', 'finally']
    var maxRotations = Math.floor(angle / 180);
    var rotations = 0;
    var lastRotation = 0;

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });


           // Here we must allow ourselves some margin for error
           // We are making 4 rotations in 2 seconds, so in theory
           // The box will be at the 180 degrees every half a second
           // but in actuality it never is at exactly 180 degree except at the star and end
           // Trial and error has shown that +6 degrees is more or less accurate, 
           // you could do some math to get a better precision

           // We don't want to update the text at 0 degrees                 
            if(now % 180 <= 6 && rotations > 0) {
                // Shift off the first text and use that for the new text
                $("#text").html(texts.shift());
                rotations++;
            } else if(now % 180 >= 177) {
                $("#text").html(texts.shift());
                rotations++;
            }

            }
        })
    };

AnimateRotate(720);