初心者向け記事: 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

ログイン後にコピー

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

2.3 アニメーションの追加

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

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

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

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

• ...無限ループ。 .

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

2.5 純粋な 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 サイトの他の関連記事を参照してください。