babylon.js给GUI添加动画效果

babylon.js给GUI添加动画效果

let fullScreenUI

class Playground {

    public static scene

    public static CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): BABYLON.Scene {
        // This creates a basic Babylon Scene object (non-mesh)
        Playground.scene = new BABYLON.Scene(engine);

        // This creates and positions a free camera (non-mesh)
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), Playground.scene);
        fullScreenUI = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(
            "fullScreenUI"
        );

        // This targets the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());

        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);

        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), Playground.scene);

        // Default intensity is 1. Let's dim the light a small amount
        light.intensity = 0.7;

        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, Playground.scene);

        // Move the sphere upward 1/2 its height
        sphere.position.y = 1;

        // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
        var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, Playground.scene);

        new NotificationN(NotificationType.Success, "Test notification", 5);

        return Playground.scene;
    }
}

enum NotificationType {
    Success = 1,
    Error = 2,
    Info = 3,
    Warning = 4,
}

class NotificationN {
    private element: BABYLON.GUI.Rectangle;

    constructor(
        type: NotificationType = NotificationType.Info,
        message: string,
        time = 5
    ) {
        this.createNotificationElement(type, message);
        setTimeout(() => {
            this.removeNotificationElement();
        }, time * 1000);
    }

    private createNotificationElement(type: NotificationType, text: string) {
        const textElement = new BABYLON.GUI.TextBlock("notificationText", text);
        textElement.color = "white";
        textElement.resizeToFit = true;

        this.element = new BABYLON.GUI.Rectangle("notificationContainer");
        this.element.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        this.element.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        this.element.width = "100%";
        this.element.height = "180px";
        this.element.top = -180;
        this.element.color = "transparent";
        this.element.background = this.getBackgroundColor(type);

        const showAnimation = new BABYLON.Animation(
            "showNotificationAnimation",
            "top",
            60,
            BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        );
        const showAnimationKeys = [];
        showAnimationKeys.push({
            frame: 0,
            value: -180,
        });
        showAnimationKeys.push({
            frame: 60,
            value: 0,
        });
        showAnimation.setKeys(showAnimationKeys);
		
        Playground.scene.beginDirectAnimation(
                this.element,
                [showAnimation],
                0,
                60,
                false,
                1,
                () => {
                    console.log("Animation end");
                }
            );

        fullScreenUI.addControl(this.element);
        this.element.addControl(textElement);
    }

    private removeNotificationElement() {
        fullScreenUI.removeControl(this.element);
    }

    private getBackgroundColor(type: NotificationType): string {
        switch (type) {
            case NotificationType.Success:
                return "#059669";
            case NotificationType.Error:
                return "#DC2626";
            case NotificationType.Info:
                return "#D97706";
            case NotificationType.Info:
                return "#2563EB";
        }
    }
}