Animating Rectangle object in FullscreenUI

Questions
,
1

HI, I’m trying to create simple notification system for my game. I’m stuck on very simple animation where i would like to make rectangle with text move from top on -180px (where rect in hidden) to 0px (where it is whole visible). I have no idea how i can make this animation. I’ve tried some of the solutions that i found on forum, but i can’t managed them to work. I’m using typescript and when i tried to use Animation.CreateAndStartAnimation() I can’t pass Rectangle object to it :confused:
I’ve also tried something like this:

const showAnimation = new Animation(
            "showNotificationAnimation",
            "top",
            60,
            Animation.ANIMATIONTYPE_FLOAT,
        );

        const showAnimationKeys = [];
        showAnimationKeys.push({
            frame: 0,
            value: -180,
        });

        showAnimationKeys.push({
            frame: 60,
            value: 0,
        });
        showAnimation.setKeys(showAnimationKeys);
        App.getInstance().getScene().getUIElement().animations = [];
        App.getInstance()
            .getScene()
            .getUIElement()
            .animations.push(showAnimation);
        App.getInstance()
            .getScene()
            .getScene()
            .beginAnimation(
                App.getInstance().getScene().getUIElement(),
                0,
                60,
                false,
                1,
                () => {
                    console.log("Animation end");
                }
            );

        App.getInstance().getScene().getUIElement().addControl(this.element);
        this.element.addControl(textElement);

but it didn’t work either…
EDIT:
this.element - Rectangle
App.getInstance().getScene().getUIElement() - FullscreenUI

2

Can you create a playground with what you are trying?

3

I’ve got something like that:
https://playground.babylonjs.com/#S5VZWW

4

This PG doesn’t work for me :frowning:

5

And that’s the problem, I don’t know how to make this animation running.
@bghgary Sorry for the problem, I’ve managed to fix the playground
https://playground.babylonjs.com/#S5VZWW#1
I don’t know why this PG was working while saving it…

6

Got some help from @Evgeni_Popov and @Deltakosh.

Here is a PG that does it: https://playground.babylonjs.com/#S5VZWW#3

1 Like
7

Thanks! I’m new into babylon and i haven’t heard about BeginDirectAnimation. It’s working great!

1 Like