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 つのパラメータの分析

推薦する

Centos7 での MySQL のインストールに関するチュートリアル

最近、自宅サーバーにクラウドディスクを導入する予定なので、一連の環境構築作業を始めました。MySQL...

ファイルのダウンロードを実現する javascript Blob オブジェクト

目次例示する1. ブロブオブジェクト2. フロントエンド3. バックエンド要約する例示する最近、ファ...

1 つの記事で React における Redux の初期の使用を理解する

Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された...

Linux での MySQL 5.6.27 インストール チュートリアル

この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...

Linux 上での Go 環境の構築のインストールと設定の説明

Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

VMware Workstation Pro が Win10 アップデートにより開けなくなる問題の解決方法

今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...

MySQL でよく使われる型変換関数の概要 (推奨)

1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...

202 無料の高品質 XHTML テンプレート (1)

ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...

更新SQL文に基づくMySQLロックの理解

序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...

フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介

1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...

Linux パーティションまたは論理ボリュームにファイルシステムを作成する方法

序文システムにファイル システムを作成し、それを永続的または非永続的にマウントする方法を学習します。...

表のセル間の境界線/区切り線を非表示にする方法

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

MySQLの比較演算子正規表現マッチングREGEXPの使用の詳細な説明

1. データを初期化する `test_01` が存在する場合はテーブルを削除します。 テーブル「te...

初心者向けWebサイト構築ガイド⑥:FlashFXPの詳しい使い方

今日は、サイトの設定やウェブサイトのアップロードなど、FlashFXP の最も基本的な機能を紹介しま...