Vom WeChat-Applet entwickelte Animationsschleifenanimation, um den Effekt zu erzielen, dass Wolken schweben

In diesem Artikel wird hauptsächlich der schwebende Wolkeneffekt vorgestellt, der durch die im WeChat-Applet entwickelte Animationsschleifenanimation erzielt wird. Er analysiert die spezifischen Schritte und zugehörigen Betriebsfähigkeiten der Animation in Kombination mit der js-Zeitfunktion, um einen Schleifenanimationseffekt in Form von Beispielen zu erzielen Ich brauche es. Als Referenz:

Das Beispiel in diesem Artikel beschreibt den schwebenden Wolkeneffekt, der durch die im WeChat-Applet entwickelte Animationsschleifenanimation erzielt wird. Ich teile es Ihnen als Referenz mit:

Das WeChat-Applet bietet eine API zum Realisieren von Animationen, die jedoch nicht in einer Schleife abgespielt werden können Hier ist ein Beispiel. Verwenden Sie die Animation des WeChat-Applets, um das Spielzeug einer Schleifenanimation zu realisieren. Ich hoffe, dass jeder einen besseren Weg finden kann, die echte Schleife zu realisieren. Es soll sich um ein Spielzeug handeln, da diese Schleifenanimation über das setInterval des js-Skripts implementiert wird, bei „setInterval“ kommt es jedoch zu immer größeren Verzögerungen im tatsächlichen Betrieb. Dies ist auf den Single-Thread-Betriebsmodus von js zurückzuführen (z Details können Sie suchen (siehe Informationen zu diesem Level), daher sind die Animationslücken nicht so glatt, also lasst uns eine Weile spielen und die Wolken schweben lassen ...

Der Screenshot sieht wie folgt aus:

Implementierungscode:

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;
}

Anhang: Referenz:

/*
  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秒  
 }*/

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie im PHP-Chinesisch Webseite!

Verwandte Empfehlungen:

WeChat-Applet realisiert den Animationseffekt schwebender Wolken auf der Anmeldeseite

WeChat-Applet realisiert die Gieriger Effekt Schlangenfressspiel [mit Quellcode]

Das obige ist der detaillierte Inhalt vonVom WeChat-Applet entwickelte Animationsschleifenanimation, um den Effekt zu erzielen, dass Wolken schweben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!