每 180 度后做点什么

Question

我有一个带有一些文本的 div，我想将其旋转 360 度 x 次，但我也想每 180 度修改一次文本。如何在 Jquery 或 Javascript 中实现这一点？

到目前为止，我一直坚持这一点，因为我不知道如何监控轮换。

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

我看了这篇文章，认为我可以使用该解决方案，但它对我不起作用，或者我可能只是使用错误：CSS rotation cross browser with 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);