Javascript 使用jQuery的随机无限旋转动画

我第一次玩JS+CSS动画。 我试图用这些随机因子旋转一个div（或一组独立的div）：

• 随机方向
• 随机度
• 随意停顿

我设法收集了这个脚本，效果很好。它将id=“square”为无穷大的div旋转到[随机]方向，旋转[随机]度

    function redo() {  
    $.fn.animateRotate = function(angle, duration, easing, complete) {
            return this.each(function() {
            var $elem = $(this);

            $({deg: 0}).animate({deg: angle}, {
                duration: duration,
                easing: easing,
                step: function(now) {
                    $elem.css({
                        transform: 'rotate(' + now + 'deg)'
                    });
                },
                complete: complete //|| $.noop
            });
        });
    };
    plusOrMinus = Math.random() < 0.5 ? -1 : 1;
    randAngle = Math.floor(Math.random()*70+30) * plusOrMinus;
    randDelay = Math.floor(Math.random()*3000+2000);
    $('#square').animateRotate(randAngle);
    timer = setTimeout(function() { redo(); },randDelay);
}

redo();

函数redo（）{
$.fn.animateRotate=函数（角度、持续时间、缓和、完成）{
返回此值。每个（函数（）{
变量$elem=$（本）；
$（{deg:0}）。设置（{deg:angle}）动画{
持续时间：持续时间，
缓和:缓和,，
步骤：功能（现在）{
$elem.css({
变换：'旋转（'+now+'deg）'
});
},
完成：完成/| |$.noop
});
});
};
plusor减号=Math.random（）<0.5？-1:1；
randAngle=Math.floor（Math.random（）*70+30）*加减；
randDelay=Math.floor（Math.random（）*3000+2000）；
$（'#square'）。animateRotate（randAngle）；
计时器=设置超时（函数（）{redo（）；}，随机延迟）；
}
重做（）；

现在我遇到了一些困难：

我希望将多个元素传递到这个循环中，并且希望它们能够独立运行。我不介意它们是否都有相同的类，或者我只需要编写多行代码来执行每一行。不会有太多

此旋转不会从最后一个角度继续。它一直往后跳。我想不出怎么解决这个问题

我似乎无法通过任何放松选项，如

swing

或

linear

，也无法通过任何其他选项，如

duration

和

complete

解决了

我使用了一个稍微不同的脚本，但现在它可以工作了。 我在旋转元素的CSS中添加了过渡线和动画线

transition:2s;
animation:ease-in-out;

这些似乎已经解决了锯齿状旋转的问题，让我补充一些放松。 然后我使用包装函数将不同的元素传递给函数

<Script>
 function rotate (elementID) {

    var $rota = $(elementID),
        degree = 0,
        timer;

    function spin() {    
        $rota.css({ transform: 'rotate(' + degree + 'deg)'});   // rotate element
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;       // random spin direction
        randAngle = Math.floor(Math.random()*70+50) * plusOrMinus; // random degrees
        randDelay = Math.floor(Math.random()*1000+2000);  //random delay
        timer = setTimeout(function() {  // set delay
            degree += randAngle;  // add random degree to current variable
            spin(); // loop it
        },randDelay);
    }

    spin();    // start first spin for element

};

rotate ('#square'); // run it
rotate ('#square2'); // run it again

</script>

函数旋转（elementID）{
变量$rota=$（元素ID），
度=0，
定时器；
函数spin（）{
$rota.css（{transform:'rotate（'+degree+'deg）}）；//rotate元素
plusor减号=Math.random（）<0.5？-1:1；//随机自旋方向
randAngle=Math.floor（Math.random（）*70+50）*加号减号；//随机度
randDelay=Math.floor（Math.random（）*1000+2000）；//随机延迟
计时器=设置超时（函数（）{//设置延迟
degree+=randAngle；//将随机度添加到当前变量
spin（）；//循环它
}，兰德尔）；
}
spin（）；//开始元素的第一次旋转
};
旋转（“#正方形”）；//运行它
旋转（'#square2'）；//再运行一次

它在这里工作