animation realizes the animation example of making clouds float

The example of this article describes the animation cycle of WeChat applet developmentAnimationThe effect of making clouds float.

Create an animation instance animation. Call the instance's methods to describe the animation. Finally, the animation data is exported through the export method of the animation instance and passed to the animation attribute of the component.

Note: Each time the export method is called, the previous animation operation will be cleared.

The WeChat applet provides an API to implement animation-animation, but it cannot be played in a loop and is all one-time. Yes, it will be Over after the movement. Here is a toy that uses the animation of the WeChat applet to realize the loop animation. I hope everyone can come up with a better way to realize the real loop. It is said to be a toy because this loop animation is implemented through the setInterval of the js script, but 'setInterval' will experience more and more serious delays in actual operation. This is due to the single-threaded operation mode of js (for details, you can search See the information for this level), so the animation gaps are not so smooth, so let’s play for a while and let’s make the clouds float...

The screenshot is as follows:

Implementation code:

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

The above is the detailed content of animation realizes the animation example of making clouds float. For more information, please follow other related articles on the PHP Chinese website!