So implementieren Sie mit CSS3 eine Warteschlangenanimation ähnlich einer Online-Liveübertragung

Ein Freund in der Gruppe hat zuvor eine Frage gestellt: Wie kann ich eine Warteschlangenanimation ähnlich der Live-Übertragungsplattform implementieren, wenn Benutzer im Miniprogramm online gehen? Als Front-End-Ingenieur gibt es nur zwei Lösungen:

• Verwenden Sie Javascript , um den Stil der Elemente entsprechend den Bedingungen zu steuern und eine Warteschlangenanimation zu erzielen
• Verwenden Sie, um dies zu erreichen, reines CSS3 mit datengesteuertem Modell.

Wie wir alle wissen, sollten wir in der modernen Webentwicklung versuchen, Js nicht für Effekte zu verwenden, die mit CSS erreicht werden können, also sollten wir CSS3 den Vorzug geben. Wir müssen jedoch den Datenfluss kombinieren, um eine echte Warteschlangenanimation zu erreichen, damit wir das praktische datengesteuerte Modell des MVVM-Frameworks verwenden können, um die Richtung der Animation zu steuern.

Da der Kern der Animation CSS3 ist, sind die Prinzipien der Implementierung in Miniprogrammen oder Vue/React ähnlich, sodass Sie sich keine Gedanken über den Technologie-Stack machen müssen. Das Folgende ist das Effektdiagramm nach der Implementierung:

Tatsächlich wird dieser Effekt an vielen Stellen verwendet, beispielsweise auf dem Bullet Screen von Bilibili , in der Online-Fan-Animation einer Live-Übertragung einer bestimmten Musikplattform, in der Live-Übertragung einer bestimmten Musik usw., aber wie können wir ihn auf der Webseite erzielen? Als Nächstes führt Sie der Autor Schritt für Schritt durch die Erzielung eines solchen Animationseffekts.

Text

Um den obigen Animationseffekt zu erzielen, müssen wir zuerst die Animation analysieren. Die Animationsstruktur der obigen Abbildung ist wie folgt:

Die Animation gliedert sich in folgende zwei Prozesse:

• Benutzereingabeanimation
• Benutzer-Ausblendanimation

Ein weiteres Detail besteht darin, dass unabhängig davon, wie viele Benutzer eintreten, alle von derselben Position aus eintreten und die Position des vorherigen Benutzers nach oben verschoben wird, wie in der folgenden Abbildung dargestellt:

Der beste Weg, diesen Effekt zu erzielen, ist die Verwendung einer Positionierung, beispielsweise einer absoluten Positionierung ( absolut ) oder einer festen Positionierung ( fest ). Und stellen Sie den Boden ein

Wert, wie im folgenden Code gezeigt:

.animateWrap {
    Position: absolut;
    unten: 40%;
    links: 12px;
}

Die obigen Positionsinformationen dienen nur als Referenz. Der spezifische Wert kann nach Ihren eigenen Bedürfnissen geändert werden. Der Vorteil der Einstellung „bottom“ besteht darin, dass das vorherige Element automatisch nach oben verschoben wird, sobald das untergeordnete Element des Containers hinzugefügt wird, sodass wir seinen Offset-Wert nicht manuell festlegen müssen.

Implementieren der Einstiegsanimation

Wenn wir die Benutzereingabeanimation im obigen Bild realisieren möchten, können wir die Übergangsanimation von CSS3 oder die Animationsanimation verwenden. Aufgrund der Zweckmäßigkeit des Nutzungsszenarios verwenden wir hier die Animationsanimation . Schreiben wir zunächst die DOM-Struktur:

 <div Klassenname={styles.animateWrap}>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Lehrer Li ist online</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Lehrer Li ist online</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Lehrer Li ist online</span></div>
  </div>

Der obige Code zeigt an, dass ein Animationscontainer erstellt und zwei Benutzer hinzugefügt werden. Hier definieren wir die wichtigsten Animationen wie folgt:

.animieren {
      Rand unten: 10px;
      Rahmenradius: 20px;
      Hintergrundfarbe: rgba(0,0,0, .3);
      Animation: Bewegung in 1,2 s;
    }
@keyframes verschiebenIn {
  0% {
    transformieren: übersetzenX(calc(-100% - 12px));
  }
  100 % {
    transformieren: übersetzenX(0);
  }
}

