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