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

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果。分享给大家供大家参考，具体如下： 微信小程序提供了实现动画的api——animation，但却不能循环播放，都是一次性的，动完就Over了，下面提供一个用微信小程序的animation来实现循环动画的玩具，抛砖引玉，希望大家能想出更好的方法来实现真正的循环。说是玩具是因为这个循环动画通过js脚本的setInterval来实现的，但’setInterval’在实际运行中会出现越来越严重的延迟，这是由于js的单线程运行模式所决定的（具体可以搜本关资料看），所以动画间隙并不是那么流畅，所以先玩玩吧，让我们来实现让云朵飘…… 在微信小程序开发中，实现动态效果常常需要用到动画功能。标题提到的“微信小程序开发之animation循环动画实现的让云朵飘效果”是一个典型的利用微信小程序提供的API创建动画的例子，主要目的是展示如何用animation API实现一个循环播放的动画，即让云朵在屏幕上飘动。 微信小程序的`animation`模块提供了创建和控制动画的能力，但默认情况下，动画只执行一次，不会自动循环。要实现循环动画，开发者需要自行编写JavaScript逻辑。在这个实例中，开发者通过`setInterval`函数来周期性地触发动画，使云朵不断地在屏幕上来回移动，创造出飘动的效果。 开发者在`index.wxml`文件中添加了一个包含云朵图片的视图组件，并将其与`animation`属性绑定，以便在动画执行时更新其样式： ```html <view class="clouds"> <image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image> </view> ``` 接着，在`index.json`的`Page`生命周期函数`onLoad`或`onReady`中，创建并配置动画。这里使用了`wx.createAnimation`来创建两个动画对象：`animationData`和`animationCloudData`，并设置了动画的持续时间和缓动函数等参数。 然后，开发者使用`setInterval`来定时执行动画脚本。值得注意的是，由于JavaScript的单线程特性，`setInterval`可能会因为其他任务的执行而出现延迟，导致动画不流畅。在这个例子中，开发者分别对`animationData`和`animationCloudData`进行了动画的定义，通过`translateX`和`translateY`改变云朵的位置，以模拟飘动效果。每次执行`step()`方法后，都要调用`export()`导出动画数据，并将这些数据更新到页面的数据模型，以使得视图能够根据新的动画数据进行重绘。 ```javascript // ... var animationCloudData = wx.createAnimation({ duration: 1000, timingFunction: 'ease-in-out' }); // ... setInterval(function () { animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 }); that.setData({ animationCloudData: animationCloudData.export() }); }, 10000); ``` 为了改善由`setInterval`带来的延迟问题，开发者可以考虑使用Promise和requestAnimationFrame来更精确地控制动画的执行，或者利用微信小程序提供的`wx.createSelectorQuery`和`select`方法获取元素的实时位置，配合`wx.nextTick`来更新动画状态，以提高动画的流畅度。 微信小程序中的循环动画实现是一个需要开发者手动控制的过程，通过结合使用`animation` API和JavaScript的定时函数，可以创建各种动态效果。不过，需要注意的是，这种做法可能在性能上存在一定的局限，因此在实际开发中需要寻找更优化的解决方案，以确保动画的平滑性和用户体验。