微信小程序開發(fā)之a(chǎn)nimation循環(huán)動(dòng)畫實(shí)現(xiàn)的讓云朵飄效果
本文實(shí)例講述了微信小程序開發(fā)之a(chǎn)nimation循環(huán)動(dòng)畫實(shí)現(xiàn)的讓云朵飄效果。分享給大家供大家參考,具體如下:
微信小程序提供了實(shí)現(xiàn)動(dòng)畫的api——animation,但卻不能循環(huán)播放,都是一次性的,動(dòng)完就Over了,下面提供一個(gè)用微信小程序的animation來實(shí)現(xiàn)循環(huán)動(dòng)畫的玩具,拋磚引玉,希望大家能想出更好的方法來實(shí)現(xiàn)真正的循環(huán)。說是玩具是因?yàn)檫@個(gè)循環(huán)動(dòng)畫通過js腳本的setInterval來實(shí)現(xiàn)的,但'setInterval'在實(shí)際運(yùn)行中會(huì)出現(xiàn)越來越嚴(yán)重的延遲,這是由于js的單線程運(yùn)行模式所決定的(具體可以搜本關(guān)資料看),所以動(dòng)畫間隙并不是那么流暢,所以先玩玩吧,讓我們來實(shí)現(xiàn)讓云朵飄……
截圖如下:
實(shí)現(xiàn)代碼:
index.wxml
<view class="clouds"> <image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image> </view>
index.js
onReady: function () { // 頁面渲染完成 // 實(shí)例化一個(gè)動(dòng)畫 var that = this; var i = 0 var ii = 0 var animationData = wx.createAnimation({ duration: 1000, // 默認(rèn)為400 動(dòng)畫持續(xù)時(shí)間,單位ms timingFunction: 'ease-in-out', //transformOrigin: '4px 91px' }); var animationCloudData = wx.createAnimation({ duration: 1000, // 默認(rèn)為400 動(dòng)畫持續(xù)時(shí)間,單位ms timingFunction: 'ease-in-out', //transformOrigin: '4px 91px' }); // 順序執(zhí)行,當(dāng)已經(jīng)執(zhí)行完上面的代碼就會(huì)開啟定時(shí)器 // 循環(huán)執(zhí)行代碼 //dotAnFun = setInterval(function () {}); /*setInterval(function () { // 動(dòng)畫腳本定義 //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)畫示例 animationData: animationData.export(), //animationCloudData: animationCloudData.export(), }) ++i; console.log(i); }.bind(that), 2000);//循環(huán)時(shí)間 這里1000是1秒 */ //動(dòng)畫的腳本定義必須每次都重新生成,不能放在循環(huán)外 animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 }); // 更新數(shù)據(jù) that.setData({ // 導(dǎo)出動(dòng)畫示例 //animationData: animationData.export(), animationCloudData: animationCloudData.export(), }) setInterval(function () { //動(dòng)畫的腳本定義必須每次都重新生成,不能放在循環(huán)外 animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 }); // 更新數(shù)據(jù) that.setData({ // 導(dǎo)出動(dòng)畫示例 //animationData: animationData.export(), animationCloudData: animationCloudData.export(), }) ++ii; console.log(ii); }.bind(that),10000);//3000這里的設(shè)置如果小于動(dòng)畫step的持續(xù)時(shí)間的話會(huì)導(dǎo)致執(zhí)行一半后出錯(cuò) }
index.wxss
.clouds{ margin-top:320rpx; } .yun1{ width:320rpx; height: 120rpx; }
附:參考備用:
/* var that = this; // 頁面渲染完成 //實(shí)例化一個(gè)動(dòng)畫 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)畫 this.setData({ animationData: animation.export() }) var i = 0; // 順序執(zhí)行,當(dāng)已經(jīng)執(zhí)行完上面的代碼就會(huì)開啟定時(shí)器 /*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)時(shí)間 這里是1秒 }*/ 更多關(guān)于JavaScript
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
這篇文章主要介紹了JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例,本文將提供代碼示例和詳細(xì)的步驟,幫助你實(shí)現(xiàn)一個(gè)簡(jiǎn)單而實(shí)用的時(shí)間戳倒計(jì)時(shí),感興趣的可以了解一下2023-12-12基于JavaScript實(shí)現(xiàn)窗口拖動(dòng)效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)窗口拖動(dòng)效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01給應(yīng)用部分的js代碼設(shè)定一個(gè)統(tǒng)一的入口
javascript是種腳本語言,瀏覽器下載到哪兒就會(huì)執(zhí)行到哪兒,下面為大家介紹下,如何給應(yīng)用部分的js代碼一個(gè)統(tǒng)一的入口2014-06-06JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在,驗(yàn)證碼倒計(jì)時(shí))
js實(shí)現(xiàn)表單驗(yàn)證功能,通過js代碼驗(yàn)證手機(jī)號(hào)是否存在驗(yàn)證碼倒計(jì)時(shí)功能,代碼簡(jiǎn)單易懂非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-10-10js驗(yàn)證身份證號(hào)有效性并提示對(duì)應(yīng)信息
這篇文章主要介紹了一段超級(jí)全面的二代身份證號(hào)碼驗(yàn)證程序,2015-10-10JavaScript高級(jí)程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記1~5章
這篇文章主要介紹了JavaScript高級(jí)程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記1~5章 的相關(guān)資料,需要的朋友可以參考下2016-03-03