這篇文章主要介紹了微信小程序開發(fā)之a(chǎn)nimation循環(huán)動畫實現(xiàn)的讓云朵飄效果,結(jié)合實例形式分析了animation結(jié)合js時間函數(shù)實現(xiàn)循環(huán)動畫效果的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序開發(fā)之a(chǎn)nimation循環(huán)動畫實現(xiàn)的讓云朵飄效果。分享給大家供大家參考，具體如下：
微信小程序提供了實現(xiàn)動畫的api——animation，但卻不能循環(huán)播放，都是一次性的，動完就Over了，下面提供一個用微信小程序的animation來實現(xiàn)循環(huán)動畫的玩具，拋磚引玉，希望大家能想出更好的方法來實現(xiàn)真正的循環(huán)。說是玩具是因為這個循環(huán)動畫通過js腳本的setInterval來實現(xiàn)的，但’setInterval’在實際運行中會出現(xiàn)越來越嚴重的延遲，這是由于js的單線程運行模式所決定的（具體可以搜本關(guān)資料看），所以動畫間隙并不是那么流暢，所以先玩玩吧，讓我們來實現(xiàn)讓云朵飄……
截圖如下：
實現(xiàn)代碼：
index.wxml
<view class="clouds">
<image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image>
</view>
index.js
onReady: function () {
// 頁面渲染完成
// 實例化一個動畫
var that = this;
var i = 0
var ii = 0
var animationData = wx.createAnimation({
duration: 1000, // 默認為400 動畫持續(xù)時間，單位ms
timingFunction: 'ease-in-out',
//transformOrigin: '4px 91px'
});
var animationCloudData = wx.createAnimation({
duration: 1000, // 默認為400 動畫持續(xù)時間，單位ms
timingFunction: 'ease-in-out',
//transformOrigin: '4px 91px'
});
// 順序執(zhí)行，當已經(jīng)執(zhí)行完上面的代碼就會開啟定時器
// 循環(huán)執(zhí)行代碼
//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 });
// 更新數(shù)據(jù)
that.setData({
// 導(dǎo)出動畫示例
animationData: animationData.export(),
//animationCloudData: animationCloudData.export(),
})
++i;
console.log(i);
}.bind(that), 2000);//循環(huán)時間 這里1000是1秒
*/
//動畫的腳本定義必須每次都重新生成，不能放在循環(huán)外
animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });
// 更新數(shù)據(jù)
that.setData({
// 導(dǎo)出動畫示例
//animationData: animationData.export(),
animationCloudData: animationCloudData.export(),
})
setInterval(function () {
//動畫的腳本定義必須每次都重新生成，不能放在循環(huán)外
animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });
// 更新數(shù)據(jù)
that.setData({
// 導(dǎo)出動畫示例
//animationData: animationData.export(),
animationCloudData: animationCloudData.export(),
})
++ii;
console.log(ii);
}.bind(that),10000);//3000這里的設(shè)置如果小于動畫step的持續(xù)時間的話會導(dǎo)致執(zhí)行一半后出錯
}
index.wxss
.clouds{
margin-top:320rpx;
}
.yun1{
width:320rpx;
height: 120rpx;
}
附：參考備用：
/*
var that = this;
// 頁面渲染完成
//實例化一個動畫
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(2, 2).rotate(45).step().scale(1,1).step();
//導(dǎo)出動畫
this.setData({
animationData: animation.export()
})
var i = 0;
// 順序執(zhí)行，當已經(jīng)執(zhí)行完上面的代碼就會開啟定時器
/*setTimeout(function () {
that.setData({
animationData: animation.export()
});
i++;
console.log(i);
}, 1000);*/
/*setInterval(function () {
//循環(huán)執(zhí)行代碼
that.setData({
animationData: animation.export()
});
i++;
console.log(i);
}, 1000) //循環(huán)時間 這里是1秒
}*/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是微信小程序開發(fā)之a(chǎn)nimation循環(huán)動畫實現(xiàn)讓云朵飄的效果的詳細內(nèi)容，更多請關(guān)注有卡有網(wǎng)。
