Heim > Artikel > WeChat-Applet > Implementieren Sie Animationen in einem kleinen Programm
Dieses Mal werde ich Ihnen vorstellen, wie Sie AnimationenAnimationen in einem Miniprogramm implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung von Animationsanimationen in einem Miniprogramm? Fall. Schauen wir uns das einmal an.
WeChat-Applet implementiert Animationsanimationen, der spezifische Inhalt ist wie folgt
1. Animationsinstanz erstellen
wx.createAnimation(OBJECT )
Erstellen Sie eine Animationsinstanzanimation. 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 das Animations--Attribut 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 die Animation an das Ereignis gebunden wird.
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
Die erstellte Animationsinstanz an das entsprechende Tag binden
Beispielcode
<view animation="{{animation1}}"></view> <view animation="{{animation2}}"></view>
2.2 Animation auslösen
Animationsausführung durch Seitenereignisse aufrufen
Beispielcode:
<view bindtap="touch"></view>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So entwickeln Sie ein WeChat-Applet, um persönliche Benutzerinformationen zu erhalten
Vue2.5 und Element UI-Komponenten-Paging-Funktionsimplementierung
Das obige ist der detaillierte Inhalt vonImplementieren Sie Animationen in einem kleinen Programm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!