Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
2

HTML5 canvas smoothing tweens

Contributor ,
Feb 02, 2024 Feb 02, 2024

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

TOPICS
Error , Performance , Timeline
204
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 02, 2024 Feb 02, 2024

there are the same number of frames in your fps 24 and 30 tests?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 02, 2024 Feb 02, 2024

No. They both finish at 30 seconds.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 02, 2024 Feb 02, 2024

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 02, 2024 Feb 02, 2024

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 02, 2024 Feb 02, 2024
LATEST

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.

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