微信小程序開發(fā)動(dòng)畫以圓點(diǎn)沿著圓圈運(yùn)動(dòng)為案例
微信小程序開發(fā)動(dòng)畫已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來(lái)談?wù)勎⑿判〕绦蜷_發(fā)動(dòng)畫以圓點(diǎn)沿著圓圈運(yùn)動(dòng)為案例相關(guān)的內(nèi)容。
滴滴作為第一批的小程序開發(fā)者,大量地用到了動(dòng)畫,積累了一些經(jīng)驗(yàn),由于市面上的小程序動(dòng)畫案例很少,我們就分享一部分滴滴做過(guò)的案例:
首先用 wx.createAnimation(OBJECT) 創(chuàng)建一個(gè)動(dòng)畫實(shí)例,OBJECT 里的參數(shù)是設(shè)置動(dòng)畫 duration、timingFunction、delay、transformOrigin;然后通過(guò) export 方法將動(dòng)畫實(shí)例輸出并 setData 給組件 data{} 里的 animation 屬性。
在開始說(shuō)下面的小動(dòng)畫之前需要注意以下幾點(diǎn):
1、小程序官方動(dòng)畫 API 文檔的最下面的 bug&tip :
bug: IOS/Android 6.3.30 通過(guò)step()分隔動(dòng)畫,只有第一步動(dòng)畫能生效。
2、在小程序動(dòng)畫文檔里的 wx.creatAnimation(OBJECT) 這個(gè)方法提供的參數(shù)沒(méi)有類似 css3 animation-iteration-count 這樣的參數(shù)。
接來(lái)就說(shuō)說(shuō)下面的小動(dòng)畫案例:
如上圖我們要實(shí)現(xiàn)小圓點(diǎn)沿著圓圈軌跡運(yùn)動(dòng)的小動(dòng)畫。
WXML:
兩個(gè) view 標(biāo)簽,一個(gè)是路徑圓圈,圓圈可以用背景圖來(lái)做也可以用 border-radius 來(lái)實(shí)現(xiàn);一個(gè)是圓點(diǎn)。
<view class='animation-box'>
<view class = 'time-crl-path'></view>
<view class = 'crl-dot' animation='{{dotAnData}}'></view>
</view>
WXSS:
基本設(shè)置定位,這里只放寬高。
.animation-box{
width: 176px;
height:176px;
}
.time-crl-path {
width: 176px;
height: 176px;
......
}
.crl-dot {
width: 9px;
height:9px;
......
}
. JS:
transformOrigin 這個(gè)參數(shù)所設(shè)置的是小圓點(diǎn)旋轉(zhuǎn)時(shí)的原點(diǎn),默認(rèn)是元素中心,下面設(shè)置的就是路徑圓圈的中心,具體參數(shù)需要根據(jù)路徑圓圈不來(lái)算。
Page({
data: {
dotAnData: {}
},
onShow: function(){
var i = 0
var dotAnData =wx.createAnimation({
duration: 1000,
transformOrigin: '4px 91px'
})
dotAnFun =setInterval(function() {
dotAnData.rotate(6 * (++i)).step()
that.setData({
dotAnData: dotAnData.export()
})
}.bind(that), 1000)
}
})
從上面的代碼可以看出是使用 setInterval() 解決了文章開頭的兩項(xiàng)注意事項(xiàng)。
那么為什么不執(zhí)行 rotate(360) 或者 rotate(180) ?
這就要注意官方文檔的 rotate(deg) 的 deg 的取值范圍 -180 ~ 180,從原點(diǎn)順時(shí)針旋轉(zhuǎn)一個(gè) deg。還有就是 rotate animation 在運(yùn)動(dòng)角度幅度較大的情況下軌跡會(huì)有偏離,就是說(shuō)在正常設(shè)置的 transformOrigin 的情況下圓點(diǎn)運(yùn)動(dòng)軌跡會(huì)有偏離。
所以上面的小動(dòng)畫案例就是把它拆分,定義 deg 為 6 作基本增加量, ++i 累加,這樣在正常的 transformOrigin 下整個(gè)動(dòng)畫就是由每個(gè)小動(dòng)畫 rotate(6) 組成的。
目前小程序動(dòng)畫對(duì)于動(dòng)畫效果還是有限制的,不過(guò)簡(jiǎn)單的動(dòng)畫效果是沒(méi)問(wèn)題的啦~
-
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單,只需要五步就可以完成,整個(gè)過(guò)程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分:如何開通一個(gè)小商店