Animation takes longer as it should - camera target is "locked" for some seconds

Questions
1

Hi,

please go to Babylon.js Playground and click on the sphere.
Shortly after that try to “look around”.
You will see that it takes some seconds until the camera-target “unlocks”.

Can you tell me why? :slight_smile:

Greetingx!

2

Hello! This behavior is caused because the animation is still playing when you try to look around after having clicked on the mesh. If you reduce the animation duration, you can move the camera faster: moveCam - duration | Babylon.js Playground (babylonjs.com)

Another option would be to stop the animation if the user tries to move the camera.

1 Like
3

Hi,

thanks, but I don’t understand why the animation for the camera target is playing longer than the animation for the position. And the animation shouldn’t get faster … so to stop the animation would be a solution. But it feels a bit dirty … cause I’d like to know what’s going on there.

4

Both animations are playing for the same time duration. You can check it here, by logging when each animation ends using the onAnimationEnd parameter to the CreateAndStartAnimation function: moveCam - duration | Babylon.js Playground (babylonjs.com)

However, it does seem strange that because camera seems to stop moving before the animation end is logged. From the documentation, since we don’t inform an easing function, it should be linear and the values should change uniformly. But maybe I’m misunderstanding something, so I’ll defer to our animation expert @Cedric who may be able to enlighten us on the matter.

5

I’ve added callbacks with a simple log when animation ends. They both ends at the same time.
What is misleading here is you can rotate camera once it seems at destination and it looks like position animation is over. but it’s not. if you move camera with arrow keys, you’ll see position gets updated too…until both animation end.

moveCam - duration | Babylon.js Playground (babylonjs.com)

if you change fps to something closer to duration, animation will stop sooner.

1 Like
6

Thanks. Yes, it stops sooner but it also runs faster.
I don‘t want to speed up the animation.

So should I try to give another easing?
And I‘m still wondering what‘s going on here … :slight_smile:

1 Like
7

Hey!
I believe you have to clone the start positions like here to make it working properly:

https://playground.babylonjs.com/#Z795A1#9

2 Likes
8

Oh YES! Very great, this is the solution.
Thanks a lot!

2 Likes
9

You are welcome! To sum this up: we are animating between value A and value B. The value A is a Vector3 (camera.position) so we are reffering it by a pointer. At every animation step this value gets updated thus changing the initial A value. We need to preserve the initial value of A while animating. So you simply clone it. Camera position and target gets updated, but the value of A is not altered. :vulcan_salute:

4 Likes
10

Ok, it’s 4 AM here and I can’t sleep :smiley: So let’s do something you guys will hopefully find useful.

Here is my basic helper function I use to animate my cameras. It’s a bit verbose, but you can make changes to the animation of a property distinctly.

https://playground.babylonjs.com/#Z795A1#12

Usage:
You set position and/or target when calling this method, or alpha/beta/radius (only on a ArcRotateCamera). It doesn’t make sense to set both. When using an ArcRotateCamera and animating position and/or target the angles and radius values are rebuilt every frame. See the observer.

const moveCameraTo = function (
    camera,
    position = null,
    target = null,
    alpha = null,
    beta = null,
    radius = null,
    speed = 60,
    frameCount = 60,
    callBack
) {

So you can (it is cloning the Vector3s so you don’t have to):

// moveCameraTo(camera, null, null, 4, null, null, fps, duration, () => { // animate only the alpha of an ArcRotateCamera
moveCameraTo(camera, newCamPosition, newTargetPosition, null, null, null, fps, duration, () => {
  console.log("All anims ended")
})

Typescript version is available here:

:vulcan_salute:

R.

6 Likes
11

That makes sense. Great to know :wink: