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

効果は次のとおりです。

ステップ 2. 各子要素で、さまざまな負の遅延を使用して高さ変換アニメーションを実行します。

次に、単純な変換を使用して、この画像を動かす必要があります。各子要素の高さを変更することによる実装:

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

効果は次のとおりです:

次に、異なる負の遅延を設定するだけです。各子要素のアニメーション シーケンスの時間に応じて、予備的なウェーブ エフェクトを取得できます。ここでの作業負荷を軽減するために、SASS を使用して実装します:

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

このようにして、予備的なウェーブ エフェクトを取得します:

ステップ 3. エイリアスを除去する

ご覧のとおり、上記の波のアニメーションには特定のエイリアスがあります。次にしなければならないのは、これらをできるだけ排除することです。

方法 1: div の数を増やす

最初に定積分を使用して曲線エッジ グラフィックスの面積を求めるという考えに従って、サブ div の数をできるだけ増やすだけで済みます。ただし、div の数が無限になると、ギザギザのエッジが消えてしまいます。

上記の 12 個のサブ div を 120 個に置き換えてみます。120 個の div を 1 つずつ記述するのは大変です。ここでは

Pug テンプレート エンジンを使用します:

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

CSS コードの場合、アニメーションの遅延時間を変更するだけで済みます。120 個のサブディビジョンの負の遅延は 1 秒以内に制御されます:

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

このようにして、より滑らかな曲線を取得できます。

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

もちろん、実際の状況では、非常に多くの div を使用します。多すぎるのはもったいないので、div数が比較的少ない場合にエイリアシングを極力なくす方法はないでしょうか？

ここでは、ラジアンをシミュレートするために、モーション変換プロセス中に子要素に別の

transform: skewY() を追加してみることができます。

コードを再度変換しましょう。div の数を減らし、

transform: skewY() のアニメーション効果を各サブ div に追加します:

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

Complete CSS コードは次のとおりです。

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

理解を容易にするために、まず、高さの変換アニメーションが一貫している場合に

skewY() を追加した子 div の変換を確認します。

各変換には明らかな突出エイリアシングがあることがわかります。遅延高さ変換を重ね合わせると、エイリアシング効果のほとんどを効果的に除去できます。

現時点では、適度な数の div を使用してアンチエイリアシングを行う別の方法があります。上記のエフェクトすべての完全なコードについては、ここをクリックしてください:

CodePen -- PureCSS Wave Effects

混合使用

最後に、いくつかの可変パラメータを調整して、いくつかの異なる Wave エフェクトを組み合わせることができます。いくつかの組み合わせ効果を得るために一緒に組み合わせると、これも非常に優れています。

こんな感じ:

CodePen -- PureCSS Wave Effects 2

これを踏まえると、私はこう思います。会社 (Shopee) の親会社である Sea Group のロゴは次のようになります:

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

CodePen デモ -- PureCSS Wave - Sea Group ロゴ

欠点

#この解決策 欠点は依然として非常に明白です:

• まず第一に、これは役に立たない div であり、効果を達成するにはより多くの div が必要であり、div が多ければ多いほど、効果は向上します。もちろん、あるレベルまで上げればラグは発生しません。回避された
• ジャギーを完全に除去することはできません。これが最も致命的であるか、実際に役立つ場所に影響を与えます。

もちろん、この記事の目的はもっと探求することであり、この方法の長所と短所を考え、議論すること、アニメーションを実現するプロセス全体、およびアニメーションの負の遅延時間の使用方法はすべて、何らかの参考になります。そして学習の意義。 CSS は依然として非常に興味深いです ~

元のアドレス: https://segmentfault.com/a/1190000040017751

作者: chokcoco

その他のプログラミング関連知識については、プログラミング ビデオ をご覧ください。 ！

以上がCSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。