search

CreateJS / TweenJS

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
http://createjs.com/
MIT License
3.56k stars 967 forks source link

Animation exported from Animate CC is choppy when stage area is below certain value #108

Closed alfredtan closed 5 years ago

alfredtan commented 5 years ago

Issue Details

Version used (Ex; 1.0): 2015-11-26

We are using Adobe Animate CC (2018) to develop a small banner (320x50) and the animation has an image panning slowly, and we found that on Chrome (69), the animation is really choppy compared to Firefox and Safari (all tested on Mac Sierra). We noticed it has something to do with the stage area (width multiply height).

We've created a sample animation that you can download here - choppy-animation.zip

Open index.html and notice the animation is choppy on Chrome. Open the .js file and change the 'height' value on line 48 to "206", the animation is now smooth on Chrome. When the animation is slow, the overall dimension is 320x205 = 65,600. we've tried different dimensions and if the area is below 65,600 (approximately), it's choppy... not sure if this means anything!

Greatly appreciate it if there is workaround that we can apply manually so that we can complete this banner.

Thanks

owendwyer commented 5 years ago

I'd be interested in any response to this issue, as I see choppiness sometimes too.

I tested the animation on Ubuntu with Chromium and can see the same thing - jerky when height is 205, but smooth when height is 206.

lannymcnie commented 5 years ago

It looks like Chome automatically hardware-accelerates larger canvases, but not small ones. https://stackoverflow.com/questions/44323932/no-subpixel-positioning-on-small-html5-canvas-on-chrome

There is a workaround in the StackOverflow post to scale images a little, which forces the browser to hardware-accelerate them. I added this line to your choppy-animation.js, and it solved the issue in Chrome:

this.instance = new lib.test(); // <-- Line 20
this.instance.scaleX = this.instance.scaleY = 0.99; // <-- New code

I am not sure there is anything we can do about this on the library-level, since its a browser behaviour.

Cheers.

alfredtan commented 5 years ago

This is very useful for us for the future. Thank you.