1.前言
微信小程序的开发已经逐渐成为了一种趋势，对于小程序的开发，我们需要掌握的技能也是很多的，其中动画效果的实现是小程序中非常重要的一个方面。而在小程序的动画效果中，循环动画更是一种非常常见的类型，下面我们将使用animation来编写一个循环动画，通过实现让云朵飘的效果，来帮助大家更好地理解。
2.效果预览
在正式开始编写代码之前，我们可以先来看一下最终的效果：让云朵在大海上飘荡
3.动画效果实现
3.1 动画基础
在小程序开发中，要实现动画效果，我们需要使用到animation动画，在小程序的wx.createAnimation()中提供了很多被支持的方法，我们可以使用 animation.xxx() 来控制动画的执行，其中，setTiming() 是 animation 实例中最常用的一个方法，用于指定一些配置项，如 duration（动画执行的时长，默认值 400ms）、timingFunction（定义动画的效果，默认值 "linear"）、delay（动画延迟执行的时间，默认值 0）等配置。示例代码如下：
const animation = wx.createAnimation({
duration: 1000, //1s后停止
timingFunction: 'ease', //缓动函数
delay: 0 //动画延迟时间为0
})
上述代码我们定义了一个动画，时长为1s，延迟时间为0，缓动效果为 ease。
3.2 循环动画实现
在循环动画实现过程中，我们需要借助setInterval方法来实现动画的循环效果，setInterval方法是在一定时间间隔后，反复执行一次指定的函数，直到取消该函数为止。
const timer=setInterval(function(){
// 在这里执行动画操作
},2000)
在循环动画实现的过程中，我们需要注意以下几个点：
每次循环时都要重新创建一个 animation 实例
每次设置完动画效果之后，需要调用动画的 export 方法，才能更改视图的属性
回调函数中需要执行要循环的操作，比如上下移动等等
下面，我们就以让云朵飘的效果来作为例子，来进一步地说明循环动画的实现。
3.3 云朵飘的效果实现
云朵飘荡的效果主要是通过定位实现的，需要每隔一段时间修改云朵的定位，使其形成一个类似于飘动的效果。
代码如下：
Page({
data: {
cloud: '', // 初始云朵定位
},
onLoad: function () {
let that= this
let time = setInterval(()=> {
//在每个时间段内，修改云朵定位
that.cloudFn()
}, 2000) //每隔2s执行一次
},
cloudFn:function(){
const animation = wx.createAnimation({ //每次循环都需要重新创建animation
duration: 2000, //时间为2s
timingFunction: 'ease',
delay: 0
})
animation.translateY(-300).step({duration:2000}) //往上移动300rpx
animation.translateY(0).step({duration:0}) //开始执行动画
this.setData({
cloud: animation.export() //使设置的动态属性值生效
})
}
})
上述代码中，我们定义了一个名为cloudFn的函数，用于每隔2s设置一次云朵的定位。在函数内部，我们首先使用wx.createAnimation()方法创建了一个animation的实例，用于控制云朵的运动。然后在每一次循环中，我们调用 animation 的 translateY() 方法，使云朵向上移动 300rpx，然后再调用 animation 的 step() 方法设置动画执行完成后的属性。最后通过调用setData()方法使得设置的动态属性值生效。
4.总结
至此，我们就实现了一个让云朵飘的效果。实现循环动画的关键在于创建animation实例和使用 setInterval()方法来不断地修改动画的定位。当然，在实际的开发中，涉及到的动画效果还有很多，希望大家能够在实际的开发中不断地探究，丰富自身动画效果的实现方式。