每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);