Animation realisiert das Animationsbeispiel, Wolken schweben zu lassen

Das Beispiel in diesem Artikel beschreibt die Animationsschleife Animation der WeChat-Applet-Entwicklung, um den Effekt schwebender Wolken zu erzielen.

Erstellen Sie eine Animationsinstanzanimation. Rufen Sie die Methoden der Instanz auf, um die Animation zu beschreiben. Abschließend werden die Animationsdaten über die Exportmethode der Animationsinstanz exportiert und an das Animations--Attribut der Komponente übergeben.

Hinweis: Bei jedem Aufruf der Exportmethode wird der vorherige Animationsvorgang gelöscht

Das WeChat-Applet bietet eine API zum Implementieren von Animationen – Animationen, die jedoch nicht in einer Schleife abgespielt werden können. Und es ist alles einmalig. Ja, es wird nach der Bewegung vorbei sein. Hier ist ein Spielzeug, das die Animation des WeChat-Applets verwendet, um die 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;
}

Das obige ist der detaillierte Inhalt vonAnimation realisiert das Animationsbeispiel, Wolken schweben zu lassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!