Highlighted

How to rid animation stutter on images?

Participant ,
Dec 17, 2018

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

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

Views

584

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to rid animation stutter on images?

Participant ,
Dec 17, 2018

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

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

Views

585

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 17, 2018 0
Adobe Community Professional ,
Dec 17, 2018

Copy link to clipboard

Copied

increase your frame rate.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 17, 2018 0
Participant ,
Dec 19, 2018

Copy link to clipboard

Copied

I'm making a banner ad and the they try to limit you to 30fps.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 19, 2018 0
Adobe Community Professional ,
Dec 19, 2018

Copy link to clipboard

Copied

As I just explained, boosting FPS wouldn't help. The problem is your browser only doing integer pixel positioning.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 19, 2018 0
Adobe Community Professional ,
Dec 19, 2018

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.)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 19, 2018 0
Adobe Community Professional ,
Dec 20, 2018

Copy link to clipboard

Copied

How would increasing the number of times per second that Chrome isn't updating the image position improve anything?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
Adobe Community Professional ,
Dec 17, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 17, 2018 1
Advocate ,
Dec 20, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
Participant ,
Dec 20, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0