滑らかな不安定なjqueryアニメーション

Question

私は親要素の内側で回転して跳ね返るイメージを持っています。私はそれが素晴らしい仕事をしている、回転が少しhickupyように見える。最初の数秒で滑らかになり、少し揺れ始めます。

どうすればいいですか？

$.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); 
    } 
}); 

JS FIDDLE

Answer 1

あなたのアプローチで途切れは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); 

http://jsfiddle.net/k3uvb5c0/6/