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:

React Server Rendering

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!