ホームページ >ウェブフロントエンド >CSSチュートリアル >初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

奋力向前転載: 2021-09-17 09:47:362635ブラウズ

前回の記事「シェルスクリプトを使ってサーバーのクイック設定を実装する方法を教えます(コード付き)」では、シェルスクリプトを使用してサーバーのクイック設定を実装する方法を紹介しました。次の記事ではCSSを使って簡単なスケルトンアニメーションを実装する方法を紹介しますので、やり方を見ていきましょう。

#1. 背景

ある日、デザイナーが私のところに来てこう言いました。「これはアニメーション効果です。左右に振るだけです。とても簡単です!」私は、「よし、ユーザーの視覚体験を向上させよう。やってみよう」と思いました。

初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

10分後、いや、左右の揺れは偽物で、本物の風が吹いているようには見えませんでした。

注: ここでは、アニメーションの速度とスイングの振幅が加速されます。

.animate-1 {
    animation: swing1 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
@keyframes swing1 {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}

初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

冷静に考えてください、なぜこのブランコには魂がないのか。そこで、現実のスイング効果を確認するために仕事のカードを手に取り、スイングし始めましたが、最後に、突然気づきました：現実の願いのカード（仕事のカードと同じ）はスイングしないことがわかりましたストレスがかかると全体が動きますが、いくつかの部分に分かれてノードの位置に応じて連動して揺れる、実はシンプルなスケルトンアニメーションです！では、どうすればそれを達成できるのでしょうか?

2. スケルトンアニメーション

ここではウィッシュカードスイングアニメーションを例に、それを実現するためのCSSの使い方を一緒に勉強していきます。

2.1 個別の要素

アニメーション化された要素を個別に動かすには、まず要素を分割する必要があります。分割の基礎となるのは上記のノードであり、これはスケルトンアニメーションにおけるいわゆるジョイントです。たとえば、この願い事カードには 2 つのジョイントがあり、1 つはカードの上部に、もう 1 つはカードの下にあるため、3 つのアニメーション要素に分割できます。

初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

2.2 スプライシングelements

<div>
    
    <div class="item-1"></div>
    
    <div class="item-2"></div>
    
    <div class="item-3"></div>
</div>
これは簡単そうに見えますが、スケルトンアニメーションを理解していないと落とし穴にはまるでしょう。上記は間違ったデモンストレーションです。皆さんの理解をさらに深めるために、特別に穴を掘りました

2.3 アニメーションの追加

上記を踏まえて、一部を追加します。さまざまな振幅と方向のスイングアニメーション。

<div class="animate-2">
    <!--元素1-->
    <div class="item-1"></div>
    <!--元素2-->
    <div class="item-2"></div>
    <!--元素3-->
    <div class="item-3"></div>
</div>

rree

完了?効果を見てみましょう

初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

#なんと、これは何でしょう! ！！要素ごとにスイングの振幅と方向が異なるため、スイング全体よりも現実的なように見えます。しかし、それは場違いです。

冷静に考えてみると、問題は、スケルトンアニメーションの各サブアニメーションが関連しており、上で設計した各アニメーションが独立していることです。例えば、上の赤いロープが揺れると下の看板が引っ張られ、下の看板の位置が変わります。下の看板は、位置を変えながら独自のスイングアニメーションを再生します。これはスケルトンアニメーションです。

2.4 穴埋め - js からスケルトンアニメーションを実現してその原理を理解する

ソースコードは YouTube にあるため、ここにあります。科学的にインターネットをサーフィンすることができない学生。はい、次の実行アクションを例として、JS 実装プロセスを説明します。

https://github.com/bit101/CodingMath/tree /master/episode44

大腿部の初期状態と現在の回転速度に基づいて、次のフレームにおける大腿部の位置を計算します;
現在の太ももの位置と現在のふくらはぎの速度からふくらはぎを計算次のフレームの位置;
...無限ループ。 .

初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

ここから、ふくらはぎの位置は太ももの位置に依存するので、ズレが生じないことがわかります。上で行ったように。スケルタルアニメーションの特徴を端的に言うと、

キー要素がサブ要素とともに動き、それを基にサブ要素が勝手に動くというものです。

ということで、js実装ではまず太ももの位置を計算し、太ももの位置からふくらはぎの位置を計算することで接続を実現しているのですが、cssで実装するにはどうすればよいでしょうか？

2.5 純粋な CSS 実装

最も重要な点を確認してください: 主要な要素はサブ要素とともに移動し、サブ要素はその上で移動します。これをもとに自分なりに。

、キー要素がサブ要素をラップしている限り、CSS でキー要素とサブ要素を一緒に移動することを実現します。 , これはスケルトンアニメーションを実装するための CSS の基礎です。

リーリーリーリー初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)

###

这次终于大功告成了。这里有三个元素，更多元素也是同理的，不断嵌套即可。

3、最终动效演示

细心的同学会发现上面实现的骨骼动画看着也别扭，归根结底是各个元素摆动的方向和幅度没有调节好，这里附上调整完的效果，用心感受：

.animate-4 .s-1 {
    animation: swing4-1 5s ease-in-out infinite;
    transform: rotate(-2deg);
    transform-origin: top center;
}
.animate-4 .s-2 {
    animation: swing4-2 8s ease-in-out infinite;
    transform: rotate3d(0, 1, 0, 20deg);
    transform-origin: top center;
}
.animate-4 .s-3 {
    animation: swing4-3 8s ease-in-out infinite;
    transform: rotate(3deg);
    transform-origin: top center;
}
@keyframes swing4-1 {
    0% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg);}
    100% { transform: rotate(-2deg);}
}
@keyframes swing4-2 {
    0% { transform: rotate3d(0, 1, 0, 20deg); }
    50% { transform: rotate3d(0, 1, 0, -20deg);}
    100% { transform: rotate3d(0, 1, 0, 20deg);}
}
@keyframes swing4-3 {
    0% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg);}
    100% { transform: rotate(3deg);}
}

初心者向け記事: CSS を使用して簡単なスケルトンアニメーションを実装する方法 (コード共有)