Babylon Float Animation Not Setting Proper Values

Questions
1

Got another issue with BABYLON.Animation.

I create an animation using 3 keyframes for a value of 0 to 1.

But when playing the animation, by this time is get to end of animation the values is never 1… as a matter of fact if stops way short of 1.

this is my code for create a Tween Style animation for a float value

        public static CreateTweenAnimation(name:string, targetProperty:string, startValue:number, endValue:number, frameRate:number = 30, loopMode:number = BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT):BABYLON.Animation {
            const keyFrames:any[] = [];
            keyFrames.push({
                frame: 0,
                value: startValue,
            });
            keyFrames.push({
                frame: frameRate,
                value: (startValue > endValue) ? (startValue * 0.5) : (endValue * 0.5),
            });
            keyFrames.push({
                frame: (2 * frameRate),
                value: endValue,
            });
            const result = new BABYLON.Animation(name, targetProperty, frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, loopMode);
            result.setKeys(keyFrames);
            return result;
        }

And i call like this

const tweenAnim:BABYLON.Animation = PROJECT.PortalManager.CreateTweenAnimation("TestTween", "opacity", 0, 1);

const scene:BABYLON.Scene = BABYLON.SceneManager.GetLastCreatedScene();
scene.beginDirectAnimation(blanket.style, [tweenAnim], 0, tweenAnim.getKeys().length, false, speed, ()=>{
                    console.warn("*** FINISHED FADE TO BLANKET ANIMATION: " + tweenAnim.name);
                    console.log(blanket.style.opacity);
});

Here is console log shot… It never get to the full 1 value

Screen Shot 2020-12-01 at 12.15.22 PM
Screen Shot 2020-12-01 at 12.15.22 PM1208×828 148 KB

Is there some kind of quirk when animation a flat value ???

2

well I guess this is wrong.
From the doc: Scene | Babylon.js Documentation

i would say that to should be 30 * 2 (the key frame id of the last key)

3

So that to value for the beginAnimation call is the actual last frame time not just the number of keys ???

4

Yo @Deltakosh … So something like this for getting the last key frame index

        /** Creates an normalized float animation for tweening.  */
        public static CreateTweenAnimation(name:string, targetProperty:string, startValue:number, endValue:number, frameRate:number = 30, loopMode:number = BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT):BABYLON.Animation {
            const lastFrame:number = frameRate;
            const keyFrames:any[] = [];
            keyFrames.push({
                frame: 0,
                value: startValue,
            });
            keyFrames.push({
                frame: lastFrame,
                value: endValue,
            });
            const result = new BABYLON.Animation(name, targetProperty, frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, loopMode);
            result.setKeys(keyFrames);
            return result;
        }

        /** Gets the last key frame index value. */
        public static GetLastKeyFrameIndex(animation:BABYLON.Animation):number {
            let result:number = 0;
            if (animation != null) {
                const keys:BABYLON.IAnimationKey[] = animation.getKeys();
                if (keys != null && keys.length > 0) {
                    const lastKey:BABYLON.IAnimationKey = keys[keys.length - 1];
                    if (lastKey != null) {
                        result = lastKey.frame;
                    }
                }
            }
            return result;
        }

Then i can call begin animation like this:

const speedRatio:number = 1.0;

const tweenAnim:BABYLON.Animation = PROJECT.SceneManager.CreateTweenAnimation("PortalChange", "timer", 0, 1, 30);

const lastFrame:number = PROJECT.SceneManager.GetLastKeyFrameIndex(tweenAnim);

scene.beginDirectAnimation(test, [tweenAnim], 0, lastFrame, false, speedRatio, ()=>{
	console.warn("*** FINISHED ANIMATION: " + tweenAnim.name);
});
5

Thanks @Deltakosh … You Da Man :slight_smile:

1 Like
6

Got another questions… What about disposing an BABYLON.Animation after playing is complete.

I dont see a dispose method for BABYLON.Animation… What is proper way to clean up after completing a manual animation with beginDirectAnimation ???

7

Animations are only CPU side here so removing it from the animation list should be enough to let it go with garbage collection when the browser feels enclined to let it disappear.

8

Thanks Sebastian :slight_smile: