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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!