Animationsanimationsimplementierung für die WeChat-Applet-Entwicklung

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: Bei jedem Aufruf der Exportmethode wird der vorherige Animationsvorgang gelöscht

Animationswarteschlange
Nach dem Aufruf der Animationsvorgangsmethode muss step() aufgerufen werden, um den Abschluss von a anzuzeigen Gruppe von Animationen, die in einer Gruppe ausgeführt werden können. Wenn in einer Animation eine beliebige Anzahl von Animationsmethoden aufgerufen wird, starten alle Animationen in einer Animationsgruppe gleichzeitig und die nächste Animationsgruppe wird erst bei einer Gruppe von Animationen fortgesetzt Animationen ist abgeschlossen. 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 mehrere Bewegungsformen definiert und mehrere Animationen an verschiedene Tags gebunden werden

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 die entsprechende Beschriftung binden

Beispielcode

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

2.2 Animation auslösen

Pass Page-Ereignis ruft die Animationsausführung auf

Beispielcode:

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

Das obige ist der detaillierte Inhalt vonAnimationsanimationsimplementierung für die WeChat-Applet-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!