So verwenden Sie CSS und GSAP, um eine kontinuierliche Animation mit mehreren Keyframes zu implementieren (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS und GSAP zur Implementierung einer kontinuierlichen Animation mit mehreren Schlüsselbildern (Quellcode im Anhang). Ich hoffe, es hilft .

Effektvorschau

Quellcode-Download

https://github.com/comehope/front- end-daily-challenges

Codeinterpretation

definiert dom, der Container enthält 10 p Unterelemente, jedes p enthält 1 span Element:

<figure class="container">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
</figure>

Anzeige in der Mitte:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

Definieren Sie die Größe und den Stil des Containers:

.container {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, tomato, gold);
    border-radius: 3%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Zeichnen Sie 1 Element in den Container, das eine Hülle p und innen ein weißes kleines Quadrat < hat 🎜>: span

.container {
    position: relative;
}

.container p {
    position: absolute;
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container p span {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: white;
}

definiert eine Indexvariable für das Element im Container und lässt die Hülle des Elements der Reihe nach rotieren, um einen Kreis zu bilden, wobei

eine Hilfslinie ist: outline

.container p {
    outline: 1px dashed black;
    transform: rotate(calc((var(--n) - 1) * 36deg));
}

.container p:nth-child(1) { --n: 1; }
.container p:nth-child(2) { --n: 2; }
.container p:nth-child(3) { --n: 3; }
.container p:nth-child(4) { --n: 4; }
.container p:nth-child(5) { --n: 5; }
.container p:nth-child(6) { --n: 6; }
.container p:nth-child(7) { --n: 7; }
.container p:nth-child(8) { --n: 8; }
.container p:nth-child(9) { --n: 9; }
.container p:nth-child(10) { --n: 10; }

An diesem Punkt ist das Zeichnen der Unterelemente abgeschlossen, und dann beginnen wir mit dem Schreiben des Animationsskripts.

Stellen Sie die GSAP-Bibliothek vor:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

Definieren Sie eine Variable zur Darstellung des Unterelementselektors:

let elements = '.container p span';

Deklarieren Sie ein Zeitleistenobjekt:

let animation = new TimelineMax();

Legen Sie zuerst die Eingabemethode fest Um von klein (Frame 1) zu groß (Frame 2) zu wechseln, gibt es keinen Code für Frame 2. Er ist in der Semantik implizit:

animation.from(elements, 1, {scale: 0});

Lassen Sie die untergeordneten Elemente zu vertikalen Streifen werden, die sich in alle Richtungen ausbreiten (Frame 3):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25});

Lassen Sie die vertikalen Balken in kleine Quadrate rotieren (Frame 4):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180});

Lassen Sie die kleinen Quadrate in horizontale Balken umwandeln, die einen Kreis bilden (Frame 5):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1});

Beachten Sie, dass die Bilder 6 bis 11 nicht im Video wiedergegeben werden, da Scrimba bei der Aufnahme zu vieler Bilder abstürzt.

Lassen Sie den Kreis nach innen zusammenlaufen und die Linie dünner werden (Frame 6):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1});

Lassen Sie die Linie nach links schwingen (Frame 7):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'});

Lassen Sie die Linie nach links gehen Wieder rechts schwingend (Frame 8):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'});

Dann ändern Sie die horizontale Linie in eine vertikale Linie. Die Form ähnelt der in Frame 3, außer dass die Linie dünner und konvergenter ist (Frame 9):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1});

Dann ändern Sie die vertikale Linie in eine horizontale Linie. Die Form ähnelt dem 5. Frame, aber die Linie ist kürzer (10. Frame):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})

Die horizontale Linie breitet sich leicht aus und wird ein Punkt (11. Frame)):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'});

Lassen Sie den Punkt in eine vertikale Linie verformen und nach innen schrumpfen. Der Abstand dieser Änderung ist lang, daher ist auch die Animationszeit länger (Frame 12):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0});

Lassen Sie den Punkt vertikal sein. Die Linien breiten sich schnell von der Mitte nach außen aus und halten einen Moment inne, bevor sie sich ausbreiten, als würden die Linien ausgesendet (Bild 13):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5});

Verwenden Sie die Zeitskalierungsfunktion So verdoppeln Sie die Wiedergabegeschwindigkeit der Animation:

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5})
    .timeScale(2);

Ändern Sie den Code, der die Zeitleiste deklariert, damit die Animation wiederholt abgespielt wird:

let animation = new TimelineMax({repeat: -1, repeatDelay: 1});

An diesem Punkt ist die Animation abgeschlossen.

Verstecken Sie den Inhalt außerhalb des Containers und löschen Sie die Hilfslinien;

.container {
    overflow: hidden;
}

.container p {
    /* outline: 1px dashed black; */
}

Zum Schluss dekorieren Sie die Ecken der Seite:

body {
    overflow: hidden;
}

body::before,
body::after {
    content: '';
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(
        transparent 25%,
        gold 25%, gold 50%,
        tomato 50%
    );
}

body::before {
    left: -30vmin;
    bottom: -30vmin;
}

body::after {
    right: -30vmin;
    top: -30vmin;
}

Fertig!

Verwandte Empfehlungen:

Wie man mit reinem CSS den Effekt einer Schere erzielt (Quellcode im Anhang)

Wie um reines CSS zu verwenden, um einen Streifen-Illusion-Animationseffekt zu erzielen (mit Quellcode)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS und GSAP, um eine kontinuierliche Animation mit mehreren Keyframes zu implementieren (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!