每 180 度后做点啥

Posted 2023-05-08

【中文标题】每 180 度后做点啥

【英文标题】：Do something after every 180 degrees每 180 度后做点什么

【发布时间】：2018-06-10 08:04:01

【问题描述】：

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

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

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

我看了这篇文章，认为我可以使用该解决方案，但它对我不起作用，或者我可能只是使用错误：CSS rotation cross browser with jquery.animate()

【问题讨论】：

我已经更新了我的问题，但我不明白为什么我得到了否定

您需要展示您尝试过的工作以及遇到问题的地方。您展示的不止一行代码。

【参考方案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);