Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts

Vorwort

In der täglichen Entwicklung stoßen wir häufig auf den Effekt des horizontalen Scrollens von Text, allgemein als Karussell bekannt, was auch eine Funktion ist, die häufig in Projekten verwendet wird. Dies ist im Web-Frontend sehr üblich. Heute werde ich die Implementierungsmethoden von Miniprogrammen vorstellen. Eine besteht darin, den CSS-Stil zu verwenden, und die andere darin, die Animationsfunktion von Miniprogrammen zu verwenden.

@keyframes Implementierung

Die Verwendung der @keyframes-Regel ist sehr praktisch. Sie erfordert nur CSS-Stile und die Verwendung ist dieselbe wie im Web.

<Ansichtsklasse="Festzelt">
 <text>Dies ist ein Lauftext</text>
</Ansicht>

Die Stilklasse von bis wird verwendet, um den Beginn und das Ende der Animation zu definieren. Gleiten Sie hier vom äußersten rechten Ende des Bildschirms nach links, und nach dem Berühren des äußersten linken Endes beginnt erneut eine neue Animationsrunde.

@keyframes Übersetzung {
 aus {
 margin-left: 750rpx; //Beginnend am äußersten rechten Ende des Bildschirms}

 Zu {
 Rand links: 0px;
 }
}

.Festzelt{
 Leerzeichen: Nowrap;
 Animationsname: Übersetzung; //Definieren Sie den Namen der Animation Animationsdauer: 3s;
 Anzahl der Animationsiterationen: unendlich;
 Animations-Timing-Funktion: linear;
}

Wenn der gewünschte Effekt darin besteht, dass der Text nach dem Gleiten nach links weiter nach links gleitet, bis er vollständig verschwindet, und dann die Animation ganz rechts beginnt, müssen Sie die Länge des Textes hinzufügen. Hier müssen Sie die Länge des Textes berechnen und die SelectorQuery-Objektinstanz verwenden, um die Breite des Textknotens abzurufen. Es wird ausgeführt, wenn die Seite zum ersten Mal onReady gerendert wird, und das den Textknoteninformationen entsprechende Objekt wird abgefragt, um die Länge des Textes zu ermitteln. Der oben stehende Name der Laufschriftklasse wird hier definiert.

onReady: Funktion () {
 let query = wx.createSelectorQuery();
 Abfrage.Auswählen('.marquee').boundingClientRect();
 query.exec((res) => {
  wenn (res[0]) {
  dies.setData({
   Laufschriftbreite: res[0].width
  })
  }
 })
}

Verwenden Sie dann die CSS-Funktion var(), um den definierten Eigenschaftswert an der Endposition einzufügen, sodass er den gesamten Bildschirm und die Länge seines eigenen Textes einnimmt. Definieren Sie eine Eigenschaft namens „--marqueeWidth“ und verwenden Sie dann die Funktion var(), um die Eigenschaft in der wxss-Stildatei aufzurufen:

<view class="marquee" style="--marqueeWidth:-{{marqueeWidth}}px">
 <text>Dies ist ein Lauftext</text>
</Ansicht>

Im wxss-Stil:
@keyframes Übersetzung {
 aus {
 Rand links: 750rpx;
 }

 Zu {
 Rand links: var(--marqueeWidth);
 }
}

Dies wird durch CSS erreicht, was sehr praktisch ist, bei einigen Modellen treten jedoch Anpassungsprobleme auf. Eine andere Möglichkeit besteht darin, dies durch Animation zu erreichen.

Implementierung der Animation

Die Animation wird durch die Animationsinstanz abgeschlossen und die Ansicht befindet sich zunächst auf der rechten Seite des Bildschirms und außerhalb des Bildschirms.

<view class="marquee2" bindtransitionend="animationend" animation="{{animationData}}">
	<text>Dies ist ein Lauftext</text>
</Ansicht>

.marquee2{
 Anzeige: Inline-Block;
 Leerzeichen: Nowrap;
 Rand links: 750rpx;
}

In ähnlicher Weise wird hier die Länge des Textes berechnet und die Übersetzungseigenschaft verwendet, um ihn zu verschieben, bis er außerhalb des gesamten Bildschirms liegt. Nachdem ein Satz von Animationen abgeschlossen ist, rufen Sie den Rückruf „Bindtransitionend“ auf, um die Animation erneut auszuführen.

diese.animation = wx.createAnimation({
 Dauer: 3000,
 Zeitfunktion: „linear“
});
var query = wx.createSelectorQuery();
Abfrage.Auswählen('.marquee2').boundingClientRect();
query.exec((res) => {
 wenn (res[0]) {
 dies.setData({
  marqueeWidth: res[0].width //Textlänge}, () => {
  dies.doAnim()
 })
 }
})


doAnim: Funktion () {
 //Scrollen Sie nach links über den Bildschirm hinaus, hier ist eine temporäre fest codierte Bildschirmbreite von 375px
 this.animation.translate(-this.data.marqueeWidth - 375, 0).Schritt();
 setzeTimeout(() => {
  dies.setData({
  Animationsdaten: this.animation.export(),
  });
 }, 10)
}

Nachdem die erste Animation beendet ist, beginnen Sie von vorne, hören Sie sich das Ende der Animation bis „animationend“ an und führen Sie sie dann erneut aus.

animationende() {
 //Zurücksetzen this.animation.translate(0, 0).step({ duration: 0 });
 dies.setData({
  Animationsdaten: this.animation.export()
 }, () => {
  //Starten Sie die Animation neu this.doAnim()
 });
}

Wenn diese Animation auf dem Mini-Programmentwicklungstool ausgeführt wird, wird die Animation plötzlich angehalten. Sie können es auf Ihrem Mobiltelefon ausprobieren.

Es ist relativ einfach zu implementieren und der Karusselleffekt ist auch etwas, das wir oft in unseren Projekten verwenden. Es ist auch eine gute Gelegenheit, sich mit der Animation des Miniprogramms vertraut zu machen.

Zusammenfassen

Dies ist das Ende dieses Artikels über das Beispiel, wie der rotierende Laterneneffekt in WeChat-Miniprogrammen erreicht werden kann. Weitere relevante Inhalte zum rotierenden Laterneneffekt in Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!