Verwenden von CSS3 zum Erstellen von Header-Animationseffekten

Die offizielle Website von Netease Kanyouxi (http://kanyouxi.163.com/) (wurde aus den Regalen genommen) ist ein Projekt, an dem ich zuvor gearbeitet habe (2014). Es war auch unsere erste Website, die Flash aufgegeben und HTML5 zur Erstellung von Animationen verwendet hat. Zu dieser Zeit war es eine der wenigen Websites in der Branche, die CSS3 für die eigentliche Erstellung von Hauptanimationen verwendet haben. Natürlich wird es jetzt häufig verwendet, insbesondere auf mobilen Endgeräten. CSS3 ist eine Garantie für Leistung. Jetzt werde ich es zusammenfassen und weitergeben, wodurch ich nicht nur das Gelernte wiederholen kann, sondern hoffentlich auch Anfängern dabei hilft, Fortschritte zu erzielen.

Was für eine Animation?

Diese Animation ist nicht kompliziert, enthält aber mehrere wichtige Inhalte wie Transformieren, Drehen, Verschieben, Keyframes, Easing und Anzahl der Loops. Okay, schauen wir uns zuerst die Animationseffekte an. Unten sehen Sie die Bildschirmaufzeichnungsanimation. Sie können auch auf die offizielle Website von NetEase Kanyouxi (http://kanyouxi.163.com/) (jetzt nicht mehr erhältlich) gehen, um einen Blick darauf zu werfen.

Es gibt mehrere wichtige Punkte, und zwar der Reihe nach:

• Das weiße iPhone klappt nach oben und wackelt dann leicht;
• Untertitel erscheinen von rechts und schieben das weiße iPhone nach links;
• Als mir das weiße iPhone fast in den Sinn kam, erschien auch das schwarze iPhone;
• Der große Titel „Watch Games on NetEase“ blinkt und läuft wellenförmig im Hintergrund.

Lassen Sie uns sie einzeln durchgehen.

Hinweis: Dies ist ein fortgeschrittener CSS3-Praxisartikel. Wenn Sie nicht viel über CSS3-Animation wissen, lesen Sie bitte zuerst hier: CSS3-Animation, werfen Sie in 1 Minute einen kurzen Blick darauf und kommen Sie dann zurück.

1. Hochklappen und schütteln

Es gibt hier mehrere Schlüsselattribute, Sie können die detaillierte Verwendung sehen: @keyframes, transform:rotate(deg); transform-origin:x,y;

Bereiten Sie Keyframes für die Animation vor @keyframes

@keyframes iphone-front{
    0% {
        transformieren: drehen (-30 Grad);
        Transform-Ursprung: 125px 650px;
        }
    100 % {
        transformieren: drehen (0 Grad); 
        Transform-Ursprung: 125px 600px;
        }            
}

Den Prozentsatz verwenden wir direkt als Frame-Punkt, da dieser später in mehrere Frames unterteilt wird.

Legen Sie die Drehung und den Ankerpunkt fest (Ankerpunkt transform-origin:x,y; ).

transformieren: drehen (-30 Grad);
Transform-Ursprung: 125px 650px;

Eine Drehung ist notwendig, aber warum sollte der Ankerpunkt geändert werden?

Der Ankerpunkt ist von cocos2D übernommen und bezieht sich auf den Ursprung der Transformation.

Da der Standardankerpunkt von transform die Mitte ist, also (50 %, 50 %), lautet die Eigenschaft Ankerpunkt in transform transform-origin . Die folgenden Werte sind die Standardwerte:

Transform-Ursprung: 50 %, 50 %

Bei Transformationen, die 3D unterstützen, gibt es einen dritten Wert: z, der standardmäßig 0 ist.

Wenn es nicht geändert wird, dreht es sich um die Mitte des iPhones, was nicht der gewünschte Effekt ist. Verschieben Sie es daher in die horizontale Mitte darunter.

Die Breite dieses Bildes beträgt 250px, die Höhe 525px und die Mitte darunter ist (125px, 525px). Um jedoch das tatsächliche Schwanken des Objekts auf dem Tisch zu simulieren, müssen wir es etwas nach unten verschieben. Nach einigen Versuchen haben wir uns schließlich für (125px, 650px) entschieden, wie unten gezeigt:

Jitter und Skeuomorphismus hinzufügen

Der Jitter ist eigentlich das Produkt einer Kombination mehrerer Schlüsselbilder. Die erste Drehung beträgt nicht 0 Grad, sondern etwas über 10 Grad, und dann geht es zwischen zwei Schlüsselbildern hin und her, und die Amplitude nimmt allmählich ab. Nach dem Hinzufügen der Keyframes lauten die @keyframes-Änderungen wie folgt:

@keyframes iphone-front{
    0% {
        transformieren: drehen (-30 Grad);
        Transform-Ursprung: 125px 650px;
        }
    50 % {
        transformieren: drehen (10 Grad);
        Transform-Ursprung: 125px 600px;
        }
    75 % {
        transformieren: drehen (-5 Grad);
        }
    100 % {
        transformieren: drehen (0 Grad);
        }
}

Beachten Sie, dass an der Position 33 % oben ein transform-origin:125px 600px; hinzugefügt wird. Dies liegt daran, dass sich der Ankerpunkt, wenn er unverändert bleibt, wie ein Pendel anfühlt, was zu starr und nicht realistisch genug ist. Stellen Sie sich vor: Ein Objekt fällt in einer Parabel zu Boden, kollidiert mit dem Boden, ändert seine Bewegungsrichtung und bleibt schließlich langsam stehen. Daher reduzieren wir die Höhe des Mittelpunkts ein wenig, damit es „ unregelmäßiger “ aussieht.

Zum Zeitpunkt des Keyframes wird zusätzlich der Zeitlupeneffekt simuliert. Die sogenannte Qualität der Animation bezieht sich darauf, wie gut der Easing-Effekt umgesetzt wird und ob er der Wahrnehmung der physischen Welt nahe genug kommt.

Dieser Frame-Punkt ist nicht der letzte Zeitpunkt, bitte lesen Sie weiter.

2. Untertitel erscheinen und das iPhone wird weggeschoben

Untertitel erscheinen

Die Untertitel befinden sich in einem anderen Element, daher erstellen wir eine neue Keyframe-Gruppe:

@keyframes Inhalt{
    0 % { transform: translate3d(550px,0,0);}
    100 % { transform: translate3d(0,0,0);}
}

Da zuerst die iPhone-Animation und dann die Untertitel kommen, wird die Animationsverzögerung mit animation-delay ausgeführt:

Animationsverzögerung: 0,2 s;

Um die beiden Keyframe-Gruppen aber besser zu synchronisieren, ohne rechnen zu müssen, können wir auch Folgendes tun:

@keyframes Inhalt{
    0 % { Deckkraft: 0;}
    40 % { transform: translate3d(550px,0,0); Deckkraft: 0;}
    100 % { transform: translate3d(0,0,0); Deckkraft: 1; }
}

Blenden Sie es zunächst mit Transparenz aus, beginnen Sie bei 40 % und blenden Sie es dann während der Bewegung nach und nach ein, um den Vorgang flüssiger zu gestalten.

Wie bereits erwähnt, müssen wir Untertitel verwenden, um das iPhone in die Mitte zu schieben. Wie geht das?

Kollisionen simulieren

Dies ist mit reinem CSS3 nicht möglich, es sei denn, im gesamten Prozess wird JS verwendet oder Box2D wird zur Kollisionsbeurteilung herangezogen. Aber hier haben wir nur eine einfache Walkthrough-Animation, die keine Mensch-Computer-Interaktion erfordert und die Bewegungsdistanz nicht ändert. Daher verwenden wir einen Zaubertrick, um zwei Animationen parallel laufen zu lassen und Schlüsselbilder an Schlüsselknoten zu vergraben, d. h. wenn die Untertitel zur iPhone-Position wechseln, beginnt das iPhone sich zu bewegen.

Die beiden kombinierten Keyframe-Gruppen sind:

@keyframes iphone-front{
    0 % {transform:rotate(-30 Grad); transform-origin:125px 650px; Deckkraft: 0;}
    20 % {transform:rotate(10deg); transform-origin:125px 600px; Deckkraft: 1;}
    30 % {transform:rotate(-5deg);}
    38 % {transform:rotate(0deg);}
    60 % {transform: translate3d(0,0,0); Deckkraft: 1;}
    90 % {transform: translate3d(-340px,0,0); }
    100 % {transform: translate3d(-340px,0,0);}
}
@keyframes Inhalt{
    0 % { Deckkraft: 0;}
    40 % { transform: translate3d(550px,0,0); Deckkraft: 0;}
    60 % { transform: translate3d(225px,0,0); Deckkraft: 1; }
    80 % { transform: translate3d(0,0,0); Deckkraft: 1; }
    100 % { transform: translate3d(0,0,0); Deckkraft: 1; }
}

/*Die folgenden Selektoren lassen die Einstellungen für Nicht-Animationseigenschaften wie Breite und Höhe weg, daher gehen wir davon aus, dass es sich standardmäßig um die richtigen Werte handelt*/
.iphone-front{ 
    Animation: iPhone-Front 1,8 s nach vorne ausfahren;
}
.Inhalt{
    Animation: Inhalt 1,8 s Ease-Out;
}

Wie Sie sehen, wird das Verzögerungsattribut hier nicht verwendet, um die parallele Animation intuitiver einzurichten. Alle treffen sich an der 60%-Position und verwenden Ease-Out.

Warum wiederholen sich 90 % des Inhalts auf der iPhone-Vorderseite auf 100 % des Bildes? Da wir die Eigenschaft „Animation-Fill-Mode“ mit dem Wert „Forwards“ verwendet haben, wird sie beim letzten Frame angehalten. Wenn nicht 100 % geschrieben werden, wird sie in den Anfangszustand zurückversetzt.

3. Schwarzes iPhone folgt

Die Animation des schwarzen iPhones ist einfacher, nur eine Einblendung und Bewegung. Es ist auch eine weitere parallele Animation, aber dieses Mal kann ich eine Verzögerung verwenden. Ich schätze die ungefähre Zeit des Erscheinens und erhalte sie ab 0,5 s:

@keyframes iphone-zurück{
    0 % { transform: translate3d(97px,0,0); Deckkraft: 0;}
    40 % { Deckkraft: 0; }
    50 % {transform: translate3d(0,0,0); Deckkraft: 1;}
    100 % {Deckkraft: 1; }
}
.iphone-back-ani{
    Animation: iPhone-Zurück 1,8 s, Herausfahren 0,5 s vorwärts;
}

Es besteht keine Notwendigkeit, den Code für den letzten Frame zu wiederholen, da dieser bereits (0,0,0) ist und keine Änderungen auftreten.

Warum translate3d(x,y,z); statt translateX(x) verwenden? Weil manche zuvor geglaubt hatten, dass dies effizienter sei, insbesondere durch die bessere Performance auf mobilen Geräten.

Siehe Handbuch: transform

4. Große Titelhintergrundwelle

Hierbei handelt es sich nicht um eine Transformation, wodurch sich Vordergrund und Hintergrund überlappen können und das Hintergrundbild sich kontinuierlich in einer Endlosschleife ohne Unterbrechung auf der Y-Achse bewegt. Entscheidend ist, dass das Hintergrundbild von oben nach unten nahtlos verbunden sein muss:

@keyframes Titel{
    0 % { Hintergrundposition: 0 0;}
    100 % { Hintergrundposition: 0 -76px;}
}

.title-bg{
    Breite: 301px; 
    Höhe: 61px; 
    Position: absolut;
    oben: 0;
    links: 0;
    z-Index: 1;
    Hintergrund: URL (Titeltext_bg.png) Wiederholung-y;
    Animation: Titel 1,2 s linear;
    Anzahl der Animationsiterationen: unendlich;
}
.Titel-Front{
    Breite: 301px; 
    Höhe: 61px;
    Position: absolut;
    oben: 0;
    links: 0;
    z-Index: 2;
    Hintergrund: URL (Titeltext_front.png) keine Wiederholung;
}

Dies ist der einfachste Ansatz und eignet sich für die meisten Situationen. Es gibt auch einige fortgeschrittenere Möglichkeiten, wie z. B. die Verwendung von Masken. Wenn Sie sich für Masken interessieren, lesen Sie bitte „CSS-Maskierung“.

Andere Effekte

Abschluss

Handgeschriebene Animationen sind zwar zeitaufwändig, ermöglichen es Ihnen jedoch, die Prinzipien der Realität zu verstehen. Wenn Sie visuelle Produktion benötigen, empfehle ich jedem ein Online-Tool: cssanimate. Im Vergleich zu anderen Generatoren besteht sein Vorteil darin, dass Sie mehrere Keyframes festlegen und direkt durch Ziehen der Maus bedienen können. Es ist empfehlenswert!

Dies ist das Ende dieses Artikels über die Verwendung von CSS3 zum Erstellen von Header-Animationseffekten. Weitere relevante Inhalte zu CSS3-Header-Animationen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!