波効果を作成するための CSS のトリック

純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。

波形曲線を実現するにはベジェ曲線が必要だからです。

純粋な CSS を使用してベジェ曲線を実装することに関しては、現時点では良い方法はありません。

もちろん、他の力 (SVG、CANVAS) の助けを借りれば、いわゆる波の効果を簡単に実現できます。

まず、CSS 以外の方法で実現される波の効果を見てみましょう。

SVG 波効果

SVG を使用すると、3 次ベジェ曲線を簡単に描画できます。

<svg 幅="200px" 高さ="200px" バージョン="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
    <!-- 波 -->
    <g id="波">
    <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
    <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C145 100、41 100、200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
    </パス>
    </g>
    <circle cx="100" cy="100" r="80" ストローク幅="10" ストローク="白" 塗りつぶし="透明"></circle>
    <circle cx="100" cy="100" r="90" ストローク幅="20" ストローク="黄緑" 塗りつぶし="なし" クラス="パーセントパイsvg"></circle>
</svg>

3 次ベジェ曲線の描画の核心は、このセグメントにあります: <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">。興味があれば、自分で調べてみるのもよいでしょう。

キャンバスは波のような効果を実現

キャンバスを使用して波の効果を実現する原理は SVG と同じで、パスを使用して 3 次ベジェ曲線を描画し、アニメーション効果を与えます。

$(関数() {
    キャンバスを $("キャンバス") とします。
    ctx = canvas[0].getContext('2d')とします。
    ラジアン = (Math.PI / 180) * 180 とします。
    startTime を Date.now() とします。
    時間を 2000 とします。
    時計回り = 1 とします。
    cp1x、cp1y、cp2x、cp2y とします。

    // 初期状態 // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // 終了状態 // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);

    リクエストアニメーションフレーム(関数 waveDraw() { 
        t = Math.min(1.0, (Date.now() - startTime) / time); とします。

        if(時計回り) {
            cp1x = 90 + (55 * t);
            cp1y = 28 + (72 * t);
            cp2x = 92 - （51 * t）;
            cp2y = 179 - （79 * t）;
        } それ以外 {
            cp1x = 145 - （55 * t）;
            cp1y = 100 - （72 * t）;
            cp2x = 41 + (51 * t);
            cp2y = 100 + (79 * t);
        }

        ctx.clearRect(0, 0, 200, 200); 
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 3次ベジェ曲線を描画します ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 円弧を描画します ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save(); 

        t == 1 の場合
            開始時刻 = Date.now();
            時計回り = !時計回り;
        }

        アニメーションフレームをリクエストします(waveDraw);
    });
})

主に ctx.bezierCurveTo() 3次ベジェ曲線の動的描画を使用して、波の動きの効果を実現します。興味のある方は自分で勉強してください。

波効果を実現するためのCSS

最初に CSS ではこれを実現できないと言っていませんでしたか?はい、3 次ベジェ曲線を直接描画する方法はありませんが、いくつかのトリックを使用して波の動きの効果をシミュレートできます。この方法を見てみましょう。

原理

原理は非常にシンプルです。正方形に border-radius: 50% を追加すると円になることは誰もが知っています。

幅: 240ピクセル;
高さ: 240px;
背景: #f13f84;
境界線の半径: 50%;

わかりました。border-radius が 50% ではないが、50% に近い場合は、次のような形状になります (角に注意してください。形状全体が少し丸みを帯びていますが、完全に丸いわけではありません)。

幅: 240ピクセル;
高さ: 240px;
背景: #f13f84;
境界線の半径: 40%;

さて、そのようなグラフィックを持つことの意味は何でしょうか?波を作ることはできますか？

効果を確認するために、上のグラフィックを回転してみましょう。

波効果を実現するためのCSS

@keyframes 回転{
    {変換: 回転(0度)}から
    {変換:回転(359度)}
}
.リップル{
    幅: 240ピクセル;
    高さ: 240px;
    背景: #f13f84;
    境界線の半径: 40%;
    アニメーション: 3 秒間、直線的に無限回転します。
}

これを見ても回転の目的が分からない人も多いかもしれませんが、よく見ると波のようなうねりがあるのが分かります。

私たちの目標は、この動的に変化する波状のアニメーションを使用して、波のような効果をシミュレートすることです。

成し遂げる

もちろん、ここで見ているのは全体的な実装図なので、あまり分かりにくいです。では、具体的な実装によってどのような効果が得られるのか、例を一つずつ使って見ていきましょう。

上記の原理を使用して、波動背景効果を作成できます。