本文举例说明了微信小程序开发中动画循环动画实现的浮云效果。分享给大家参考，如下：

微信小程序提供API ——动画实现动画，但不能循环播放。都是一次性的，搬完就翻了。这里有一个利用微信小程序的动画实现循环动画的玩具，可以吸引更多的注意力。希望大家能想出更好的办法，实现真正的循环。之所以说是玩具，是因为这个循环动画是通过js脚本的setInterval来实现的，但是‘setInterval’在实际操作中的延迟会越来越严重，这是由js的单线程操作模式决定的(具体来说，可以搜索这个信息)，所以动画的缝隙就没有那么平滑了，先玩玩吧，让云飘起来.

截图如下：

实现代码：

index.wxml

view class=' clouds '图像动画=' { { animationCloudData } } ' class=' yun 1 ' src=' http :/./img/yun 1 . png '/image/view index . js

OnReady:函数(){//页面渲染完成//实例化一个=this的动画变量；Var I=0 var II=0 var动画数据=wx。创建动画({Duration : 1000，//默认为400动画持续时间，单位：ms计时功能：' ease-in-out '，//变换原点： ' 4px 91 px ' })；Var AnimationLouddata=wx。创建动画({Duration : 1000，//默认为400动画持续时间，单位：ms计时功能：' ease-in-out '，//变换原点： ' 4px 91 px ' })；//按顺序执行，当上述代码执行完毕后，定时器就会启动。//循环执行代码。//dotan fun=set interval(function(){ })；/*setInterval(function () {//动画脚本定义//animationdata.rotate (6 * (I))。step ()//animationdata.scale (2，2)。旋转(45)。步骤()。比例尺(1，1)。step()animationdata . translatey(10)。步骤({ duration: 500 })。translateY(-10)。step({ duration : 500 })；//更新. setData({ //导出动画示例animationdata : animationdata . export()，//animationlouddata : animationonclouddata . export()，})I；console . log(I)；}.绑定，2000年)；//这里的循环时间，1000是1秒*///动画的脚本定义每次都要重新生成，不能放在循环外。animation cloud data . translatex(200)。步骤({持续时间： 5000})。translatex (0)。步长({持续时间3360 5000 })；//更新. setData({ //导出动画示例//animationdata : animationdata . export()、animationlouddata : animationonclouddata . export()、}) setInterval(function () {//动画的脚本定义每次都必须重新生成，不能放在循环外。animation cloud data . translatex(300)。步骤({持续时间： 5000})。translatex (-100)。step({ duration : 5000 })//更新数据，即. setData({ //导出动画示例//animationdata : animationdata . export()、animationlouddata : animatianonclouddata . export()、})ii；console . log(ii)；}.绑定(即，10000)；//3000如果这里的设置小于动画步骤的持续时间，半执行后会出现错误} index.wxss。云{ margin-top :320 rpx；} . yun 1 { width :320 rpx；height: 120rpx}附件：参考待机：

/* var=this；//页面渲染完成//实例化一个动画var动画=wx。创建动画({持续时间： 1000，timingFunction: ' ease '，})这一点。动画=动画动画。音阶(2，2).旋转(45 )。步骤()。比例尺(1,1)。step()；//导出动画这个。setdata({ animationData:)动画。export()})var I=0；//顺序执行，当已经执行完上面的代码就会开启定时器/* setTimeout()函数(){即。setdata({ animationData:)动画。export()})；我；控制台。日志(一)；}, 1000);*//*设置间隔(函数(){ //循环执行代码那个。setdata({ animationData:)动画。export()})；我；控制台。日志(一)；}, 1000) //循环时间这里是一秒}*/更多关于Java脚本语言更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript中json操作技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。