Miniprogramm zur Implementierung einer kreisförmigen Text-Scrolling-Animation

In diesem Artikel wird der spezifische Code des Applets zur Realisierung der Textschleife durch Beispiele zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Lösung des Problems:

1. Textschleifen-Wiedergabeeffekt

2. Beenden Sie das Applet und stoppen Sie die versteckte Hintergrundanimation (gelöst)

Wirkung:

Code:

wxml

<Animation anzeigen="{{Animation}}" Klasse="Animation">
  919 Testverwendung - Wiedergabe einer kleinen Programmschleife~~~
</Ansicht>

wxss

.Animation{
  Breite: 100 %;
  transformieren: übersetzenX(100%);
  Position: fest;
  oben: 45 %;
  Schriftgröße: 16px;
  Schriftstärke: fett;
}

Endgültiges js

/**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {
    dies.bindAnimation();
  },
 
  bindAnimation(){
    var dies_ = dies;
      var Animation = wx.createAnimation({
        Dauer: 5000,
        Zeitfunktion: "linear",
        transformOrigin:"100% 0 0"
      })
      animation.translateX('-100%').Schritt();
      dies.setData({
        Animation: Animation.Export(),
      })
      //Loop-Animation einrichten this.animation = animation;
      setzeIntervall(Funktion(){
        //Die Initialisierung der zweiten Animationstextposition this.Animation2();
 
        // Verzögern Sie die Scroll-Animation (der Effekt wird besser sein)
        setzeTimeout(Funktion(){
          this.animation.translateX('-100%').Schritt();
          dies.setData({
            Animation: Animation.Export(),
          })
        }.binden(dies),200);
 
        
      }.bind(dies),5000);
 
  },
 
  /**
   * Initialisiere die zweite Position des Animationstextes*/
  Animation2(){
    var dies_ = dies;
    var animation2 = wx.createAnimation({
      Dauer: 0,
      Zeitfunktion: "linear",
      transformOrigin:"100% 0 0"
    })
    animation2.translateX('100%').Schritt();
    this_.setData({
      Animation: Animation2.Export(),
    })
  },
 
  /**
   * Beheben Sie das Problem des Beendens von Miniprogrammen und des Stoppens von Hintergrundanimationen */
  onHide: Funktion () {
    //Lösen Sie das Problem, dass das Miniprogramm beendet wird und die Hintergrundanimation gestoppt wird. //Lösen Sie die Animationsmethode this.bindAnimation(); erneut aus.
},

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

So starten und pausieren Sie die Loop-Animation des MPVUE-Applets
Das WeChat-Applet realisiert einen Loop-Animationseffekt
WeChat-Applet-Entwicklungsanimation, Loop-Animation, um den Effekt schwebender Wolken zu erzielen

<<: Detaillierte Erläuterung des MySQL-Ausführungsprinzips, der logischen Schichtung und der Änderung der Datenbankverarbeitungs-Engine

>>: Tutorial zur Installation von Docker im Windows 10-Subsystem Ubuntu (WSL) (mit Bildern und Text)