Javascript 平滑不稳定的jquery动画

我有一个在父元素内部旋转和反弹的图像。我觉得它工作得很好，希望旋转看起来有点笨拙。刚开始的几秒钟，它很平稳，然后开始有点摇晃

我该如何解决这个问题

$.fn.bounce = function(options) {

    var settings = $.extend({
        speed: 10
    }, options);

    return $(this).each(function() {

        var $this = $(this),
            $parent = $this.parent(),
            height = $parent.height(),
            width = $parent.width(),
            top = Math.floor(Math.random() * (height / 2)) + height / 4,
            left = Math.floor(Math.random() * (width / 2)) + width / 4,
            vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1),
            vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1);

        // place initialy in a random location
        $this.css({
            'top': top,
            'left': left
        }).data('vector', {
            'x': vectorX,
            'y': vectorY
        });

        var move = function($e) {

            var offset = $e.offset(),
                width = $e.width(),
                height = $e.height(),
                vector = $e.data('vector'),
                $parent = $e.parent();

            if (offset.left <= 0 && vector.x < 0) {
                vector.x = -1 * vector.x;
            }
            if ((offset.left + width) >= $parent.width()) {
                vector.x = -1 * vector.x;
            }
            if (offset.top <= 0 && vector.y < 0) {
                vector.y = -1 * vector.y;
            }
            if ((offset.top + height) >= $parent.height()) {
                vector.y = -1 * vector.y;
            }

            $e.css({
                'top': offset.top + vector.y + 'px',
                'left': offset.left + vector.x + 'px'
            }).data('vector', {
                'x': vector.x,
                'y': vector.y
            });

            setTimeout(function() {
                move($e);
            }, 50);

        };

        move($this);
    });

};

$(function() {
    $('#wrapper li').bounce({
        'speed': 7
    });
});

$(function() {
    var $elie = $("img");
    rotate(0);
    function rotate(degree) {        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            rotate(--degree);
        },30);
    }
});

$.fn.bounce=函数（选项）{
变量设置=$.extend({
速度：10
}，选项）；
返回$（this）.each（函数（）{
变量$this=$（this），
$parent=$this.parent（），
高度=$parent.height（），
宽度=$parent.width（），
顶部=数学楼层（数学随机（）*（高度/2））+高度/4，
左=数学地板（数学随机（）*（宽度/2））+宽度/4，
VECTRORX=settings.speed*（Math.random（）>0.5？1:-1），
vectorY=settings.speed*（Math.random（）>0.5？1:-1）；
//将初始值放置在随机位置
$this.css({
"顶":顶,，
“左”：左
}).数据（'向量'{
“x”：向量，
y:向量
});
var move=函数（$e）{
变量偏移量=$e.offset（），
宽度=$e.width（），
高度=$e.高度（），
vector=$e.data（'vector'），
$parent=$e.parent（）；
if（offset.left=$parent.width（））{
vector.x=-1*vector.x；
}
如果（offset.top=$parent.height（））{
vector.y=-1*vector.y；
}
$e.css({
'top'：offset.top+vector.y+'px'，
“左”：offset.left+vector.x+“px”
}).数据（'向量'{
“x”：vector.x，
'y'：vector.y
});
setTimeout（函数（）{
搬迁（e美元）；
}, 50);
};
移动（$此）；
});
};
$（函数（）{
$（'#wrapper li'）。反弹({
“速度”：7
});
});
$（函数（）{
var$elie=$（“img”）；
旋转（0）；
函数旋转（度）{
$elie.css（{webkitttransform:'rotate（'+degree+'deg'）}）；
$elie.css（{'-moz transform'：'rotate（'+degree+'deg'）}）；
计时器=设置超时（函数（）{
旋转（-度）；
},30);
}
});

---

进近中的起伏度来自超时值50。一个简单的优化就是去掉这个间隔并调整向量的变化以保持速度不变

setTimeout(function() {
  move($e);
}, 0);

vectorX = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1),
vectorY = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1);

---

#nsfw-这张图片对我来说太可怕了，一开始它更不稳定，然后它就不稳定了。我怀疑你是否需要支持传统浏览器，一直到IE8，但是GSAP总是被推荐使用，而不是jQuery动画（很糟糕，有问题），你可以让它运行得很快：）说真的，超时长度是其波动的原因，您可能需要不同的方法