微信小程序开发之animation循环动画实现的让云朵飘效果

下面是关于“微信小程序开发之animation循环动画实现的让云朵飘效果”的完整攻略：

1. 了解animation动画

在微信小程序中，我们可以使用animation来创建动画效果。animation可以制作基本的动画类型，如平移、旋转、缩放、透明度等。通过设置animation实例的属性和调用animation的方法，来控制动画的实现。

2. 实现云朵飘动效果

在小程序中实现云朵飘动效果，可以使用animation制作循环动画。下面通过两条实例来说明：

实例一：单个云朵飘动

我们需要先定义一个云朵的图片：

<!--cloud.js-->
<image src="/images/cloud.png"></image>

接下来，在page的javascript文件中使用createAnimation方法创建一个animation实例，并设置云朵的初始位置、偏移量和透明度。

//index.js
const animation = wx.createAnimation({
  duration: 5000,
  timingFunction: 'linear',
  transformOrigin: '50% 50%',
});

// 设置云朵的初始位置、偏移量和透明度
animation.translateX(-200).translateY(100).opacity(1).step();

在云朵的image标签中添加animation属性，并将上面定义的animation.export()赋值给它。

<!--cloud.js-->
<image src="/images/cloud.png" animation="{{animation.export()}}"></image>

然后在page的onLoad函数中，通过setInterval方法不断调用animation.translateX和animation.translateY方法，实现云朵的飘动效果。

//index.js
onLoad: function () {
  setInterval(function () {
    animation.translateX(500).translateY(50).step();
    animation.translateX(-200).translateY(100).step({ duration: 5000 });
    this.setData({
      animation: animation.export(),
    });
  }.bind(this), 10000);
}

该方法通过在5000毫秒内将云朵平移过去，然后在5000毫秒内将云朵平移到原点的方式，实现了云朵循环飘动的效果。

实例二：多个云朵同时飘动

这一示例中，我们需要用到wx.createAnimation()方法和wx.createSelectorQuery()方法。

首先，我们需要在wxml中定义多个云朵的image标签。

<!--index.wxml-->
<image id="cloud1" src="/images/cloud.png" animation="{{cloudAnimation1.export()}}"></image>
<image id="cloud2" src="/images/cloud.png" animation="{{cloudAnimation2.export()}}"></image>

接着，在page的javascript文件中，我们需要使用wx.createSelectorQuery()方法获取到各个云朵的top和left属性，然后根据这些属性为每个云朵设置一个不同的起始位置。

//index.js
onLoad: function () {
  const query = wx.createSelectorQuery().in(this);
  const that = this;
  query.selectAll('image').boundingClientRect(function (res) {
    res.forEach(function (cloud, index) {
      const animation = wx.createAnimation({
        duration: 5000,
        timingFunction: 'linear',
        transformOrigin: '50% 50%',
      });
      const randTop = Math.floor(Math.random() * that.data.winHeight);
      const randLeft = Math.floor(Math.random() * that.data.winWidth);
      animation.translateX(randLeft - cloud.left - cloud.width / 2).translateY(randTop - cloud.top - cloud.height / 2).step();
      that.setData({
        ['cloudAnimation' + (index + 1)]: animation.export(),
      });
    });
  }).exec();
}

在代码中，我们使用了Math.random()函数来随机生成每个云朵的起始位置。

然后，在onLoad函数的setInterval中逐个调用各个云朵的animation.translateX和animation.translateY方法，实现云朵的飘动效果。

//index.js
setInterval(function () {
  const query = wx.createSelectorQuery().in(this);
  query.selectAll('image').boundingClientRect(function (res) {
    res.forEach(function (cloud, index) {
      const animation = wx.createAnimation({
        duration: 5000,
        timingFunction: 'linear',
        transformOrigin: '50% 50%',
      });
      const randTop = Math.floor(Math.random() * that.data.winHeight);
      const randLeft = Math.floor(Math.random() * that.data.winWidth);
      animation.translateX(randLeft - cloud.left - cloud.width / 2).translateY(randTop - cloud.top - cloud.height / 2).step({ duration: 5000 });
      that.setData({
        ['cloudAnimation' + (index + 1)]: animation.export(),
      });
    });
  }).exec();
}.bind(this), 10000);

这里，我们设置了一定的延迟，以便让每个云朵的动画效果相互独立。

以上就是关于实现云朵循环飘动效果的攻略。希望对你有帮助。