微信小程序開發(fā)之a(chǎn)nimation循環(huán)動(dòng)畫實(shí)現(xiàn)讓云朵飄的效果
Jun 22, 2018 pm 05:39 PM這篇文章主要介紹了微信小程序開發(fā)之a(chǎn)nimation循環(huán)動(dòng)畫實(shí)現(xiàn)的讓云朵飄效果,結(jié)合實(shí)例形式分析了animation結(jié)合js時(shí)間函數(shù)實(shí)現(xiàn)循環(huán)動(dòng)畫效果的具體步驟與相關(guā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秒 }*/
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)!
相關(guān)推薦:
微信小程序?qū)崿F(xiàn)登錄頁云層漂浮的動(dòng)畫效果
以上是微信小程序開發(fā)之a(chǎn)nimation循環(huán)動(dòng)畫實(shí)現(xiàn)讓云朵飄的效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機(jī)

Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費(fèi)的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)

閑魚官方微信小程序悄然上線,在小程序中可以發(fā)布閑置與買家/賣家私信交流、查看個(gè)人資料及訂單、搜索物品等,有用好奇閑魚微信小程序叫什么,現(xiàn)在快來看一下。閑魚微信小程序叫什么答案:閑魚,閑置交易二手買賣估價(jià)回收。1、在小程序中可以發(fā)布閑置、與買家/賣家私信交流、查看個(gè)人資料及訂單、搜索指定物品等功能;2、在小程序的頁面中有首頁、附近、發(fā)閑置、消息、我的5項(xiàng)功能;3、想要使用的話必要要開通微信支付才可以購買;

實(shí)現(xiàn)微信小程序中的圖片濾鏡效果隨著社交媒體應(yīng)用的流行,人們?cè)絹碓较矚g在照片中應(yīng)用濾鏡效果,以增強(qiáng)照片的藝術(shù)效果和吸引力。在微信小程序中也可以實(shí)現(xiàn)圖片濾鏡效果,為用戶提供更多有趣和創(chuàng)造性的照片編輯功能。本文將介紹如何在微信小程序中實(shí)現(xiàn)圖片濾鏡效果,并提供具體的代碼示例。首先,我們需要在微信小程序中使用canvas組件來加載和編輯圖片。canvas組件可以在頁面

如何使用CSS實(shí)現(xiàn)元素的旋轉(zhuǎn)背景圖動(dòng)畫效果背景圖動(dòng)畫效果可以增加網(wǎng)頁的視覺吸引力和用戶體驗(yàn)。本文將介紹如何使用CSS實(shí)現(xiàn)元素的旋轉(zhuǎn)背景圖動(dòng)畫效果,并提供具體的代碼示例。首先,我們需要準(zhǔn)備一張背景圖,可以是任何你喜歡的圖片,例如一張?zhí)柣蛘唠婏L(fēng)扇的圖片。將該圖片保存并命名為“bg.png”。接下來,創(chuàng)建一個(gè)HTML文件,并在文件中添加一個(gè)div元素,將其設(shè)置為

實(shí)現(xiàn)微信小程序中的下拉菜單效果,需要具體代碼示例隨著移動(dòng)互聯(lián)網(wǎng)的普及,微信小程序成為了互聯(lián)網(wǎng)開發(fā)的重要一環(huán),越來越多的人開始關(guān)注和使用微信小程序。微信小程序的開發(fā)相比傳統(tǒng)的APP開發(fā)更加簡便快捷,但也需要掌握一定的開發(fā)技巧。在微信小程序的開發(fā)中,下拉菜單是一個(gè)常見的UI組件,實(shí)現(xiàn)了更好的用戶操作體驗(yàn)。本文將詳細(xì)介紹如何在微信小程序中實(shí)現(xiàn)下拉菜單效果,并提供具

閑魚官方微信小程序已經(jīng)悄然上線,它為用戶提供了一個(gè)便捷的平臺(tái),讓你可以輕松地發(fā)布和交易閑置物品。在小程序中,你可以與買家或賣家進(jìn)行私信交流,查看個(gè)人資料和訂單,以及搜索你想要的物品。那么閑魚在微信小程序中究竟叫什么呢,這篇教程攻略將為您詳細(xì)介紹,想要了解的用戶們快來跟著本文繼續(xù)閱讀吧!閑魚微信小程序叫什么答案:閑魚,閑置交易二手買賣估價(jià)回收。1、在小程序中可以發(fā)布閑置、與買家/賣家私信交流、查看個(gè)人資料及訂單、搜索指定物品等功能;2、在小程序的頁面中有首頁、附近、發(fā)閑置、消息、我的5項(xiàng)功能;3、

微信小程序?qū)崿F(xiàn)圖片上傳功能隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,微信小程序已經(jīng)成為了人們生活中不可或缺的一部分。微信小程序不僅提供了豐富的應(yīng)用場(chǎng)景,還支持開發(fā)者自定義功能,其中包括圖片上傳功能。本文將介紹如何在微信小程序中實(shí)現(xiàn)圖片上傳功能,并提供具體的代碼示例。一、前期準(zhǔn)備工作在開始編寫代碼之前,我們需要先下載并安裝微信開發(fā)者工具,并注冊(cè)成為微信開發(fā)者。同時(shí),還需要了解微信

實(shí)現(xiàn)微信小程序中的圖片旋轉(zhuǎn)效果,需要具體代碼示例微信小程序是一種輕量級(jí)的應(yīng)用程序,為用戶提供了豐富的功能和良好的用戶體驗(yàn)。在小程序中,開發(fā)者可以利用各種組件和API來實(shí)現(xiàn)各種效果。其中,圖片旋轉(zhuǎn)效果是一種常見的動(dòng)畫效果,可以為小程序增添趣味性和視覺效果。在微信小程序中實(shí)現(xiàn)圖片旋轉(zhuǎn)效果,需要使用小程序提供的動(dòng)畫API。下面是一個(gè)具體的代碼示例,展示了如何在小程

使用微信小程序?qū)崿F(xiàn)輪播圖切換效果微信小程序是一種輕量級(jí)的應(yīng)用程序,具有簡單、高效的開發(fā)和使用特點(diǎn)。在微信小程序中,實(shí)現(xiàn)輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程序?qū)崿F(xiàn)輪播圖切換效果,并給出具體的代碼示例。首先,在微信小程序的頁面文件中,添加一個(gè)輪播圖組件。例如,可以使用<swiper>標(biāo)簽來實(shí)現(xiàn)輪播圖的切換效果。在該組件中,可以通過b
