Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser D3 et GSAP pour obtenir un effet de danse (code source ci-joint)

不言
Libérer: 2018-09-26 17:22:55
original
2390 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser D3 et GSAP pour obtenir un effet de danse (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous.

Aperçu de l'effet

Comment utiliser D3 et GSAP pour obtenir un effet de danse (code source ci-joint)

Téléchargement du code source

https://github.com/comehope/front-end-daily -défis

Interprétation du code

Définissez dom, le conteneur contient 2 sous-conteneurs, .horizontal représente un segment de ligne horizontal, .vertical représente un segment de ligne vertical, chaque sous-conteneur contient 4 éléments enfants :

<div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}
Copier après la connexion

Définissez la taille du conteneur, où --side-length est le nombre d'éléments de chaque côté de la matrice carrée :

.container {
    --side-length: 2;
    position: relative;
    width: calc(40px * calc(var(--side-length)));
    height: calc(40px * calc(var(--side-length)));
}
Copier après la connexion

Utilisation La disposition en grille organise les sous-éléments, et les 4 éléments sont disposés dans une matrice carrée 2*2 :

.container .horizontal,
.container .vertical {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--side-length), 1fr);
}
Copier après la connexion

définit le style des sous-éléments, le sous -les éléments à l'intérieur de .horizontal sont des barres horizontales, les sous-éléments à l'intérieur de .vertical L'élément est une barre verticale :

.container .horizontal span {
    width: 40px;
    height: 10px;
    background: #fff;
    margin: 15px 0;
}

.container .vertical span {
    width: 10px;
    height: 40px;
    background: #fff;
    margin: 0 15px;
}
Copier après la connexion

À ce stade, la disposition statique est terminée, puis d3 est utilisé pour traiter par lots les éléments enfants.
Présentez la bibliothèque d3 :

<script></script>
Copier après la connexion
Copier après la connexion

Supprimez le nœud dom du sous-élément dans le fichier html et supprimez les variables css déclarées dans le fichier css.
Définissez le nombre d'éléments de chaque côté de la matrice carrée, et attribuez cette valeur à la variable css :

const SIDE_LENGTH = 2;

let container = d3.select('.container')
    .style('--side-length', SIDE_LENGTH);
Copier après la connexion

Définissez une fonction qui ajoute des span sous-éléments, en ajoutant des éléments horizontaux et verticaux sous-éléments respectivement. :

function appendSpan(selector) {
    container.select(selector)
    .selectAll('span')
    .data(d3.range(SIDE_LENGTH * SIDE_LENGTH))
    .enter()
    .append('span');
}

appendSpan('.horizontal');
appendSpan('.vertical');
Copier après la connexion

À ce stade, la disposition a été modifiée en dynamique. Vous pouvez créer des matrices carrées avec différentes longueurs de côté en modifiant la valeur de SIDE_LENGTH. La déclaration créera une matrice carrée de 5 * 5 :

const SIDE_LENGTH = 5;
Copier après la connexion

Ensuite, utilisez GSAP pour créer l'animation. (Remarque : étant donné que Scrimba plantera lors de l'utilisation de gsap, la démonstration vidéo utilise l'animation CSS, mais Codepen et github utilisent l'animation gsap)
Présentation de la bibliothèque GSAP :

<script></script>
Copier après la connexion
Copier après la connexion

Déclarer les variables d'animationanimation , déclarez les variables $horizontalSpan et $verticalSpan représentant les éléments dom :

let animation = new TimelineMax({repeat: -1});
let $horizontalSpan = '.container .horizontal span';
let $verticalSpan = '.container .vertical span';
Copier après la connexion

Créez d'abord l'animation de la barre horizontale, qui est divisée en 4 étapes. Le dernier paramètre de chaque to instruction est l'. nom de l'étape. :

animation.to($horizontalSpan, 1, {rotation: 45}, 'step1')
    .to($horizontalSpan, 1, {x: '-10px', y: '-10px'}, 'step2')
    .to($horizontalSpan, 1, {rotation: 0, x: '0', y: '0', scaleY: 2, scaleX: 0.5}, 'step3')
    .to($horizontalSpan, 1, {rotation: 90, scaleY: 1, scaleX: 1}, 'step4')
Copier après la connexion

Créer l'animation de la barre verticale. Le nom de l'étape de l'instruction to est le même que le nom de l'étape de la barre horizontale, afin de conserver l'animation. synchronisé avec la barre horizontale :

animation.to($verticalSpan, 1, {rotation: 45}, 'step1')
    .to($verticalSpan, 1, {x: '10px', y: '10px'}, 'step2')
    .to($verticalSpan, 1, {x: '0', y: '0', scaleX: 2, scaleY: 0.5}, 'step3')
    .to($verticalSpan, 1, {rotation: 90, scaleX: 1, scaleY: 1}, 'step4');
Copier après la connexion

à la fin de l'animation, utilisez la fonction de mise à l'échelle de l'échelle de temps pour doubler la vitesse de lecture de l'animation :

animation.timeScale(2);
Copier après la connexion

Enfin, changez de côté longueur de la matrice carrée à 10. Plus la matrice carrée est grande, plus elle sera puissante :

const SIDE_LENGTH = 10;
Copier après la connexion

Fait !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!