Implementierung von Animationsanimationen im WeChat-Applet

Dieser Artikel stellt hauptsächlich die Methode zur Realisierung von Animationen im WeChat-Applet vor. Ich hoffe, dass er jedem helfen kann.

1. Animationsinstanz erstellen

wx.createAnimation(OBJECT)

Eine Animation erstellen Instanzanimation. 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

Aufruf Die Animationsoperation Step() muss nach der Methode aufgerufen werden, um den Abschluss einer Gruppe von Animationen anzuzeigen. Sie können eine beliebige Anzahl von Animationsmethoden in einer Gruppe von Animationen aufrufen Die nächste Animationsgruppe 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 binden Auf das entsprechende Tag setzen

Beispielcode

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

2.2 Animation auslösen

Animationsausführung durch Seitenereignisse aufrufen

Beispielcode :

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

Verwandte Empfehlungen:

Tutorial zur Verwendung von CSS-Animationsanimationen

Verwendung von CSS3-Animationen Detaillierte Erläuterung der Implementierungsmethode Karusselleffekt mit Animationsattributen

Einführung in die geschickte Verwendung des CSS3-Animations-Animations-Spezialeffekt-Plug-Ins

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