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
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!
