Combate diario frontal: el video 144 # muestra cómo usar D3 y GSAP para crear una animación de baile colectiva

Vista previa del efecto

Presione el botón "haga clic en vista previa" a la derecha para obtener una vista previa en la página actual y haga clic en el enlace para obtener una vista previa en pantalla completa.

https://codepen.io/comehope/pen/gdVObN

Video interactivo

Este video es interactivo, puede pausar el video en cualquier momento y editar el código en el video.

Utilice cromo, safari, borde para mirar.

https://scrimba.com/p/pEgDAM/caRLack

Descarga del código fuente

Descargue el código fuente completo de la serie diaria de combates frontales de github:

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

Interpretación del código

Definir dom. El contenedor contiene 2 subcontenedores, que .horizontalrepresentan segmentos de línea horizontales y .verticalsegmentos de línea vertical. Cada subcontenedor contiene 4 subelementos:

<div class="container">
    <div class="horizontal">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="vertical">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Pantalla central:

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

Tamaño del conjunto de recipiente, donde --side-lengthes el número de elementos de cada lado del cuadrado:

.container {
    --side-length: 2;
    position: relative;
    width: calc(40px * calc(var(--side-length)));
    height: calc(40px * calc(var(--side-length)));
}

Organice los elementos secundarios en un diseño de cuadrícula y organice los 4 elementos en una matriz cuadrada de 2 * 2:

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

Establezca el estilo .horizontalde los elementos secundarios , los elementos secundarios internos son barras horizontales y los .verticalelementos secundarios internos son barras verticales:

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

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

En este punto, el diseño estático está completo y luego usa d3 para procesar por lotes los elementos secundarios.
Introduce la biblioteca d3:

<script src="https://d3js.org/d3.v5.min.js"></script>

Elimine el nodo dom del elemento hijo en el archivo html y elimine la variable css declarada en el archivo css.
Defina el número de elementos en cada lado de la matriz cuadrada y asigne este valor a la variable css:

const SIDE_LENGTH = 2;

let container = d3.select('.container')
    .style('--side-length', SIDE_LENGTH);

Adición de un definido spanelemento de función de niño, se añadieron a los sub-elementos horizontales y verticales:

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

appendSpan('.horizontal');
appendSpan('.vertical');

En este caso, el diseño se ha cambiado a dinámico, puede modificar SIDE_LENGTHpara crear diferente longitud del lado del cuadrado de valor, como por ejemplo la siguiente declaración creará un cuadrado de 5 * 5:

const SIDE_LENGTH = 5;

Luego, use GSAP para crear la animación. (Nota: debido a que scrimba se bloqueará al usar gsap, la demostración de video usa animación css, pero codepen y github usan animación gsap)
Introduzca la biblioteca GSAP:

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

Animación declaración de variables animation, una declaración en nombre de los elementos DOM de la variable $horizontalSpany $verticalSpan:

let animation = new TimelineMax({repeat: -1});
let $horizontalSpan = '.container .horizontal span';
let $verticalSpan = '.container .vertical span';

Crear barra de animación, un total de 4 pasos, cada uno todel último parámetro es el nombre de la exposición de las etapas de:

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

Luego cree la animación de la barra vertical. toEl nombre del paso de la instrucción es el mismo que el nombre del paso de la barra horizontal para mantener la animación sincronizada con la barra horizontal:

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

Al final de la animación, use la función de escala de escala de tiempo para duplicar la velocidad de reproducción de la animación:

animation.timeScale(2);

Finalmente, cambie la longitud lateral del cuadrado a 10, cuanto más grande sea el cuadrado, más poderoso será:

const SIDE_LENGTH = 10;

Ya terminaste!