Copy link to clipboard
Copied
I'm having unacceptable stuttering problems with animated images.
300x600a – Bad stuttering:
Watch and see the stuttering. It's especially bad as the 3rd image comes to a rest.
300x600b – Fixed-ish, but via a poor technique:
Watch and see that the stuttering is mostly gone. I did this by changing the scale of the photos from 100% to 100.1%. While this trick fixes the stuttering, we're left with a slightly fuzzy photo and displeased clients.
Download files here.
Before suggestions are made that I need to replace the createjs.Ticker code with the RAF_SYNCHED code. I've already done that. (See the find/replace below if you're unfamiliar with this as it will improve your animations.)
If a contest was held titled "Who Creates the Smoothest Animation", Animate's canvas animations will lose to animations made by hand-coded, GSAP or GoogleWebDesigner. My guess is because those don't use createjs or canvas?
Stuttering has long been an issue in Animate and I think it should be addressed.
Thanks to anyone who can help!
----------------------
FIND
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
REPLACE
stage.addChild(exportRoot);
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.setFPS(lib.properties.fps);
Let me guess, you're testing in Chrome? The "stuttering" isn't a problem with Animate—the problem is that you're moving the bitmap less than one pixel per frame at the end of your tweens. In this situation it's up to the browser whether or not they use subpixel positioning. Chrome, under some conditions, isn't doing that.
728991 - imageSmoothing doesn't kick on drawImage(img, float, float) - chromium - Monorail
In IE, Edge, and Firefox, both versions of your animation look fine. It even animates p
...Copy link to clipboard
Copied
increase your frame rate.
Copy link to clipboard
Copied
I'm making a banner ad and the they try to limit you to 30fps.
Copy link to clipboard
Copied
As I just explained, boosting FPS wouldn't help. The problem is your browser only doing integer pixel positioning.
Copy link to clipboard
Copied
(i saw a significant improvement in chrome by increasing the frame rate, though that won't help the op much.)
Copy link to clipboard
Copied
How would increasing the number of times per second that Chrome isn't updating the image position improve anything?
Copy link to clipboard
Copied
Let me guess, you're testing in Chrome? The "stuttering" isn't a problem with Animate—the problem is that you're moving the bitmap less than one pixel per frame at the end of your tweens. In this situation it's up to the browser whether or not they use subpixel positioning. Chrome, under some conditions, isn't doing that.
728991 - imageSmoothing doesn't kick on drawImage(img, float, float) - chromium - Monorail
In IE, Edge, and Firefox, both versions of your animation look fine. It even animates perfectly smoothy in Chrome if you zoom in a bit.
Copy link to clipboard
Copied
For what it's worth, I'm using Chrome and I see zero stuttering. It feels nice and smooth. Could it be your graphics card?
Copy link to clipboard
Copied
I think ClayUUID is on the right path here.
I'm using Chrome and that's where I see the stuttering. Firefox and Safari look good.
I guess I'll be posting this on the Chrome support forum.