CSSを使用してAndroidシステムの読み込みアニメーションを実装する

CSSを使用してAndroidシステムの読み込みアニメーションを実装する

Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは Android の「リング」です。今日は SVG を使用して Android の「リング」アニメーションを実装し、次のクラスでは iOS の「菊」を実装します。

: GIFのフレーム数が少ないため、実際のアニメーション効果は非常にスムーズです。

の。

xml(svg)

<svg 幅="36" 高さ="36" ビューボックス="0 0 50 50" クラス="a-loading-android">
    <circle cx="25" cy="25" r="20" fill="none"stroke="currentColor"stroke-width="5"></circle>
</svg>

まず、SVG キャンバスのサイズを50x50と定義し、ブラウザで36x36にズームします (この 36 は実際のニーズに合わせて調整できます)。リングの中心座標を25,25半径を 20 (円周は約 125 で、後で使用します) と定義します。色は、親要素の color 属性の値を取得するためにcurrentColorとし、リングの幅は 5 ピクセルとします。CSS を書く前に効果を見てみましょう。

SCSS

.a-ロード中{
    &-アンドロイド{
        アニメーション: 2 秒の線形無限回転;
        変換の原点: 中心 中心;
        >円{
            表示: インラインブロック;
            アニメーション: dash 1500ms easy-in-out infinite;
            stroke-linecap: round; // 終点は円です color: currentColor;
        }

        @keyframes 回転 {
            100% {
                変換: 回転(360度);
            }
        }
        
        @keyframes ダッシュ {
            0% {
                ストロークダッシュ配列: 1, 200;
            }

            50% {
                ストロークダッシュ配列: 100, 200;
                ストロークダッシュオフセット: -45;
            }

            100% {
                ストロークダッシュ配列: 100, 200;
                ストロークダッシュオフセット: -124;
            }
        }
    }
}

ストロークダシャ配列

まず、破線を定義するために使用されるstroke-dasharrayについて説明します。たとえば、 stroke-dasharray="50, 20"実線が50で間隔が20の破線を意味します。

リングも点線で表され、単位実線部分の長さがリングの円周内で変化するとしたら、これは実現できるのではないでしょうか(ハーフリング/フルリングなど)。以下はstroke-dasharrayの値です: 25, 200 / 50, 200 / 100, 200

:

: ここでの200

値はリングの円周よりも大きい限り、破線間のギャップを表すように任意に定義されます。

ストローク-ダッシュオフセット

オフセット。値が正の場合、破線は反時計回りに後退し、値が負の場合、時計回りに前進します (左の図のstroke-dashoffset:0 では、リングの開始点は 3 時の位置にあり、右の図で -10 に設定すると、リングの開始点は時計回りに距離だけオフセットされます)。

アニメーションでは、リングの長さが長くなり、尾の長さが短くなるため、 stroke-dashoffsetと連携する必要があります。

成し遂げる。

アニメーションにおける3つの重要な瞬間

0% 瞬間

アニメーションが 1 サイクル後に突然にならないように、リングに 1 つのポイントのみが表示されるようにします (効果を比較するには、0 に変更します)。

50% 瞬間

リングがリングの 80% 表示されるように、実線の長さを 100 (125*0.8、125 は円周) に設定し、 stroke-dasharray: 100, 200; 、尾が縮んでいるので、 stroke-dashoffset: -45;設定します。

100%の瞬間

0% 状態と同じポイント状態に戻ると、アニメーション サイクルは急激にはなりませんが、50% から 100% までのアニメーションは単なる「末尾の収縮」になります。そのため、これを実現するために、 stroke-dashoffset:-124を使用します。125-124 125-124=1ちょうど 1 ピクセルであり、これでアニメーションが完了します。

全体的なローテーション

Android システムのアニメーションと一致させるために、ボディ全体も回転します。ここでのコードは比較的単純なので、繰り返しません。

アニメーションプロパティの拡張

CSS animationドキュメントを注意深く読むと、 animation: color 6s easy-in-out infinite, dash 1.5s easy-in-out infinite; のように、 animation複数の遷移アニメーションを同時にサポートできること、および複数のアニメーションを分割するために「,」を使用できるanimation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite;

したがって、実際に上記のアニメーションを拡張して、回転と色の変更を同時に実行することができます。

&-アンドロイド{
        アニメーション: 2 秒の線形無限回転;
        変換の原点: 中心 中心;
        >円{
            表示: インラインブロック;
            // 色変更コードアニメーションを追加します: color 6s easy-in-out infinite、 dash 1.5s easy-in-out infinite; 
            ストロークの線のサイズ: 丸い;
            色: 現在の色;
        }
        @keyframes 回転 {
            100% {
                変換: 回転(360度);
            }
        }
        @keyframes ダッシュ {
            0% {
                ストロークダッシュ配列: 1, 200;
            }
            50% {
                ストロークダッシュ配列: 100, 200;
                ストロークダッシュオフセット: -45;
            }
            100% {
                ストロークダッシュ配列: 100, 200;
                ストロークダッシュオフセット: -124;
            }
        }
        @キーフレームの色{
            0%、
            100% {
                ストローク: #6b5c5b;
            }
            40% {
                ストローク: #0057e7;
            }
            66% {
                ストローク: #008744;
            }
            80%、
            90% {
                ストローク: #ffa700;
            }
        }
    }

この記事のコードは、Vue フレームワークであるiviewを参照しています。

要約する

以上が、CSS を使用して Android システムの読み込みアニメーションを実装する方法についてご紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア

>>:  MySQL レプリケーション問題の 3 つのパラメータの分析

推薦する

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...

Nginxはリバースプロキシを使用して負荷分散プロセス分析を実装します

導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...

HTML img タグの alt 属性と title 属性の使い方の紹介

ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...

Linux で XFS パーティション形式のルート ディレクトリを縮小する方法

目次序文システム環境現在のシステムパーティションレイアウトデータのバックアップレスキューモードに入る...

Hyper-V インストール CentOS 8 の問題の分析

CentOS 8 がリリースされてから随分経ちました。Linux 仮想マシンをいじっている人間として...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...

CSS3で作られたレインボーボタンスタイル

結果: 実装コード: html <div class="buttons"&...

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

XHTML と CSS によるオブジェクト指向プログラミング

<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...

データベースSQL SELECTクエリの仕組み

私たちは Web 開発者として、プロの DBA ではありませんが、データベースなしではやっていけませ...

Linux アカウントのパスワードを変更する詳細な例

個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...

VSCode 構成 Git メソッドの手順

Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...