So implementieren Sie Animationen im WeChat-Applet

Dieser Artikel stellt hauptsächlich die Methode zur Realisierung von Animationsanimationen im WeChat-Applet vor. Er hat einen gewissen Referenzwert.

Der Inhalt des WeChat-Applets lautet wie folgt 🎜>

1. Erstellen Sie eine Animationsinstanz

wx.createAnimation(OBJECT)

Erstellen Sie eine Animationsinstanz. Rufen Sie die Methoden der Instanz auf, um die Animation zu beschreiben. Abschließend werden die Animationsdaten über die Exportmethode der Animationsinstanz exportiert und an die Animationseigenschaft der Komponente übergeben.

Hinweis: Jedes Mal, wenn die Exportmethode aufgerufen wird, wird der vorherige Animationsvorgang gelöscht

Animationswarteschlange

Nach dem Aufruf der Animation Operationsmethode: Rufen Sie step() auf, um den Abschluss einer Animationsgruppe anzuzeigen. Sie können eine beliebige Anzahl von Animationsmethoden in einer Animationsgruppe aufrufen. Alle Animationen in einer Animationsgruppe werden gleichzeitig gestartet wird erst fortgesetzt, wenn eine Gruppe von Animationen abgeschlossen ist. step kann einen Konfigurationsparameter ähnlich wie wx.createAnimation() übergeben, um die Konfiguration der aktuellen Gruppenanimation anzugeben. Die Animationsausführung kann aufgerufen werden, indem Animationen an Ereignisse gebunden werden.

Die erstellte Animationsinstanz kann durch Aufrufen der Animationsmethode beschrieben werden. Nach Abschluss des Aufrufs kehrt sie zu sich selbst zurück und unterstützt das Schreiben von Kettenaufrufen.

Innerhalb derselben Animationsinstanz können Sie mehrere Bewegungsformen definieren und mehrere Animationen definieren, die an verschiedene Tags gebunden sind

Beispielcode:

animation1: {}
animation2: {}

touch: function () {
 let animation1 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });
 this.setData({
  animation1: animation1.export()
 });
 let animation2 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation2.opacity(0.7).step({ duration: 1000 });
 this.setData({
  animation2: animation2.export()
 });
}

2 . Animationsausführung aufrufen

2.1 Animation binden

Erstellte Animationsinstanz an das entsprechende Label binden

Beispiel Code

<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>

2.2 Animation auslösen

Animationsausführung über Seitenereignisse aufrufen

Beispielcode:

<view bindtap="touch"></view>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie einen Bestätigungscode, um einen Countdown-Effekt über das WeChat-Applet zu erhalten

ES6-Iterator und for.of-Schleife ( Detailliertes Tutorial)

Benutzen Sie das Better-Scroll-Plugin in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Animationen im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!