Implémenter l'animation dans un petit programme

Cette fois, je vais vous présenter comment implémenter l'animationanimation dans un mini programme Quelles sont les précautions pour implémenter l'animation dans un mini programme. Ce qui suit est un exemple pratique. cas. Jetons un coup d'oeil une fois.

L'applet WeChat implémente l'animation d'animation, le contenu spécifique est le suivant

1. Créer une instance d'animation

wx.createAnimation(OBJET )

Créer une animation d'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 à l'attribut 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é l'animation méthode d'opération, Appelez step() 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. 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 de l'animation peut être appelée en liant l'animation à

événement .

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 à 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 de code :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Rendu du serveur React

Comment développer une applet WeChat pour obtenir des informations personnelles sur l'utilisateur

Implémentation de la fonction de pagination des composants Vue2.5 et Element UI

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!