Implémentation de l'animation d'animation dans l'applet WeChat

Cet article présente principalement en détail la méthode de mise en œuvre de l'animation dans l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

1. Créer une instance d'animation

wx.createAnimation(OBJECT)

Créer une animation Animation d'instances. Appelez les méthodes de l'instance pour décrire l'animation. Enfin, les données d'animation sont exportées via la méthode d'exportation de l'instance d'animation et transmises à la propriété d'animation du composant.
Remarque : Chaque fois que la méthode d'exportation est appelée, l'opération d'animation précédente sera effacée

File d'attente d'animation

Appeler L'opération d'animation Step() doit être appelée après la méthode pour indiquer l'achèvement d'un groupe d'animations. Vous pouvez appeler n'importe quel nombre de méthodes d'animation dans un groupe d'animations. Toutes les animations d'un groupe d'animations démarreront en même temps. Le prochain groupe d'animations ne se poursuivra pas tant qu'un groupe d'animations n'est pas terminé. Cette étape peut transmettre un paramètre de configuration similaire à wx.createAnimation() pour spécifier la configuration de l'animation de groupe actuelle. L'exécution d'une animation peut être appelée en liant des animations à des événements.

L'instance d'animation créée peut être décrite en appelant la méthode d'animation. Une fois l'appel terminé, elle reviendra à elle-même, prenant en charge l'écriture d'appel en chaîne.
Au sein d'une même instance d'animation, vous pouvez définir plusieurs formes de mouvement et définir plusieurs animations liées à différentes balises

Exemple de code :

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. Exécution de l'animation d'appel

2.1 Lier l'animation

Lier l'instance d'animation créée définie à la balise correspondante

Exemple de code

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

2.2 Animation de déclenchement

Exécution d'une animation d'appel via des événements de page

Exemple code :

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

Recommandations associées :

Tutoriel sur l'utilisation de l'animation CSS3

Utilisation de l'animation CSS3 Explication détaillée de la méthode de réaliser un effet carrousel avec des attributs d'animation

Introduction à l'utilisation habile du plug-in d'effets spéciaux d'animation CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!