【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中animation循環(huán)動(dòng)畫(huà)怎么實(shí)現(xiàn)讓云朵飄的效果

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中animation循環(huán)動(dòng)畫(huà)怎么實(shí)現(xiàn)讓云朵飄的效果

這篇文章主要介紹微信小程序中animation循環(huán)動(dòng)畫(huà)怎么實(shí)現(xiàn)讓云朵飄的效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！微信小程序提供了實(shí)現(xiàn)動(dòng)畫(huà)的api——animation，但卻不能循環(huán)播放，都是一次性的，動(dòng)完就Over了，下面提供一個(gè)用微信小程序的animation來(lái)實(shí)現(xiàn)循環(huán)動(dòng)畫(huà)的玩具，拋磚引玉，希望大家能想出更好的方法來(lái)實(shí)現(xiàn)真正的循環(huán)。說(shuō)是玩具是因?yàn)檫@個(gè)循環(huán)動(dòng)畫(huà)通過(guò)js腳本的setInterval來(lái)實(shí)現(xiàn)的，但'setInterval'在實(shí)際運(yùn)行中會(huì)出現(xiàn)越來(lái)越嚴(yán)重的延遲，這是由于js的單線程運(yùn)行模式所決定的（具體可以搜本關(guān)資料看），所以動(dòng)畫(huà)間隙并不是那么流暢，所以先玩玩吧，讓我們來(lái)實(shí)現(xiàn)讓云朵飄……截圖如下：實(shí)現(xiàn)代碼：index.wxml<view

class="clouds">

<image

animation="{{animationCloudData}}"

class="yun1"

src="../../img/yun1.png"></image>

</view>index.jsonReady:

function

()

{

//

頁(yè)面渲染完成

//

實(shí)例化一個(gè)動(dòng)畫(huà)

var

that

=

this;

var

i

=

0

var

ii

=

0

var

animationData

=

wx.createAnimation({

duration:

1000,

//

默認(rèn)為400

動(dòng)畫(huà)持續(xù)時(shí)間，單位ms

timingFunction:

'ease-in-out',

//transformOrigin:

'4px

91px'

});

var

animationCloudData

=

wx.createAnimation({

duration:

1000,

//

默認(rèn)為400

動(dòng)畫(huà)持續(xù)時(shí)間，單位ms

timingFunction:

'ease-in-out',

//transformOrigin:

'4px

91px'

});

//

順序執(zhí)行，當(dāng)已經(jīng)執(zhí)行完上面的代碼就會(huì)開(kāi)啟定時(shí)器

//

循環(huán)執(zhí)行代碼

//dotAnFun

=

setInterval(function

()

{});

/*setInterval(function

()

{

//

動(dòng)畫(huà)腳本定義

//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)出動(dòng)畫(huà)示例

animationData:

animationData.export(),

//animationCloudData:

animationCloudData.export(),

})

++i;

console.log(i);

}.bind(that),

2000);//循環(huán)時(shí)間

這里1000是1秒

*/

//動(dòng)畫(huà)的腳本定義必須每次都重新生成，不能放在循環(huán)外

animationCloudData.translateX(200).step({

duration:

5000

}).translateX(0).step({

duration:

5000

});

//

更新數(shù)據(jù)

that.setData({

//

導(dǎo)出動(dòng)畫(huà)示例

//animationData:

animationData.export(),

animationCloudData:

animationCloudData.export(),

})

setInterval(function

()

{

//動(dòng)畫(huà)的腳本定義必須每次都重新生成，不能放在循環(huán)外

animationCloudData.translateX(300).step({

duration:

5000

}).translateX(-100).step({

duration:

5000

});

//

更新數(shù)據(jù)

that.setData({

//

導(dǎo)出動(dòng)畫(huà)示例

//animationData:

animationData.export(),

animationCloudData:

animationCloudData.export(),

})

++ii;

console.log(ii);

}.bind(that),10000);//3000這里的設(shè)置如果小于動(dòng)畫(huà)step的持續(xù)時(shí)間的話會(huì)導(dǎo)致執(zhí)行一半后出錯(cuò)

}index.wxss.clouds{

margin-top:320rpx;

}

.yun1{

width:320rpx;

height:

120rpx;

}附：參考備用：/*

var

that

=

this;

//

頁(yè)面渲染完成

//實(shí)例化一個(gè)動(dòng)畫(huà)

var

animation

=

wx.createAnimation({

duration:

1000,

timingFunction:

'ease',

})

this.animation

=

animation

animation.scale(2,

2).rotate(45).step().scale(1,1).step();

//導(dǎo)出動(dòng)畫(huà)

this.setData({

animationData:

animation.export()

})

var

i

=

0;

//

順序執(zhí)行，當(dāng)已經(jīng)執(zhí)行完上面的代碼就會(huì)開(kāi)啟定時(shí)器

/*setTimeout(function

()

{

that.setData({

animationData:

animation.export()

});

i++;

console.log(i);

},

1000);*/

/*setInterval(functio