How to rotate object with linear (normal) easing?

Question

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

sorry, but I can't include rotate plugin into fiddle. Place the code here. — MonkeyShoulder, Jun 02 '13 at 18:15

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

I found the solution - it is to add parameter:

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

into rotate function.

Description about easing function you can see here:

What is an easing function?

edited May 23 '17 at 12:05

Community

1
1

answered Jun 03 '13 at 05:32

MonkeyShoulder

83
4
12

score -1 · Answer 2 · answered Jun 02 '13 at 17:18

-1

Using only CSS3 is quite simple: LIVE DEMO
might be you can find your answer in this lines?
(this one is for FF, for other br. add the -browser-specific properties)

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

answered Jun 02 '13 at 17:18

Roko C. Buljan

196,159
39
305
313

Thank you for response, Roko. But as I understand it's for FF and webkit only? Am I right? – MonkeyShoulder Jun 02 '13 at 18:13
@StasUshakov with a bit of research you can extend for other browsers (I'm not here to ruin the party) (a plugin would be needed for IE8 and lower) – Roko C. Buljan Jun 05 '13 at 13:29

How to rotate object with linear (normal) easing?

2 Answers2