微信小程序?qū)崿F(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫(huà)實(shí)例代碼
我要評(píng)論前言
本文主要介紹的是關(guān)于微信小程序?qū)崿F(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫(huà)的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
先上效果圖
最上面那一行就是個(gè)簡(jiǎn)單的換顏色效果，極其簡(jiǎn)答就不多說(shuō)了，直接上代碼。
WXML
<view class='box' style='background-color:{{backgroundcolor}}'>
</view>
<view class='viewBox'>
<button bindtap='changeColor' data-color='black' class='box'>黑</button>
<button bindtap='changeColor' data-color='violet' class='box'>紫</button>
<button bindtap='changeColor' data-color='orange' class='box'>橙</button>
<button bindtap='changeColor' data-color='blue' class='box'>藍(lán)</button>
<button bindtap='changeColor' data-color='green' class='box'>綠</button>
</view>
JS
data: {
backgroundcolor:'red'
},
changeColor:function(e){
this.setData({
backgroundcolor: e.currentTarget.dataset.color
})
}
那么下面咱們說(shuō)一說(shuō)這個(gè)旋轉(zhuǎn)的動(dòng)畫(huà)。小程序里呢，有自己的動(dòng)畫(huà)api，但是用起來(lái)感覺(jué)極其麻煩，而且容易產(chǎn)生倒轉(zhuǎn)，對(duì)設(shè)備的性能消耗也多，動(dòng)畫(huà)多了以后就會(huì)極其卡頓，所以還是css3的動(dòng)畫(huà)比較好。
首先來(lái)寫(xiě)這個(gè)css3動(dòng)畫(huà)
css3旋轉(zhuǎn)動(dòng)畫(huà)
<view class='animationSlow'></view>
.animationSlow {
width: 100rpx;
height: 100rpx;
background-color: orange;
animation-name: myfirst; /*動(dòng)畫(huà)的名稱 */
animation-duration: 2000ms; /*動(dòng)畫(huà)從開(kāi)始到結(jié)束的時(shí)間*/
animation-timing-function: linear; /*動(dòng)畫(huà)執(zhí)行快慢的參數(shù)*/
animation-iteration-count: infinite; /*動(dòng)畫(huà)執(zhí)行多少次的參數(shù)*//*以下是兼容ios所需，參數(shù)意義與上相同*/
-webkit-animation-name: myfirst;
-webkit-animation-duration: 2000ms;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes myfirst {
/*開(kāi)始轉(zhuǎn)的角度*/
from {
transform: rotate(0deg);
}/*結(jié)束的角度*/
to {
transform: rotate(360deg);
}
}
/*兼容ios*/
@-webkit-keyframes myfirst {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
效果圖
如果只是一個(gè)一次性的動(dòng)畫(huà)效果，現(xiàn)在這些代碼就OK了。
如果想要實(shí)時(shí)可以改變旋轉(zhuǎn)的轉(zhuǎn)速，我們還得再加點(diǎn)東西。
實(shí)現(xiàn)可以實(shí)時(shí)修改轉(zhuǎn)速
微信小程序里涉及到實(shí)時(shí)數(shù)據(jù)就避免不了Page.data這個(gè)東西。
微信小程序中的Page
Page()定義在js文件中，Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。
Page()函數(shù)接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
object參數(shù)為：
1.我們需要將控制動(dòng)畫(huà)時(shí)間的css屬性放到內(nèi)聯(lián)樣式中去
<view class='animationSlow' style='animation-duration: 2000ms;-webkit-animation-duration: 2000ms;'></view>
2.在頁(yè)面對(duì)應(yīng)的js中，設(shè)置掌控時(shí)間的Page.data屬性，將wxml里內(nèi)聯(lián)屬性的時(shí)間改為Page.data的屬性。
data: {
animationTime:'2000ms'
},
<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};'></view>
3.接下來(lái)我們寫(xiě)幾個(gè)按鈕，綁定上修改這個(gè)時(shí)間的方法，進(jìn)而來(lái)改變轉(zhuǎn)速。這一步都是基本代碼，我就不貼代碼了。放個(gè)效果圖吧。
效果圖
那么接下來(lái)重點(diǎn)來(lái)了：其實(shí)這里有個(gè)bug，這個(gè)效果呢在安卓機(jī)上是一點(diǎn)點(diǎn)問(wèn)題都沒(méi)有的。但是在蘋(píng)果機(jī)上，動(dòng)畫(huà)一旦開(kāi)始，再通過(guò)這個(gè)方法去修改轉(zhuǎn)速，就不能生效了。
解決IOS系統(tǒng)的BUG
上面說(shuō)了，IOS系統(tǒng)上呢，動(dòng)畫(huà)一旦開(kāi)始，這個(gè)方法就不能用了。那么咱是不是可以先把這個(gè)動(dòng)畫(huà)停下來(lái)，然后再改轉(zhuǎn)速呢？這個(gè)辦法可不可以呢？答案是肯定的，但是不是去把動(dòng)畫(huà)時(shí)間改為0，而是采用了css3動(dòng)畫(huà)的一個(gè)屬性。CSS3 動(dòng)畫(huà)教程
animation-play-state: paused|running;
簡(jiǎn)而言之就是先用這個(gè)屬性把動(dòng)畫(huà)暫停，修改轉(zhuǎn)速，然后再讓它跑起來(lái)。這一切都得再js里進(jìn)行。
1.需要在標(biāo)簽的內(nèi)聯(lián)樣式里加上這個(gè)屬性，在Page.data里再定義一個(gè)屬性控制開(kāi)始暫停。
<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};animation-play-state:{{status}};-webkit-animation-play-state:{{status}};'></view>
data: {
animationTime:'2000ms',
status: 'running'//paused
},
2.然后我們?nèi)バ薷母淖冝D(zhuǎn)速的方法。暫停>(修改>跑起來(lái))，效果上稍微有些延遲。
changeTime:function(e){
this.setData({
status: 'paused'
})
this.setData({
timeAnimation: e.currentTarget.dataset.time,
status: 'running'
})
},
3.來(lái)上效果圖了。
效果圖
可能動(dòng)圖上感覺(jué)不出來(lái)，不過(guò)你們可以去真機(jī)試一下，就可以展現(xiàn)出來(lái)了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這是一款實(shí)現(xiàn)js 3D旋轉(zhuǎn)木馬特效插件。該插件通過(guò)CSS3和純js來(lái)完成，可中間以3D旋轉(zhuǎn)的方式來(lái)展示一組圖片，歡迎下載2019-08-16
css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼
這篇文章主要介紹了css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-29- 本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例，非常具有實(shí)用價(jià)值，有想去的可以了解一下。2017-01-04
CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂(lè)效果
大家應(yīng)該都玩過(guò)刮刮樂(lè)，如何實(shí)現(xiàn)刮刮樂(lè)效果，這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂(lè)效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-27- 本文給大家分享的是一則使用原生CSS3實(shí)現(xiàn)的圖片翻牌效果，十分的炫酷，代碼卻很簡(jiǎn)單，這里推薦給有相同需求的小伙伴們。2015-03-10
css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫(huà)效果
本文通過(guò)實(shí)例代碼給大家介紹了css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫(huà)效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-09
