Einsteigerartikel: Wie man mit CSS einfache Skelettanimationen implementiert (Code-Sharing)

Im vorherigen Artikel „Lernen Sie, wie Sie Shell-Skripte verwenden, um schnelle Servereinstellungen (mit Code) zu implementieren“ habe ich Ihnen gezeigt, wie Sie Shell-Skripte verwenden, um schnelle Servereinstellungen zu implementieren. Im folgenden Artikel erfahren Sie, wie Sie mit CSS einfache Skelettanimationen implementieren.

1. Hintergrund

Eines Tages kam der Designer zu mir und sagte: „Diese Wunschkarte hängt einfach da und sieht nicht gut aus. Fügen wir etwas Animation hinzu und schwenken sie einfach hin und her. Das ist es.“ ganz einfach!" , dachte ich, OK, verbessern Sie das visuelle Erlebnis des Benutzers, fangen wir an.

Nach zehn Minuten, nein, das Schwingen nach links und rechts ist so vorgetäuscht, nicht wie der echte Windweheffekt.

Hinweis: Die Geschwindigkeit der Animation und die Amplitude des Schwungs werden hier beschleunigt.

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

Überlegen Sie ruhig, warum diese Schaukel keine Seele hat. Also nahm ich die Arbeitskarte und fing an, sie zu schwingen, um zu sehen, wie der Schaukeleffekt in Wirklichkeit aussah. Schließlich wurde mir plötzlich klar: Es stellte sich heraus, dass die echte Wunschkarte (genauso wie die Arbeitskarte) nicht so schwingt Ganz, wenn es belastet ist, aber es wird in mehrere Teile geteilt und entsprechend der Knotenposition schwingen. Dies ist eigentlich eine einfache Skelettanimation! Wie kann man es erreichen?

2. Skelett-Animation

Hier nehmen wir diese Wunschkarten-Schwinganimation als Beispiel und lernen gemeinsam, wie man CSS verwendet, um dies zu erreichen.

2.1 Elemente trennen

Um animierte Elemente separat zu bewegen, müssen Sie die Elemente zunächst teilen. Grundlage für die Aufteilung sind die oben erwähnten Knoten, die in der Skelettanimation die sogenannten Gelenke sind. Diese Wunschkarte hat zum Beispiel zwei Gelenke, eines oben und eines unterhalb der Karte, sodass wir sie in drei Animationselemente aufteilen können:

2.2 Verbindungselemente

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

Das scheint einfach, aber wenn Wenn Sie die Skelettanimation nicht verstehen, fallen Sie in eine Grube. Das obige Beispiel ist falsch. Um das Verständnis aller zu vertiefen, haben wir speziell ein Loch gegraben.

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

.animate-2 .item-1 {
    /* 设置margin是为了定位，使其部分重叠在一起 */
    margin-bottom: -8px;
    margin-left: 18px;
    position: relative;
    z-index: 1;
    animation: swing2-1 1s ease-in-out infinite;
    transform: rotate(-3deg);
    transform-origin: top center;
}
.animate-2 .item-2 {
    animation: swing2-2 1s ease-in-out infinite;
    transform: rotate(5deg);
    transform-origin: top center;
}
.animate-2 .item-3 {
    margin-top: -5px;
    margin-left: 17.5px;
    position: relative;
    animation: swing2-3 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
@keyframes swing2-1 {
    0% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg);}
    100% { transform: rotate(-3deg);}
}
@keyframes swing2-2 {
    0% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg);}
    100% { transform: rotate(5deg);}
}
@keyframes swing2-3 {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}

Fertig? Werfen wir einen Blick auf die Wirkung

Oh mein Gott, was ist das! ! ! Es sieht so aus, als ob der Schwung realistischer ist als der Gesamtschwung, da verschiedene Elemente unterschiedliche Schwungamplituden und -richtungen haben. Aber es ist fehl am Platz.

Wenn wir weiterhin ruhig denken, liegt das Problem darin, dass jede Unteranimation der Skelettanimation miteinander verbunden ist, während jede Animation, die wir oben entworfen haben, unabhängig ist. Wenn beispielsweise das rote Seil oben schwingt, zieht es das Schild darunter, wodurch sich die Position des Schildes darunter ändert. Das Schild unten spielt seine eigene Schwinganimation ab, während es seine Position ändert. Dies ist eine Skelettanimation!

2.4 Die Lücke füllen – Skelettanimation von js implementieren, um ihr Prinzip zu verstehen

Der Quellcode ist hier, weil er auf YouTube ist, um zu vermeiden, dass einige Schüler keinen wissenschaftlichen Zugang zum Internet haben und nicht sehen können Daher nehme ich zur Erläuterung die folgende laufende Aktion als Beispiel. Werfen wir einen Blick auf den js-Implementierungsprozess Berechnen Sie anhand des Ausgangszustands des Oberschenkels und der aktuellen Rotationsgeschwindigkeit die Position des Oberschenkels im nächsten Frame;

Berechnen Sie anhand der aktuellen Oberschenkelposition und der aktuellen Geschwindigkeit der Wade die Position der Wade im nächster Frame;

...Endlosschleife...

• Hier ist zu erkennen, dass die Position der Wade abhängig ist. Die Position des Oberschenkels verhindert die Fehlausrichtung über uns. Um es ganz klar auszudrücken: Die Merkmale der Skelettanimation sind:

Schlüsselelemente bewegen sich zusammen mit ihren untergeordneten Elementen, und die untergeordneten Elemente bewegen sich auf dieser Grundlage selbstständig.

• In der js-Implementierung wird die Verbindung also realisiert, indem zuerst die Oberschenkelposition und dann die Wadenposition aus der Oberschenkelposition berechnet werden. Wie wird sie in CSS implementiert?

• 2.5 Reine CSS-Implementierung

Überprüfen Sie die kritischsten Punkte:

Schlüsselelemente bewegen sich zusammen mit Unterelementen, und Unterelemente bewegen sich auf dieser Grundlage von selbst. , um die gemeinsame Bewegung von Schlüsselelementen und Unterelementen in CSS zu realisieren, solange die Schlüsselelemente die Unterelemente umschließen! Dies ist der Eckpfeiler von CSS zur Implementierung von Skelettanimationen.

<div class="animate-3">
    <!--运动模块1-->
    <div class="s-1">
        <div class="item-1"></div>
        <!--运动模块2-->
        <div class="s-2">
            <div class="item-2"></div>
            <!--运动模块3-->
            <div class="s-3">
                <div class="item-3"></div>
            </div>
        </div>
    </div>
</div>

rrree

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

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视频教程

Das obige ist der detaillierte Inhalt vonEinsteigerartikel: Wie man mit CSS einfache Skelettanimationen implementiert (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!