SVG 3D: Erstellen, Drehen und Animieren


    Vor etwas mehr als einer Woche musste ich im Rahmen des Telegrammwettbewerbs in die „magische Welt“ von SVG, mathematischen Formeln, Optimierung und Animation eintauchen. Die Wettbewerbsaufgabe bestand darin, ein ziemlich einfaches Diagramm für JS zu erstellen, aber einige der Nuancen der Aufgabe und die Betonung der Leistung machten es interessant. In Anbetracht des Wunsches, etwas mit einem Anspruch auf Sieg zu schaffen, war es notwendig, ein wenig tiefer als die übliche Schwelle für typische (und nicht so) Projekte aus der Welt der Front-End-Entwicklung einzutauchen.


    Mit der Fertigstellung der Arbeiten hat es nicht geklappt, aber diese Zeit wurde nicht verschwendet. Die Hauptentdeckung war die Fähigkeit, mit 3D-Grafiken in SVG zu arbeiten! Erstellen von Modellen, Drehen entlang einer ausgewählten Achse, Animationen gemäß einem Szenario und vieles mehr - all dies ist hier und jetzt verfügbar.


    Das wichtigste


    Initialisieren eines SVG-Elements als 3D:



    Drehung um eine bestimmte Achse:


    polyLine.rotateX(45);
    polyLine.rotateY(90);

    Szenen hinzufügen und Animation starten:


    polyLine.addAnimScene('rotateX', 45);
    polyLine.addAnimScene('rotateZ', 60);
    ...
    polyLine.runAnimScene(delay);

    Demo


    https://shtange.github.io/svg-3d/ ( Quellen )


    Jetzt auch beliebt: