l'animation réalise l'exemple d'animation consistant à faire flotter les nuages

L'exemple de cet article décrit la boucle d'animation animation du développement de l'applet WeChat pour obtenir l'effet de nuages ​​​​flottants.

Créez 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.

L'applet WeChat fournit une API pour implémenter l'animation - animation, mais elle ne peut pas être lue en boucle, et c'est tout à fait unique. Oui, ce sera fini après le mouvement. Voici un jouet qui utilise l'animation de l'applet WeChat pour réaliser l'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;
}

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!