クールな充電アニメーションを実現する純粋なCSS

CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。

バッテリーを描く

もちろん、バッテリーを充電するには、まず CSS を使用してバッテリーを描画する必要があります。これは難しくなく、描画するだけです。

ああ、それだ、かろうじて。バッテリーが手に入ったので、直接充電してみましょう。最も単純なアニメーションは、バッテリー全体を色で塗りつぶすことです。

メソッドは多数ありますが、コードは非常にシンプルです。効果を見てみましょう。

味もそれなりにあるので、要求が厳しくなければこれで十分でしょう。青いグラデーションは電力レベルを示し、充電アニメーションはカラーブロックの変位アニメーションによって実現されます。しかし、何かが欠けているような気が常にします。

影と色のバリエーションを追加する

最適化を続行する場合は、いくつかの詳細を追加する必要があります。

バッテリー残量が少ない場合は通常、バッテリーレベルが赤で表示され、バッテリー残量が多い場合は緑で表示されることはご存じのとおりです。カラー ブロック全体に影の変化をいくつか追加して、呼吸しているような感覚を与え、充電効果が実際に動いているように見えるようにします。

知識ポイント

この時点で、実際にわかっている知識は 1 つだけです。

フィルター: hue-rotate() を使用して、グラデーションカラーの色の変化をアニメーション化します。

グラデーション カラーを直接アニメーション化することはできないため、ここではフィルターを使用して色相を調整し、グラデーション カラー変換アニメーションを実現します。

上記の例の完全なデモ: CodePen デモ - バッテリーアニメーション 1

波を追加する

はい、これはほんの小さなマイルストーンです。これからさらに一歩進んでいきます。バッテリーインジケーターの上部は直線で、少し退屈に見えます。ここを修正できます。上部の直線を波状の曲線に変更できれば、よりリアルな効果が得られます。

変換後の効果：

CSS を使用してこの波のスクロール効果を実現するのは、実際には単なるトリックです。詳細については、以前に書いたこの記事を参照してください。

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

知識ポイント

ここでの知識ポイントの 1 つは、CSS を使用して単純な波の効果を実現することです。これはトリックによって実現されます。画像を見るだけで理解できます。

上記の例の完全なデモ: CodePen デモ - バッテリーアニメーション 2

さて、この時点で、上記の効果にデジタル変更を加えると、すでにかなり良い効果が得られます。もちろん、上記の効果はまだ非常に CSS らしく、一目見ただけで CSS を使用して実現できることがわかります。

強力な CSS フィルターを使用して Android の充電アニメーション効果を実現します

下のものはどうですか?

Android スマートフォンを使用している学生の方は、この現象によくご存じでしょう。これは、Android スマートフォンを充電しているときの様子です。これを見て気になったのですが、CSS を使用してこれを行うことはできますか?

いくつか試してみたところ、CSS を使用するとこのアニメーション効果を非常にうまくシミュレートできることがわかりました。

上記の GIF に記録されている効果は、CSS を使用して完全にシミュレートされています。

上記の例の完全なデモ: HuaWei バッテリー充電アニメーション

知識ポイント

知識のポイントを分解すると、最も重要なことは、実際には 2 つのfilter: contrast()とfilter: blur()を使用することです。これにより、この融合効果を非常にうまく実現できます。

2 つのフィルターを別々に取り出します。それぞれの機能は次のとおりです。

filter: blur() : 画像にガウスぼかし効果を設定します。 filter: contrast() : 画像のコントラストを調整します。

しかし、それらが「融合」すると、素晴らしい融合現象が起こりました。

簡単な例を見てみましょう:

2 つの円が交差する過程を注意深く見てください。エッジが互いに接触すると、境界融合効果が生成されます。ガウスぼかしのぼやけたエッジはコントラスト フィルターによって除去され、ガウスぼかしを使用して融合効果が実現されます。

もちろん、この効果については以前の記事でも何度も触れてきました。詳細については、以下をご覧ください。

CSS フレイム? CSS フィルターのヒントと知らない詳細

色変換

もちろん、ここで色の変更を加えることもでき、その効果も非常に良好です。

上記の例の完全なデモ: HuaWei バッテリー充電アニメーション

見落としがちなポイント

filter: blur()およびfilter: contrast()プロパティの値を調整することで、アニメーション効果は実際に大幅に変化する可能性があり、優れた効果を得るには継続的なデバッグが必要です。もちろん、経験もこれには非常に重要な役割を果たします。結局のところ、さらに試してみる必要があります。

やっと

この記事では、徐々に効果が増加する充電アニメーションをいくつか紹介します。この記事では、最も重要な知識ポイントのみを指摘します。ただし、実際の出力プロセスには、この記事では触れられていない細かい点が多数あります。興味のある学生は、デモをクリックしてソースコードをよく確認するか、自分で実装してください。

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

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

ご質問やご提案がございましたら、お気軽にご連絡ください。これはオリジナルの記事であり、私の文章力には限界があります。記事に誤りがある場合はお知らせください。