Die obige Animation realisiert, dass sich das Element nach rechts bewegt, aber die Animation, die wir zu diesem Zeitpunkt sehen, erscheint gleichzeitig. Wenn wir sie auf die reale Szene anwenden möchten, müssen es asynchrone Daten sein, die über Socket oder Round-Robin abgerufen werden, sodass wir setInterval verwenden können, um diesen Prozess zu simulieren. Ein weiteres Detail ist, dass unsere Animation höchstens 2 Benutzerdaten vollständig anzeigt und die überschüssigen Daten ausgeblendet und verborgen werden. Daher müssen wir die Daten abfangen. Der Code lautet wie folgt:

 const [Benutzer, setUser] = useState<Array<string>>([])
  useEffect(() => {
    lass MAX_USER_COUNT = 2;
    let timer = setzeInterval(() => {
      setUser(vorherige => {
        vorheriges Drücken(Datum.jetzt() + '')
        wenn (vorherige Länge > MAX_USER_COUNT + 1) {
          vorherige.Shift()
          zurück [...vorherige]
        }anders {
          zurück [...vorherige]
        }
      })
    }, 2000)
  }, [])

Die Variable MAX_USER_COUNT wird verwendet, um die maximale Anzahl der angezeigten Benutzer zu steuern. Sie kann je nach tatsächlichem Bedarf geändert werden. Die Logik in setUser ist die Abfanglogik. Wenn die Anzahl der Benutzer den angegebenen Maximalwert überschreitet, wird das Header-Element gelöscht.

Damit ist der Datenflussprozess abgeschlossen. Was wir noch erledigen müssen, ist die Ausblendlogik und -animation des Benutzers. Schauen wir uns zunächst die Ausblendanimation an:

@keyframes verschiebenOut {
  0% {
    Deckkraft: 1;
  }
  100 % {
    Deckkraft: 0;
  }
}

Tatsächlich ist Animation nicht schwierig. Was wir steuern müssen, ist, wie wir diese Animation dynamisch zum Header-Element hinzufügen. Derzeit ist unsere beste Lösung, den Klassennamen zu verwenden. Das heißt, wenn die Ausblendbedingungen erfüllt sind, müssen wir den Ausblendklassennamen für das Ausblendelement dynamisch festlegen. Die Bedingungen sind wie folgt:

user.length > MAX_USER_COUNT && i === 0 Die obige Bedingung bedeutet, dass wir, wenn die Anzahl der Benutzer die maximale Anzahl der angezeigten Benutzer überschreitet und das Element ein Header-Element ist, nur den Klassennamen entsprechend dieser Bedingung dynamisch festlegen müssen:

{
  Benutzer.map((item, i) => {
     return <div className={classnames(styles.animate, user.length > 2 && i === 0 ? styles.hidden : '')} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Herr Li {item} ist online</span></div>
  })
}

Der CSS-Code lautet wie folgt:

.versteckt {
  Deckkraft: 0;
  Animation: Auszug 1,2 s;
}

Durch die oben genannten Schritte haben wir eine vollständige Online-Live-Streaming-Warteschlangenanimation realisiert. Der vollständige CSS- Code der Animation lautet wie folgt. Interessierte Freunde können ihn lernen und darauf verweisen:

.animateWrap {
    Position: absolut;
    unten: 40%;
    links: 12px;
    .animieren {
      Rand unten: 10px;
      Rahmenradius: 20px;
      Hintergrundfarbe: rgba(0,0,0, .3);
      Animation: Bewegung in 1,2 s;
      .tx {
        Anzeige: Inline-Block;
        Breite: 36px;
        Höhe: 36px;
        Randradius: 50 %;
        Überlauf: versteckt;
        vertikale Ausrichtung: Mitte;
        Rand rechts: 10px;
        img {
          Breite: 100 %;
          Höhe: 100%;
          Objekt-Passung: Abdeckung;
        }
      }
      Spanne {
        Rand rechts: 12px;
        Zeilenhöhe: 36px;
        Schriftgröße: 14px;
        Farbe: #fff;
      }
    }
    .versteckt {
      Deckkraft: 0;
      Animation: Auszug 1,2 s;
    }
    @keyframes verschiebenIn {
      0% {
        transformieren: übersetzenX(calc(-100% - 12px));
      }
      100 % {
        transformieren: übersetzenX(0);
      }
    }
    @keyframes verschiebenOut {
      0% {
        Deckkraft: 1;
      }
      100 % {
        Deckkraft: 0;
      }
    }
  }

endlich

Damit ist dieser Artikel über die Verwendung von CSS3 zur Implementierung eines Beispielcodes für eine Warteschlangenanimation für Online-Livestreaming abgeschlossen. Weitere relevante CSS3-Inhalte zur Warteschlangenanimation für Online-Livestreaming finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!