Skip to main content
B
beppodeluca
Participant
May 9, 2019
Question

Animate default frame rate

  • May 9, 2019
  • 1 reply
  • 1950 views

I'm wondering if anyone knows why the default frame rate for a new banner ad is 24 fps when the createjs specs state "...variance is usually lowest for framerates that are a divisor of the RAF frequency. This is usually 60, so framerates of 10, 12, 15, 20, and 30 work well."

My experience has born this out as well. 24fps is almost always jittery. 30fps almost always fixes it.

The issue is particularly relevant for me at the moment because I have a spec sheet that requires a max of 24 fps, but I really don't understand the significance of that number. A number which originates in traditional film I believe, but seems to have no correlation to digital animations on computer screens that generally render 60fps.

the only answer I can come up with is that publishers might impose this number to limit resource intensive banner ads, but I dunno.

Any thoughts you might have would be appreciated.

    This topic has been closed for replies.

    1 reply

    kdmemory
    kdmemory
    Inspiring
    May 9, 2019

    Hi Joseph

    If you have a spec that requires max 24 fps then don't worry too much, Just set or leave the framerate on 24. That's all you can do to make sure that the framerate doesn't exceed this rate. Of course on devices with a lower CPU power the framerate can be smaller, but that shouldn't be your problem.

    What you are quoting about RAF is related to animations you want to proceed in a timebased fashion independent from your actual framerate per second. When you i.e. want an animation to take let's say 5 seconds no matter how high or low your fps setting is. In this context you could use the timingMode RAF_SYNCHED: 

    createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

    The docs for EaselJS say this

    "The Ticker.RAF_SYNCHED mode attempts to match up the requestAnimationFrame heartbeat to your specified framerate. This mode provides many of the benefits of the TIMEOUT and RAF modes, but will generally have the highest variance in frame times. It typically works best when the framerate is set to a divisor of 60 (ex. 10, 12, 15, 20, 30)."

    For more insight read this:

    RAF_SYNCHED

    EaselJS Animation and Ticker

    Klaus

    B
    beppodelucaAuthor
    Participant
    May 9, 2019

    Hi there Klaus,

    I appreciate you attempting to help! I'm a developer and have already looked at the API and the actual code. I get the ticker and its methods and properties. That said, I DO have to worry about the frame rate because it's killing my animation. Not just this one, but all of them for a major client that is forcing us to use Animate because they have non-technical people who like it. Ordinarily I just hand code banners using GSAP and as you may know it doesn't explicitly set the frame rate, so the banners will run at the browser rate which is generally 60fps.

    Anyway, I've tested the Animate produced banners using Chrome's FPS meter and it's actually dumping down the rate to 20, which is predictable considering what I mentioned about multiples of 60 being optimal. If you set the rate to 30 in animate, it will play at 30.

    So, it seems to me that Animate is just throttling the banners for no practical reason.

    I would also add that this is a very simple tween that is jittery at 24fps. A 5k png (the balloon) going from x to x in 4 seconds.

    I don't know. I feel like I'm still missing something though.... What do you think now?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices