前言
本文主要介紹的是關于微信小程序實現可實時改變轉速的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，但是用起來感覺極其麻煩，而且容易產生倒轉，對設備的性能消耗也多，動畫多了以后就會極其卡頓，所以還是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; /*動畫執行快慢的參數*/ animation-iteration-count: infinite; /*動畫執行多少次的參數*//*以下是兼容ios所需，參數意義與上相同*/ -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); }} |
效果圖
如果只是一個一次性的動畫效果，現在這些代碼就OK了。
如果想要實時可以改變旋轉的轉速，我們還得再加點東西。
實現可以實時修改轉速
微信小程序里涉及到實時數據就避免不了Page.data這個東西。
新聞熱點
疑難解答
