先上效果圖 

 最上面那一行就(jiu)是個(ge)簡(jian)單的(de)換顏色效果，極其簡(jian)答就(jiu)不多說了，直接上代碼(ma)。

1. <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

1. data: { backgroundcolor:'red' }, changeColor:function(e){ this.setData({ backgroundcolor: e.currentTarget.dataset.color }) }

那么下(xia)面咱(zan)們說一說這個(ge)旋轉(zhuan)的(de)動畫(hua)。小程序里呢(ni)，有(you)自己的(de)動畫(hua)api，但是用(yong)起來(lai)感覺極(ji)其麻煩，而(er)且容易產生倒轉(zhuan)，對設備的(de)性能消耗也多，動畫(hua)多了以后就會極(ji)其卡頓(dun)，所(suo)以還是css3的(de)動畫(hua)比較好。  首先來(lai)寫這個(ge)css3動畫(hua)  css3旋轉(zhuan)動畫(hua)

1. <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); } }

效果圖 

 如果(guo)只是(shi)一個(ge)一次(ci)性的(de)動畫效果(guo)，現在這些代(dai)碼就OK了。  如果(guo)想要實時(shi)可(ke)以改變(bian)旋轉的(de)轉速，我(wo)們(men)還(huan)得再加點東西。

實現可以實時(shi)修改轉速  微信小程序里涉及(ji)到實時(shi)數據就避(bi)免不了Page.data這個(ge)東西。  1.我們需要(yao)將控(kong)制動畫時(shi)間的css屬性(xing)放到內聯樣式中去

1. <view class='animationSlow' style='animation-duration: 2000ms;-webkit-animation-duration: 2000ms;'></view>

2.在頁面(mian)對應的js中，設(she)置掌控(kong)時間(jian)的Page.data屬(shu)性(xing)，將wxml里內(nei)聯屬(shu)性(xing)的時間(jian)改為(wei)Page.data的屬(shu)性(xing)。

1. <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); } }

3.接下來我們(men)寫(xie)幾個按鈕，綁定上修改這個時間(jian)的方(fang)法，進而來改變(bian)轉速。這一步都(dou)是(shi)基本代碼(ma)(ma)，我就(jiu)不貼代碼(ma)(ma)了。放個效果(guo)圖吧。

效果(guo)圖(tu)

那么(me)接下(xia)來重點來了(le)：其實這里有(you)個bug，這個效果呢(ni)在安卓(zhuo)機上是一點點問題(ti)都(dou)沒有(you)的。但是在蘋(pin)果機上，動(dong)畫(hua)一旦開始，再通(tong)過這個方法去修改轉速，就不能生效了(le)。

解決IOS系統的BUG  上(shang)(shang)面說(shuo)了(le)，IOS系統上(shang)(shang)呢(ni)，動(dong)畫(hua)(hua)一旦開始，這個(ge)方法就不(bu)(bu)能用(yong)了(le)。那(nei)么咱是(shi)(shi)不(bu)(bu)是(shi)(shi)可以先把這個(ge)動(dong)畫(hua)(hua)停(ting)下(xia)來，然后再(zai)改轉速呢(ni)？這個(ge)辦法可不(bu)(bu)可以呢(ni)？答案(an)是(shi)(shi)肯定的，但是(shi)(shi)不(bu)(bu)是(shi)(shi)去把動(dong)畫(hua)(hua)時間改為0，而是(shi)(shi)采用(yong)了(le)css3動(dong)畫(hua)(hua)的一個(ge)屬性。CSS3 動(dong)畫(hua)(hua)教程

1. animation-play-state: paused|running;

簡(jian)而言之(zhi)就是先用這(zhe)個屬性(xing)(xing)把動畫暫停，修改轉(zhuan)速，然后再(zai)讓它跑起來。這(zhe)一(yi)切都得再(zai)js里進行。  1.需要在標簽的內(nei)聯樣式里加上這(zhe)個屬性(xing)(xing)，在Page.data里再(zai)定義一(yi)個屬性(xing)(xing)控制開始(shi)暫停。

1. <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.然后我們去修(xiu)改改變轉速(su)的方法(fa)。暫停>(修(xiu)改>跑起來)，效(xiao)果上稍微有些延(yan)遲。

1. changeTime:function(e){ this.setData({ status: 'paused' }) this.setData({ timeAnimation: e.currentTarget.dataset.time, status: 'running' }) },

3.來上效果(guo)圖了(le)。

效果圖

可能動圖(tu)上感(gan)覺不出來，不過你們可以去真機試(shi)一下，就可以展現出來了。