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

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

#1. 背景

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

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);}
}

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

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

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

2.1 個別の要素

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

2.2 スプライシングelements

<div>
    <!--元素1-->
    <div class="item-1"></div>
    <!--元素2-->
    <div class="item-2"></div>
    <!--元素3-->
    <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

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

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

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

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

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

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

• 大腿部の初期状態と現在の回転速度に基づいて、次のフレームにおける大腿部の位置を計算します;

• 現在の太ももの位置と現在のふくらはぎの速度からふくらはぎを計算次のフレームの位置;

• ...無限ループ。 .

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

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

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

2.5 純粋な 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);}
}

4、End

纯CSS确实能实现骨骼动画，但仅限于简单的场景。在复杂场景中，例如前端游戏里面的骨骼动画，涉及到的节点比较多，用CSS虽然能实现，但效率不高，所以社区有很多从设计工具直接导出可用的骨骼动画信息，再用js来加载运行的方案，大家感兴趣可以Google一下。

本文主要通过简单的案例来加深大家对骨骼动画的原理性的认识，至于最后大家用CSS还是用JS来实现，就是“杀鸡要不要用牛刀”的问题了。

个人认为，只要屠龙刀在手，用不用已经不重要了。加油，希望大家能在各个方向找到自己的屠龙刀。

推荐学习：CSS视频教程

以上が初心者向け記事: CSS を使用して簡単なスケルトン アニメーションを実装する方法 (コード共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。