gsap animation - import nur ein svg oder mehrere svgs

Ich würde gerne "komplexe" Animation mit gsap und svgs tun. aber ich weiß nicht, was der beste Ansatz dazu ist. ist es besser zu erstellen und eine einzigartige Svg mit allen Elementen zu importieren oder vielleicht ist es besser 4 verschiedene Svgs?gsap animation - import nur ein svg oder mehrere svgs

Ich habe 4 verschiedene Charaktere: ein Baum, eine Lampe, ein Schreibtisch und ein Mann. im Grunde ist meine Animation bewegen die Objekte auf dem X, und erscheinen und zu verschwinden Zeug.

Quelle

2016-08-21 mattia

Wenn die Elemente der Animation Teil einer komplexen Animation sind, können Sie hierfür ein einzelnes SVG verwenden.

Um das DOM des SVG über CSS und JavaScript zu steuern, müssen Sie das SVG direkt in Ihre HTML-Seite einfügen. Nicht über ein Img-Tag oder Objekt-Tag oder ähnliches einbetten.

<body> 
    <h1>My SVG Animation</h1> 

    <svg width="100" height="100" viewBox="0 0 300 100"> 
    <circle class="animation-element-01" cx="50" cy="50" r="40"/> 
    <rect class="animation-element-01" x="150" y="20" width="150" height="150"/> 
    <!-- etc --> 
    </svg> 

</body>

Ein weiterer Vorteil dieser Methode ist, dass es keine zusätzlichen HTML-Anfragen gibt.

Plus die ganze Animation kann über die ViewBox reaktionsfähig gemacht werden.

Quelle

2016-08-23 12:29:22 Matthias

gsap animation - import nur ein svg oder mehrere svgs

Antwort

Verwandte Themen