0

Looks like default easing in jQueryRotate plugin is not linear.. Image rotate with slowdown at the end of rotation. So if I use recursive function image doesn't rotate evenly.

Example:

Here is the code:

HTML:

<div id="rotate_me" style="border: 1px solid red; width: 100px; height: 100px"></div>

JS:

var rotation = function (){
   jQuery("#rotate_me").rotate({
      angle: 0,
      animateTo:360,
      duration: 1600,
      callback: rotation
   });
}
rotation();
4

2 に答える 2

1

私は解決策を見つけました - それはパラメータを追加することです：

easing: function (x,t,b,c,d){ 
          return c*(t/d)+b;
      }

回転機能に。

ここで見ることができるイージング関数についての説明:

イージング関数とは？

于 2013-06-03T05:32:35.560 に答える
-1

CSS3 のみを使用するのは非常に簡単です。LIVE DEMO
では、この行で答えを見つけることができるでしょうか?
(これは FF 用、その他の場合は-browser-specificプロパティを追加)

img {
  animation-duration: 3s;
  animation-name: wowrotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes wowrotate{
  from { 
     transform: rotate(0deg);
  }
  to {
     transform: rotate(360deg);
  }
}
于 2013-06-02T17:18:35.427 に答える