怎么设置微信小程序循环播放？
在小程序播放动画或者小视频的时候，由于小程序api本身的限制，总是只能播放一次。小编用了setInterval方法也只能循环播放一次，感觉问题出在小程序代码上，那么怎么设置微信小程序循环播放呢?
小编之前设置的代码如下：
audioPlay: function (e) {
// 在标签页添加 data-*** 可以通过e.currentTarget.dataset.*** 取值
this.audioCtx.play()
this.setData({
courseImg: '../../images/pause.png'
})
this.setData({
temp1: true
})
this.setData({
temp2: false
})
var that = this
setInterval(function(){
that.playCD()
},1000)
// var that = this
// var loopValue = that.data.second / 100
// var temp = that.data.percent
//循环改变进度条的值
// setInterval(function(){
// if(temp < 100){
// console.info(that.data.percent)
// temp = temp + 1
// console.info(temp)
// }
// }, loopValue)
},playCD:function(){
var that = this
console.info('开始调用了')
setInterval(function () {
that.animation = animation
animation.rotate(360).step()
that.setData({
animationData: animation.export()
})
}, 1000)
},
那么怎么设置微信小程序循环播放呢?以下是实现代码：
index.wxml
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;
}
小编已经给出了之前循环播放不成功的代码和修改后的代码，庆幸的是，之后的代码已经能够成功设置微信小程序循环播放了，看来问题确实是出在代码上，希望大家参照微信小程序商店提供的资料都能学会。
微信小程序多两层循环怎么实现?
小程序template循环调用不了怎么办?
如何实现微信小程序循环输出?