Animation loop animation developed in WeChat applet to achieve the effect of making clouds float

This article mainly introduces the floating clouds effect achieved by animation loop animation developed in WeChat applet. It analyzes the specific steps and related operation skills of animation combined with js time function to achieve loop animation effect in the form of examples. Friends who need it can For reference,

The example in this article describes the floating clouds effect achieved by the animation loop animation developed in the WeChat applet. Share it with everyone for your reference, the details are as follows:

WeChat applet provides an API to realize animation - animation, but it cannot be played in a loop. They are all one-time and will be Over after the movement. Here is an example Use the animation of WeChat applet to realize the toy of 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;
}

Attachment: Reference:

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat applet realizes the animation effect of floating clouds on the login page

WeChat applet realizes the greedy effect Snake-eating game [with source code]

The above is the detailed content of Animation loop animation developed in WeChat applet to achieve the effect of making clouds float. For more information, please follow other related articles on the PHP Chinese website!