Comment utiliser CSS et GSAP pour implémenter une animation continue avec plusieurs images clés (code source ci-joint)

Le contenu de cet article explique comment utiliser CSS et GSAP pour implémenter une animation continue avec plusieurs images clés (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer. .

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

définit dom, le conteneur contient 10 p sous-éléments, chacun p contient 1 span élément :

<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>

Affichage centré :

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

Définir la taille et le style du conteneur :

.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);
}

Dessiner 1 élément dans le conteneur, qui a une coquep , à l'intérieur se trouve un petit carré blanc 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;
}

Définissez des variables d'indice pour les éléments dans le conteneur et laissez les coques des éléments tourner en séquence pour former un cercle, où outline est Lignes auxiliaires :

.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; }

À ce stade, le dessin des sous-éléments est terminé, puis nous commençons à écrire le script d'animation.
Présentez la bibliothèque GSAP :

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

Définissez une variable représentant le sélecteur d'élément enfant :

let elements = '.container p span';

Déclarez un objet timeline :

let animation = new TimelineMax();

D'abord définissez le mode de saisie de petit (image 1) à grand (image 2). Il n'y a pas de code pour l'image 2. Il est implicite dans la sémantique :

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

Laissez les éléments enfants se transformer en bandes verticales et étalées dans toutes les directions (image 3) :

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

Laissez les bandes verticales tourner en petits carrés (image 4) :

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

Laissez les petits carrés se transformer en longues bandes horizontales pour former un cercle (image 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});

Notez que scrimba plantera lors de l'enregistrement de trop d'images, donc les images 6 à 4 11 ne sont pas reflétées dans la vidéo.
Laissez le cercle converger vers l'intérieur et la ligne devient plus fine (image 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});

Laissez la ligne osciller vers la gauche (image 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'});

Encore une fois, laissez la ligne bascule vers la droite (image 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'});

Changez ensuite la ligne horizontale en ligne verticale. La forme est similaire à celle de l'image 3, sauf que la ligne est plus fine et plus convergente (. 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});

Changez ensuite la ligne verticale en ligne horizontale. La forme est similaire à la 5ème image, mais la ligne est plus courte (10ème image) :

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})

<🎜. >La ligne horizontale est légèrement vers l'extérieur. Répartie en points (image 11) :

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%'});

Laissez les points se déformer en lignes verticales et rétrécir vers l'intérieur. La distance de ce changement est longue, donc le temps d'animation est également. plus long (image 12 Image) :

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});

Laissez les lignes verticales s'étendre rapidement du centre vers l'extérieur, faites une pause un instant avant de s'étendre, comme si les lignes étaient émises (Image 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});

Utilisez la fonction de mise à l'échelle de l'échelle de temps pour doubler la vitesse de lecture de l'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);

Modifiez le code qui déclare la chronologie pour que l'animation soit lue de manière répétée :

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

À ce stade, l'animation est terminée.

Cachez le contenu à l'extérieur du conteneur et supprimez les lignes auxiliaires

.container {
    overflow: hidden;
}

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

Enfin, décorez les coins de la page :

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;
}

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'une paire de ciseaux (code source ci-joint)

Comment utiliser du CSS pur pour obtenir un effet d'animation d'illusion de rayures (avec le code source)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!