HTML5 canvas smoothing tweens
Copy link to clipboard
Copied
Hello.
Here's the scenario.
I built a HTML5 canvas. 24fps. I used classic tweens to animate a symbol. When published, the animation wasn't 100% smooth.
So I changed the frame rate to 30fps. Perfect. However, the Publications were having problems publishing the banners. The only way around it was to revert to 24fps.
Has anyone else had problems with the smoothness of tweening?
TIA
Copy link to clipboard
Copied
there are the same number of frames in your fps 24 and 30 tests?
Copy link to clipboard
Copied
No. They both finish at 30 seconds.
Copy link to clipboard
Copied
so, the smoothness issue is predictable. ie, you have a certain amount of movement across a certain number (not time) of frames. too much movement per frame, you detect unsmooth movement.
ie, to fix add more frames to your tween. if the frame rate is unchanged that will result in slower movment.
Copy link to clipboard
Copied
Right. OK. So I need to add more frames to my tween to make it smoother. Irrespective of the frame rate.
Thank you for your help.
Copy link to clipboard
Copied
correct, that's one way to increase smoothness.
ie, you want to decrease the amount of movement from one frame to the next. there are several ways to do that including the fps change you used (increasing the frame number) or decreasing the total distance moved.

