Implémentation d'animations pour le développement d'applets WeChat

1. Créez une instance d'animation

wx.createAnimation(OBJECT)

Créez une instance d'animation. 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
Après avoir appelé la méthode d'opération d'animation, step() doit être appelé pour indiquer l'achèvement d'une groupe d'animations, qui peut être réalisé en groupe. Si un certain nombre de méthodes d'animation sont appelées dans une animation, toutes les animations d'un groupe d'animations démarreront en même temps et le groupe d'animations suivant ne se poursuivra pas avant un groupe d'animations. les animations sont terminées. 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.
Dans la même instance d'animation, plusieurs formes de mouvement peuvent être définies et plusieurs animations peuvent être 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()
  });
}

Exécution d'animation d'appel <🎜. >

2.1 Lier l'animation

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

Exemple de code

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

2.2 Déclencher l'animation

Appel de l'animation exécution via des événements de page

Exemple de code :

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!