Animation en boucle d'animation développée par l'applet WeChat pour obtenir l'effet de faire flotter les nuages

Cet article présente principalement l'effet de nuages ​​​​flottants obtenu par l'animation en boucle d'animation développée dans l'applet WeChat. Il analyse les étapes spécifiques et les compétences opérationnelles associées de l'animation combinées avec la fonction de temps js pour obtenir un effet d'animation en boucle sous forme d'exemples. besoin, c'est possible Pour référence,

L'exemple de cet article décrit l'effet de nuage flottant obtenu par l'animation en boucle d'animation développée dans l'applet WeChat. Je le partage avec vous pour votre référence. Les détails sont les suivants :

L'applet WeChat fournit une API pour réaliser une animation - une animation, mais elle ne peut pas être jouée en boucle. C'est une utilisation unique et. sera terminé après le mouvement. Voici un exemple Utilisez l'animation de l'applet WeChat pour réaliser le jouet d'animation en boucle. J'espère que tout le monde pourra trouver une meilleure façon de réaliser la vraie boucle. On dit que c'est un jouet car cette animation en boucle est implémentée via le setInterval du script js, mais 'setInterval' connaîtra des retards de plus en plus sérieux dans le fonctionnement réel. Cela est dû au mode de fonctionnement monothread de js (pour). plus de détails, vous pouvez rechercher Voir les informations pour ce niveau), donc les écarts d'animation ne sont pas si fluides, alors jouons un moment et faisons flotter les nuages...

La capture d'écran est la suivante :

Code d'implémentation :

index.wxml

<view class="clouds">
   <image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image>
  </view>

index.js

onReady: function () {
  // 页面渲染完成
  // 实例化一个动画
  var that = this;
  var i = 0
  var ii = 0
  var animationData = wx.createAnimation({
   duration: 1000, // 默认为400   动画持续时间，单位ms
   timingFunction: 'ease-in-out',
   //transformOrigin: '4px 91px'
  });
  var animationCloudData = wx.createAnimation({
   duration: 1000, // 默认为400   动画持续时间，单位ms
   timingFunction: 'ease-in-out',
   //transformOrigin: '4px 91px'
  });
  // 顺序执行，当已经执行完上面的代码就会开启定时器
  // 循环执行代码
  //dotAnFun = setInterval(function () {});  
  /*setInterval(function () {
   // 动画脚本定义
   //animationData.rotate(6 * (++i)).step()
   //animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();
   animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });
   // 更新数据
   that.setData({
    // 导出动画示例
    animationData: animationData.export(),
    //animationCloudData: animationCloudData.export(),    
   })
   ++i;
   console.log(i);
  }.bind(that), 2000);//循环时间 这里1000是1秒
  */
  //动画的脚本定义必须每次都重新生成，不能放在循环外
  animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });
  // 更新数据
  that.setData({
   // 导出动画示例
   //animationData: animationData.export(),
   animationCloudData: animationCloudData.export(),
  })
  setInterval(function () {
   //动画的脚本定义必须每次都重新生成，不能放在循环外
   animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });
   // 更新数据
   that.setData({
    // 导出动画示例
    //animationData: animationData.export(),
    animationCloudData: animationCloudData.export(),
   })
   ++ii;
   console.log(ii);
  }.bind(that),10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错
}

index.wxss

.clouds{
 margin-top:320rpx; 
}
.yun1{
 width:320rpx;
 height: 120rpx;
}

Pièce jointe : Référence :

/*
  var that = this;
  // 页面渲染完成
  //实例化一个动画
  var animation = wx.createAnimation({
   duration: 1000,
   timingFunction: 'ease',
  })
  this.animation = animation
  animation.scale(2, 2).rotate(45).step().scale(1,1).step();
  //导出动画
  this.setData({
   animationData: animation.export()
  })
  var i = 0;
  // 顺序执行，当已经执行完上面的代码就会开启定时器
  /*setTimeout(function () {
   that.setData({
    animationData: animation.export()
   });
   i++;
   console.log(i);
  }, 1000);*/
  /*setInterval(function () {
   //循环执行代码 
    that.setData({
     animationData: animation.export()
    });
   i++;
   console.log(i); 
  }, 1000) //循环时间 这里是1秒  
 }*/

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun pour un contenu plus connexe. , veuillez faire attention au site Web PHP chinois !

Recommandations associées :

L'applet WeChat réalise l'effet d'animation des nuages ​​flottants sur la page de connexion

L'applet WeChat réalise le effet gourmand Jeu de mangeur de serpent [avec code source]

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!