Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter l'animation dans l'applet WeChat

亚连
Libérer: 2018-06-09 13:41:34
original
3385 Les gens l'ont consulté

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

L'applet WeChat implémente l'animation pour plus de détails. 🎜>

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é 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 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()
 });
}
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion
Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le code de vérification pour obtenir un effet de compte à rebours via l'applet WeChat

Itérateur ES6 et boucle for.of ( Tutoriel détaillé)

Utilisation du plug-in de défilement amélioré dans vue

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal