Question

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

随机方向
随机度
随机暂停

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

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

http://jsfiddle.net/NWLVY/1

现在我遇到了一些困难：

我想将多个元素传递给这个循环，我希望它们能够独立运行。我不介意他们是否都有相同的类，或者我只需要写多行来执行每一行。不会有太多。
此旋转不会从最后一个角度继续。它不断跳回来。我无法弄清楚如何解决这个问题。
我似乎无法通过swing或linear之类的任何宽松选项，也无法通过duration和complete

Answer 1

解决。

我使用了略有不同的脚本，但它现在有效。我将Transition和Animation行添加到旋转元素的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>

这是工作http://jsfiddle.net/NWLVY/2/

使用jQuery随机无限旋转动画

1 个答案: