CSS で波の効果を作成するためのアイデア

以前、純粋な CSS を使用して波の効果を実現する方法をいくつか紹介しました。それらについては、次の 2 つの関連記事があります。

純粋な CSS で波の効果を実現!

CSSを使用してクールな充電アニメーションを実現する

この記事では、CSS を使用して実現される別の波効果を紹介します。このアイデアは非常に興味深いものです。

まずは定積分から曲線三角形の面積を求めるところから始めましょう

本題に入る前に、これを見てみましょう。高度な数学では、定積分を使用して、二次関数の曲線の辺の面積を求めることができます。

曲線の下の面積を n 個の細長い長方形に分割できます。n が無限大に近づくと、すべての長方形の面積は曲線図形の面積と等しくなります。

「なぜ定積分を使って面積を計算できるのか?」から抜粋した 2 つの簡単な図:

n が無限大に近づくと、すべての長方形の面積は曲線図形の面積に等しくなります。

この考え方を使用すると、複数の div を通じて CSS で曲線のエッジ、つまり波線をシミュレートすることもできます。

ステップ1. 画像を複数の部分に切り分ける

まず、12 個の子 div を持つ親コンテナーを定義します。

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

flexレイアウトにより、シンプルなレイアウトが実現され、各子要素の高さは同じになります。

.g-コンテナ{
    幅: 200ピクセル;
    高さ: 200px;
    境界線: 2px 実線 #fff;
    ディスプレイ: フレックス;
    align-items: flex-end;
}

.g-アイテム{
    フレックス成長: 1;
    高さ: 60px;
    背景色: #fff;
}

効果は以下のとおりです。

ステップ2. 各子要素に異なる負の遅延で高さ変換アニメーションを実行させる

次に、簡単な変更を加えてこのグラフをアニメーション化する必要があります。これは、各子要素の高さを変更することで実現できます。

.g-アイテム{
    フレックス成長: 1;
    高さ: 60px;
    背景色: #000;
    アニメーション: heightChange 1s infinite easy-in-out alternate;
}

@keyframes 高さ変更 {
    から {
        高さ: 60px;
    }
    に {
        高さ: 90px;
    }
}

効果は以下のとおりです。

次に、各子要素のアニメーション シーケンスに異なる時間の負の遅延を設定するだけで、予備的な波の効果が得られます。作業負荷を軽減するために、SASS を使用してこれを実現します。

$カウント: 12;
速度: 1秒;

.g-アイテム{
    --f: #{$speed / -12};
    フレックス成長: 1;
    高さ: 60px;
    背景色: #000;
    アニメーション: heightChange $speed infinite easy-in-out alternate;
}

@for $i から 0 から $count まで {
    .g-item:n番目の子(#{$i + 1}) {
        アニメーション遅延: calc(var(--f) * #{$i});
    }
}

@keyframes 高さ変更 {
    から {
        高さ: 60px;
    }
    に {
        高さ: 90px;
    }
}

このようにして、予備的な波動効果が得られます。

ステップ3. エイリアシングを排除する

ご覧のとおり、上記の波のアニメーションにはギザギザのエッジがあります。次に行う必要があるのは、これらのギザギザのエッジを可能な限り排除することです。

方法1: divの数を増やす

最初に定積分を使用して曲線のエッジ図形の面積を求めるというアイデアによれば、できるだけサブdivの数を増やすだけで済みます。divの数が無限大になると、ギザギザのエッジは消えます。

上記の 12 個の子 div を 120 個に置き換えてみます。120 個の div を 1 つずつ記述するのは面倒です。ここでは Pug テンプレート エンジンを使用します。

div.gコンテナ
 -for(var i=0; i<120; i++)
    div.g-アイテム

CSS コードでは、アニメーションの遅延時間を変更するだけです。120 個の子 div の負の遅延は 1 秒以内に制御されます。

// 12 -- 120
$カウント: 120;
速度: 1秒;

.g-アイテム{
    // これだけが変更されたことに注意してください -- f: #{$speed / -120};
    フレックス成長: 1;
    高さ: 60px;
    背景色: #000;
    アニメーション: heightChange $speed infinite easy-in-out alternate;
}

@for $i から 0 から $count まで {
    .g-item:n番目の子(#{$i + 1}) {
        アニメーション遅延: calc(var(--f) * #{$i});
    }
}

この方法で、より滑らかな曲線を得ることができます。

方法 2: transform: skew() を使用してラジアンをシミュレートする

もちろん、現実的には、これほど多くの div を使用するのは無駄です。では、div の数が比較的少ない場合に、エイリアシングを可能な限り排除する方法は他にありますか?

ここで、モーション変換中に子要素に別のtransform: skewY()を追加して、円弧をシミュレートすることができます。

もう一度コードを変更してみましょう。div の数を減らし、各子 div にtransform: skewY()アニメーション効果を追加します。

div.gコンテナ
 -for(var i=0; i<24; i++)
    div.g-アイテム

完全な CSS コードは次のとおりです。

$カウント: 24;
速度: 1秒;

.g-アイテム{
    // これだけが変更されたことに注意してください -- f: #{$speed / -24};
    フレックス成長: 1;
    高さ: 60px;
    背景色: #000;
    アニメーション： 
        heightChange $speed 無限イーズインアウト 交互、
        skewChange $speed 無限のease-in-out alternate;
}

@for $i から 0 から $count まで {
    .g-item:n番目の子(#{$i + 1}) {
        アニメーション遅延: 
            calc(var(--f) * #{$i})、 
            calc(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes 高さ変更 {
    から {
        高さ: var(--h);
    }
    に {
        高さ: calc(var(--h) + 30px);
    }
}

@keyframes skewChange {
    から {
        変換: skewY(20deg);
    }
    に {
        変換: skewY(-20deg);
    }
}

理解しやすくするために、まず、高さ変換アニメーションが一貫している場合にskewY()を追加して子 div がどのように変換されるかを見てみましょう。

各変換には明らかなギザギザのエッジがあることがわかります。遅延高さ変換を追加することで、ギザギザのエッジのほとんどを排除できます。

この時点で、適度な数の div を使用してエイリアシングを排除する別の方法が得られました。上記のすべてのエフェクトの完全なコードは、次の場所にあります。

CodePen – PureCSS 波効果

複合利用

最後に、いくつかの可変パラメータを調整して複数の異なる波の効果を組み合わせて、複合効果を得ることもできます。これも非常に便利です。

次のようなものです:

CodePen – PureCSS 波効果 2

これを踏まえて、弊社（Shopee）の親会社であるSea Groupのロゴを考えてみますと、次のようになります。

この記事のソリューションを使用すると、動的なロゴ アニメーションを実装できます。

CodePen デモ - PureCSS Wave - Sea Group ロゴ

欠点

このソリューションの欠点は依然として明らかです。

まず、無駄なdivです。効果を出すにはdivの数が多く必要で、divの数が多いほど効果は上がります。もちろん、ある程度まで増やすとラグは避けられず、ギザギザも完全には解消できません。ここが一番致命的で、本当に役に立つところです。

もちろん、この記事の目的は、あなたの思考を広げ、この方法の長所と短所を探り、アニメーションのプロセス全体を理解し、アニメーションの負の遅延時間を使用することです。これらはすべて、何らかの参考と学習の意義があります。 CSSは相変わらず面白いですね〜🤣

やっと

さて、この記事はこれで終わりです。お役に立てれば幸いです😃

CSS を使用して波の効果を作成するアイデアに関するこの記事はこれで終わりです。CSS を使用して波を作成する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。