|
先上效果圖
最上面那一行就是個簡單的換顏色效果，極其簡答就不多說了，直接上代碼。
-
<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
})
}
|
那么下面咱們說一說這個旋轉(zhuǎn)的動畫。小程序里呢，有自己的動畫api，但是用起來感覺極其麻煩，而且容易產(chǎn)生倒轉(zhuǎn)，對設(shè)備的性能消耗也多，動畫多了以后就會極其卡頓，所以還是css3的動畫比較好。 首先來寫這個css3動畫 css3旋轉(zhuǎn)動畫
-
<view class='animationSlow'></view>
.animationSlow {
width: 100rpx;
height: 100rpx;
background-color: orange;
animation-name: myfirst; /*動畫的名稱 */
animation-duration: 2000ms; /*動畫從開始到結(jié)束的時間*/
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 {
/*開始轉(zhuǎn)的角度*/
from {
transform: rotate(0deg);
}/*結(jié)束的角度*/
to {
transform: rotate(360deg);
}
}
/*兼容ios*/
@-webkit-keyframes myfirst {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
|
效果圖
如果只是一個一次性的動畫效果，現(xiàn)在這些代碼就OK了。 如果想要實(shí)時可以改變旋轉(zhuǎn)的轉(zhuǎn)速，我們還得再加點(diǎn)東西。
實(shí)現(xiàn)可以實(shí)時修改轉(zhuǎn)速 微信小程序里涉及到實(shí)時數(shù)據(jù)就避免不了Page.data這個東西。 1.我們需要將控制動畫時間的css屬性放到內(nèi)聯(lián)樣式中去
-
<view class='animationSlow' style='animation-duration: 2000ms;-webkit-animation-duration: 2000ms;'></view>
2.在頁面對應(yīng)的js中，設(shè)置掌控時間的Page.data屬性，將wxml里內(nèi)聯(lián)屬性的時間改為Page.data的屬性。
-
<view class='animationSlow'></view>
.animationSlow {
width: 100rpx;
height: 100rpx;
background-color: orange;
animation-name: myfirst; /*動畫的名稱 */
animation-duration: 2000ms; /*動畫從開始到結(jié)束的時間*/
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 {
/*開始轉(zhuǎn)的角度*/
from {
transform: rotate(0deg);
}/*結(jié)束的角度*/
to {
transform: rotate(360deg);
}
}
/*兼容ios*/
@-webkit-keyframes myfirst {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
|
3.接下來我們寫幾個按鈕，綁定上修改這個時間的方法，進(jìn)而來改變轉(zhuǎn)速。這一步都是基本代碼，我就不貼代碼了。放個效果圖吧。
效果圖
那么接下來重點(diǎn)來了：其實(shí)這里有個bug，這個效果呢在安卓機(jī)上是一點(diǎn)點(diǎn)問題都沒有的。但是在蘋果機(jī)上，動畫一旦開始，再通過這個方法去修改轉(zhuǎn)速，就不能生效了。
解決IOS系統(tǒng)的BUG 上面說了，IOS系統(tǒng)上呢，動畫一旦開始，這個方法就不能用了。那么咱是不是可以先把這個動畫停下來，然后再改轉(zhuǎn)速呢？這個辦法可不可以呢？答案是肯定的，但是不是去把動畫時間改為0，而是采用了css3動畫的一個屬性。CSS3 動畫教程
-
animation-play-state: paused|running;
簡而言之就是先用這個屬性把動畫暫停，修改轉(zhuǎn)速，然后再讓它跑起來。這一切都得再js里進(jìn)行。 1.需要在標(biāo)簽的內(nèi)聯(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.然后我們?nèi)バ薷母淖冝D(zhuǎn)速的方法。暫停>(修改>跑起來)，效果上稍微有些延遲。
-
changeTime:function(e){
this.setData({
status: 'paused'
})
this.setData({
timeAnimation: e.currentTarget.dataset.time,
status: 'running'
})
},
|
3.來上效果圖了。
效果圖
可能動圖上感覺不出來，不過你們可以去真機(jī)試一下，就可以展現(xiàn)出來了。
|
