LcFireRabbit

最上面那一行就是個(gè)簡(jiǎn)單的換顏色效果，極其簡(jiǎn)答就不多說了，直接上代碼。

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
    })
  }

那么下面咱們說一說這個(gè)旋轉(zhuǎn)的動(dòng)畫。小程序里呢，有自己的動(dòng)畫api，但是用起來感覺極其麻煩，而且容易產(chǎn)生倒轉(zhuǎn)，對(duì)設(shè)備的性能消耗也多，動(dòng)畫多了以后就會(huì)極其卡頓，所以還是css3的動(dòng)畫比較好。

首先來寫這個(gè)css3動(dòng)畫

css3旋轉(zhuǎn)動(dòng)畫

<view class='animationSlow'></view>

.animationSlow {
   width: 100rpx;
  height: 100rpx;
  background-color: orange;
  animation-name: myfirst; /*動(dòng)畫的名稱 */
  animation-duration: 2000ms; /*動(dòng)畫從開始到結(jié)束的時(shí)間*/
  animation-timing-function: linear; /*動(dòng)畫執(zhí)行快慢的參數(shù)*/
  animation-iteration-count: infinite; /*動(dòng)畫執(zhí)行多少次的參數(shù)*//*以下是兼容ios所需，參數(shù)意義與上相同*/
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
@keyframes myfirst {
  /*開始轉(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)畫效果，現(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è)東西。
1.我們需要將控制動(dòng)畫時(shí)間的css屬性放到內(nèi)聯(lián)樣式中去

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

2.在頁面對(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.接下來我們寫幾個(gè)按鈕，綁定上修改這個(gè)時(shí)間的方法，進(jìn)而來改變轉(zhuǎn)速。這一步都是基本代碼，我就不貼代碼了。放個(gè)效果圖吧。

效果圖

那么接下來重點(diǎn)來了：其實(shí)這里有個(gè)bug，這個(gè)效果呢在安卓機(jī)上是一點(diǎn)點(diǎn)問題都沒有的。但是在蘋果機(jī)上，動(dòng)畫一旦開始，再通過這個(gè)方法去修改轉(zhuǎn)速，就不能生效了。

解決IOS系統(tǒng)的BUG

上面說了，IOS系統(tǒng)上呢，動(dòng)畫一旦開始，這個(gè)方法就不能用了。那么咱是不是可以先把這個(gè)動(dòng)畫停下來，然后再改轉(zhuǎn)速呢？這個(gè)辦法可不可以呢？答案是肯定的，但是不是去把動(dòng)畫時(shí)間改為0，而是采用了css3動(dòng)畫的一個(gè)屬性。CSS3 動(dòng)畫教程

animation-play-state: paused|running;

簡(jiǎn)而言之就是先用這個(gè)屬性把動(dòng)畫暫停，修改轉(zhuǎn)速，然后再讓它跑起來。這一切都得再js里進(jìn)行。
1.需要在標(biāo)簽的內(nèi)聯(lián)樣式里加上這個(gè)屬性，在Page.data里再定義一個(gè)屬性控制開始暫停。

<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)速的方法。暫停>(修改>跑起來)，效果上稍微有些延遲。

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

3.來上效果圖了。

效果圖

可能動(dòng)圖上感覺不出來，不過你們可以去真機(jī)試一下，就可以展現(xiàn)出來了。

本次分享結(jié)束(@LcFireRabbit)