Une brève discussion sur l'idée d'utiliser intelligemment CSS pour créer des effets de vagues

Cet article vous donnera une idée sur la façon d'utiliser intelligemment CSS pour créer un effet de vague. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Cet article présentera un autre effet de vague obtenu en utilisant CSS. L'idée est très intéressante.

Commencez par l'aire d'un triangle courbe en utilisant des intégrales définies

Avant d'entrer dans le sujet, jetons un œil à ceci En mathématiques avancées, nous pouvons utiliser. intégrales définies pour trouver l'aire de deux L'aire d'un graphe à bords incurvés de sous-fonction.

Nous pouvons diviser l'aire sous la courbe en n rectangles fins et hauts Lorsque n s'approche infiniment de l'infini, l'aire de tous les rectangles est égale à l'aire de la figure du bord incurvé.

Deux diagrammes schématiques simples, les images sont tirées de Pourquoi des intégrales définies peuvent-elles être utilisées pour trouver une aire ?  :

Lorsque n s'approche infiniment de l'infini, l'aire de tous les rectangles est égale à l'aire de la figure du bord incurvé :

En utilisant cette idée, nous pouvons également simuler un bord incurvé, c'est-à-dire une ligne ondulée, en CSS à travers plusieurs divs.

Étape 1. Couper le graphique en plusieurs parties

Tout d'abord, nous pouvons définir un conteneur parent avec 12 divs enfants sous le conteneur parent :

<div class="g-container">
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
</div>

Grâce à la mise en page flex, disposez simplement et obtenez un graphique comme celui-ci, avec chaque sous-élément ayant la même hauteur :

.g-container {
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    display: flex;
    align-items: flex-end;
}

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #fff;
}

L'effet est le suivant :

Étape 2. Laissez chaque élément enfant exécuter l'animation de transformation de hauteur avec différents délais négatifs

Ensuite, avec une transformation simple, nous devons faire bouger cette image en changeant le hauteur de chaque élément enfant :

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange 1s infinite ease-in-out alternate;
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

L'effet est le suivant :

Ensuite, il vous suffit de définir un délai négatif de différents temps pour l'animation séquence de chaque sous-élément, et vous pouvez obtenir Un effet de vague préliminaire Afin de réduire la charge de travail, nous utilisons SASS pour le mettre en œuvre :

$count: 12;
$speed: 1s;

.g-item {
    --f: #{$speed / -12};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

De cette façon, nous obtenons un effet de vague préliminaire :

Étape 3. Éliminer l'alias

Comme vous pouvez le voir, l'animation de vague ci-dessus a un certain alias. Ce que nous devons faire ensuite, c'est. pour éliminer ces alias autant que possible.

Méthode 1 : Augmenter le nombre de divs

Selon l'idée d'utiliser des intégrales définies pour trouver l'aire des graphiques à bords incurvés au début, il suffit d'augmenter le nombre de sous-divs autant que possible, c'est-à-dire. Cependant, lorsque le nombre de divs est infini, les bords irréguliers disparaîtront.

Nous pouvons essayer de remplacer les 12 sous-divs ci-dessus par 120. C'est trop laborieux d'écrire 120 divs un par un. Ici, nous utilisons le moteur de template Pug :

div.g-container
 -for(var i=0; i<120; i++)
    div.g-item

.

Pour le code CSS, il vous suffit de modifier le temps de retard de l'animation. Le retard négatif des 120 sous-divs est contrôlé en 1s :

// 12 -- 120
$count: 120;
$speed: 1s;

.g-item {
    // 注意，只有这里发生了变化
    --f: #{$speed / -120};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

De cette façon, nous pouvons obtenir une courbe plus lisse :

Méthode 2 : Simuler l'arc via transform : skew()

Bien sûr, dans des situations réelles, en utilisant autant de divs c'est trop C'est du gaspillage, alors existe-t-il un autre moyen d'éliminer autant que possible les alias lorsque le nombre de divs est relativement faible ?

Ici, nous pouvons essayer d'ajouter différents transform: skewY() aux éléments enfants pendant le processus de transformation de mouvement pour simuler des radians.

Transformons à nouveau le code. Nous allons réduire le nombre de divs et ajouter un autre transform: skewY() effet d'animation à chaque sous-div :

div.g-container
 -for(var i=0; i<24; i++)
    div.g-item

Le code CSS complet est le suivant :

$count: 24;
$speed: 1s;

.g-item {
    // 注意，只有这里发生了变化
    --f: #{$speed / -24};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: 
        heightChange $speed infinite ease-in-out alternate,
        skewChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: 
            calc(var(--f) * #{$i}), 
            calc(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes heightChange {
    from {
        height: var(--h);
    }
    to {
        height: calc(var(--h) + 30px);
    }
}

@keyframes skewChange {
    from {
        transform: skewY(20deg);
    }
    to {
        transform: skewY(-20deg);
    }
}

Pour faciliter la compréhension, jetons d'abord un œil à la transformation de la sous-div avec skewY() ajouté lorsque l'animation de transformation de hauteur est la même :

Vous pouvez voir que chaque transformation a un alias saillant évident. En superposant la transformation de hauteur retardée, la plupart des effets d'alias peuvent être efficacement éliminés :

À ce stade. , Nous avons une autre méthode d'anti-aliasing avec un nombre modéré de divs ! Pour le code complet de tous les effets ci-dessus, vous pouvez cliquer ici :

CodePen -- Effets de vague PureCSS

Utilisation mixte

Enfin, on peut combiner plusieurs différents Les effets de vague sont combinés entre eux pour obtenir quelques effets de combinaison, ce qui est également très bon.

Quelque chose comme ceci :

CodePen -- PureCSS Wave Effects 2

Sur cette base, j'ai pensé nous Le LOGO de Sea Group, la société mère de l'entreprise (Shopee), ressemble à ceci :

Utilisez la solution de cet article pour implémenter une animation de LOGO dynamique pour celui-ci :

Démo CodePen -- PureCSS Wave - Logo Sea Group

Inconvénients

Cette solution Les défauts sont encore très évidents :

• Tout d'abord, c'est un div inutile. Il faut plus de divs pour obtenir l'effet, et plus il y a de divs, meilleur sera l'effet. Bien sûr, s'il augmente jusqu'à un certain niveau, le décalage ne sera pas possible. Pour éviter les
• les crépitements ne peuvent pas être complètement éliminés. C'est le plus fatal ou affecte l'endroit où cela peut vraiment être utile

Bien sûr, le but de cet article est davantage d'explorer la réflexion, de discuter des avantages et des inconvénients de cette méthode, de l'ensemble du processus de réalisation de l'animation et de l'utilisation du temps de retard négatif de l'animation, tous ont une certaine référence et un apprentissage. importance. CSS est toujours très intéressant~

Adresse originale : https://segmentfault.com/a/1190000040017751

Auteur : chokcoco

Plus de programmation Pour connaissances connexes, veuillez visiter :

Vidéo de programmation ! !

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!