Question about animation playground

Questions
1

New to the animation, for this basic animation playground Animation Examples | Babylon.js Playground (babylonjs.com)

I see here Designing Animations | Babylon.js Documentation (babylonjs.com) it explains

The key frames are at 0, 1 and 2 seconds. To find the frame number after t seconds multiply the time by the frame rate, i.e. t x frameRate.
In this case the key frames are at frame numbers, 0, 1 x frameRate and 2 x frame Rate.

Could someone explain more about what it means here by t x frameRate? I thought the frameRate is fixed as 10? And I do not see anywhere set key frame to be 1, 2 seconds?

And for scene.beginAnimation, I see the parameter
@param from — defines from which frame should animation start
@param to — defines until which frame should animation run.

What’s the difference between start and run?

2

Frame rate is the number of frames that will be drawn every second. So a frame rate of 60 (60 FPS) means that 60 frames will be drawn every second. When we specify the keys of an animation, we specify them by frame number, so, value x will be 1 at frame 10, 2 at frame 20, 3 at frame 30, etc, etc. When we create an animation, we can specify different frame rates, which means these values will be reached at different times. For example, if we specified an animation with a frame rate of 10, then x would be 1 at 1 second, 20 at 2 seconds, etc. But if we specified an animation with a frame rate of 20, then x would be 1 at 0.5 seconds, 2 at 1 second, etc.

You can see the different frame rates at play here: Animation Examples | Babylon.js Playground (babylonjs.com)

There’s no different between start and run, they’re synonymous :slight_smile:

1 Like
3

Hi @carolhmj , thank you for the explanation.
Is the frame number the same as frame rate?

In your example, value x will be 1 at frame 10, 2 at frame 20, 3 at frame 30 means it has a frame number/rate as 10?

And what’s the x value you mentioned above?

In the playground you gave, on line 40, if the start and run are the same, why the value it passes is different, start: 0, run: 2 * frameRate
scene.beginAnimation(box, 0, 2 * frameRate, true);

4

I recommend reading some resources about frame rate so you understand better the difference between a single frame and frame rate:
Frame Rate: A Beginner’s Guide | The TechSmith Blog

1 Like
5

Thank you @carolhmj for the article, I think I got what you mean now, and thank you for the playground, which is really helpful. One more question is still not get in the playground
line 40 scene.beginAnimation(box, 0, 2 * frameRate, true);

from the definition

  • from: number

defines from which frame should animation start

  • to: number

defines until which frame should animation run.

I still not get why you set 0 for animation start, and 2* frameRate for animation run? If start and run are the same?

6

No, no. You didn’t read it correcty:
‘From’ is the START frame of an animation. If it starts from the start, then it will be 0. However, you can start an ANIMATION from an intermediate frame, which is why you need to define this.

‘To’ is the END frame of an animation. You can run/play an animation from the start TO the end, but you can also choose to END your animation at an intermediate frame, which is why you need to define this.

So the first number is THE START FRAME and the second number is THE END FRAME.
Hope this clarifies it a little.
Have a great day,

1 Like
7

Got it, thank you!

8

no worries. I know it’s not easy to understand at first. You’ll get used to it :smiley:

1 Like