search

eugenii / jqueryrotate

Automatically exported from code.google.com/p/jqueryrotate
1 stars 0 forks source link

Great in all but FF - juddery #70

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Demo link here: http://www.thefuelagency.co.uk/rotate/example.php
2. click an image and click again.  Sporadic juddering and common little jump 
near the end.
3.

What is the expected output? What do you see instead?
Other browser animations look smooth and great.  Ideally would like it as 
smooth in FF

What version of the product are you using? On what operating system?
Was using v2.2 but just tried v3 and still happens there.  Problem appears on 
both PC and MAC.

Please provide any additional information below.
Will drop you a donate :) good work

Original issue reported on code.google.com by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 12:55

GoogleCodeExporter commented 9 years ago 
Granted I am doing a lot at the same time...

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 1:01

GoogleCodeExporter commented 9 years ago 
Well I think its a problem of animation desync and quite big images sizes. As 
you figured out - its kinda jumpy in firefox, and unfortunately javascript has 
not too much to do about performance of how it looks like. However instead of 
animating using jQuery you could manually animate variables like width, height, 
position etc, using a  .step function that gets current angle as a parameter 
(check in Documentation here in wiki). Unfortunately there is not too much I 
can do from a plugin side - its as fast as possible anyway ;)

Original comment by wil...@gmail.com on 25 Apr 2012 at 1:12

GoogleCodeExporter commented 9 years ago 
Well, thanks for taking a look.  I dropped you some beer money :)

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 1:16

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Something like:

var animateFrom = 50;
var animateTo = 120;

element.rotate({angle: animateFrom, animateTo: animateTo, step: 
function(currentAngle) {
  var percent = (currentAngle - animateFrom) / (animateTo - animateFrom); // value from 0.0 to 1.0

  // here based on percentage value set proper width/height css attributes
});

Original comment by wil...@gmail.com on 25 Apr 2012 at 1:16

GoogleCodeExporter commented 9 years ago 
Thanks! Sorry that I couldn't help more :(

Original comment by wil...@gmail.com on 25 Apr 2012 at 1:17

GoogleCodeExporter commented 9 years ago 
only mildy frustrating as FF is what it will be checked in by my boss  - 
typical :)

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 1:19

GoogleCodeExporter commented 9 years ago 
Hehe thats true :) At first you could try with smaller image sizes - that 
should be (hopefully) easy to test if it helps. The animation problem is a bit 
more heavy unfortunately :(

I roughly check and see that jQuery uses 13 ms interval between animations, so 
you could also try open newrotate.js  file and find line like this:

            this._timer = setTimeout(function()
                     {
                     self._animate.call(self);
                     }, 10);
         }

and change it to:

            this._timer = setTimeout(function()
                     {
                     self._animate.call(self);
                     }, 13);
         }

(just change 10 to 13 ms - maybe it will automagically hits the same frame as 
jQuery animation)

Original comment by wil...@gmail.com on 25 Apr 2012 at 1:25

GoogleCodeExporter commented 9 years ago 
have tried that and updated the js used on the link.  Not really any different, 
nice thought though.  I am guessing it has trouble as the image width is 
changing during the calculation

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 1:34

GoogleCodeExporter commented 9 years ago 
On mine FF on linux it seems slighty better, maybe cache?

Original comment by wil...@gmail.com on 25 Apr 2012 at 1:40

GoogleCodeExporter commented 9 years ago 
I thought it was slightly better. Still doing that strange little kick near the 
end. thinking of reverting to the less-pleasing move then rotate...if I can 
just do that for FF I won't cry too much

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 1:44

GoogleCodeExporter commented 9 years ago 
Just to clarify - it is just slightly jump at the end of animation going from 
big image > small image or other way around?  Or just both ?

Original comment by wil...@gmail.com on 25 Apr 2012 at 1:50

GoogleCodeExporter commented 9 years ago 
jumps at the end of the small>big (possibly when the image reaches full size 
but still needs to rotate).

However...I have just set the timeout to 26 (2*13) and it seems much better. !

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 1:52

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
...Still not as smooth as the other browsers but the number of kicks has 
dropped.

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 2:01

GoogleCodeExporter commented 9 years ago 
Yea unfortunately for like past few years firefox going down in terms of 
performance of animations and honestly im not really pleased about it :( It 
might help, as i said before, to make custom animation implementation based on 
a .step function.

Have you tried already with small images? Does it help ?

Original comment by wil...@gmail.com on 25 Apr 2012 at 2:09

GoogleCodeExporter commented 9 years ago 
OK...now I (rightly) feel like an idiot...I hadn't realised I was not using the 
smaller versions of the images.  See example 2:  
http://www.thefuelagency.co.uk/rotate/example2.php - works an awful lot better. 
 Still a little kick now'n'again but I can live with that.  Sorry to take up 
all your time.  I had saved them out somewhere else.

if(me==idiot){kickme();}

thanks for all your time (good work once again)

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 2:19

GoogleCodeExporter commented 9 years ago 
Note to self: pay attention to results of photoshop batch process save overide

Original comment by webmas...@thefuelagency.co.uk on 25 Apr 2012 at 2:21

GoogleCodeExporter commented 9 years ago 
Haha, glad to hear that results now are acceptable :)

Original comment by wil...@gmail.com on 25 Apr 2012 at 2:22