Ausführliche Erklärung der Animationseffekte von WeChat-Miniprogrammen

Vorwort

Aufgrund von Änderungen in den Plänen des Unternehmens bin ich von H5-Seiten auf Miniprogramme umgestiegen. Also begann ich, kleine Programme zu entwickeln. Ich bin kein Front-End-Experte, ich bin nur ein Dreckskerl, der über das Backend schreibt und gelegentlich über das Front-End schreibt. Bitte nicht sprühen, Front-End-Meister.

1. Was ist ein WeChat-Miniprogramm?

Nach meinem Verständnis ist das Applet nur ein hochverkapseltes H5, das verschiedene Komponenten kapselt. Laut offizieller Aussage läuft das Miniprogramm nicht im Browser. Nennen wir es ein WeChat-Plug-in.

2. Miniprogramme können das DOM nicht manipulieren

Miniprogramme können das DOM nicht direkt manipulieren. Was empfohlen wird, ist die Datenbindung. Zum Beispiel vue.js. Daher finde ich persönlich, dass es für Entwickler, die es gewohnt sind, JQ zur Manipulation von DOM zu verwenden, sehr ungewohnt ist. Es erfordert einen Gewöhnungsprozess.

3. Miniprogramme können nicht auf JQ verweisen

Obwohl Miniprogramme auf externes JS verweisen können. Eine Ausnahme tritt jedoch ein, wenn ich es zitiere. Möglicherweise müssen vor der Verwendung Änderungen vorgenommen werden. Das dachte ich mir, da ich schon kleine Programme gemacht habe. Es ist besser, dem Miniprogramm zu folgen. Es kommt also auf die API des Miniprogramms an.

4. Verwenden Sie kleine Programme, um grundlegende Schaltanimationen zu implementieren

HTML-Code

JS-Code

Aus dem obigen Code können wir ersehen, dass ich checkCodeBtnOpacity und checkCodeOpacity verwendet habe, um die Transparenz der beiden Blöcke zu steuern. Wird zum Verstecken verwendet.

Verwenden Sie animationData, um Animationsdaten zu speichern.

Binden Sie dann ein Klickereignis an bindGetCheckCode.

Dann wird die WeChat-API wx.createAnimation aufgerufen, dann wird opacity(1) zur Anzeige aufgerufen und dann wird translatorY(-100) aufgerufen, um die Y-Achse zu verschieben, um einen ansteigenden Effekt zu erzeugen.

Relevante API-Parameter können in der Miniprogramm-API-Dokumentation unter https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html?t=2017112# eingesehen werden. wxcreateanimationobject

Dann rufen Sie this.setData() auf, um die Datenquelle zu ändern. Die Schaltanimation ist abgeschlossen.

Ausführlichere Erklärungen zu den Animationseffekten von WeChat-Miniprogrammen und verwandte Artikel finden Sie auf der chinesischen PHP-Website!