微信小程式開發：動畫案例之圓點沿著圓圈運動
滴滴作為第一批的微信小程式開發者，大量地用到了動畫，積累了一些經驗，由於市面上的小程式動畫案例很少，我們就分享一部分滴滴做過的案例：
首先用 wx.createAnimation(OBJECT) 建立一個動畫例項，OBJECT 裡的引數是設定動畫 duration、timingFunction、delay、transformOrigin;然後通過 export 方法將動畫例項輸出並 setData 給元件 data{} 裡的 animation 屬性。
在開始說下面的小動畫之前需要注意以下幾點：
1、微信小程式官方動畫 API 文件的最下面的 bug&tip ：
bug: IOS/Android 6.3.30 通過step()分隔動畫，只有第一步動畫能生效。
2、在小程式動畫文件裡的 wx.creatAnimation(OBJECT) 這個方法提供的引數沒有類似 css3 animation-iteration-count 這樣的引數。
接來就說說下面的小動畫案例：
如上圖我們要實現小圓點沿著圓圈軌跡運動的小動畫。
WXML:
兩個 view 標籤，一個是路徑圓圈，圓圈可以用背景圖來做也可以用 border-radius 來實現;一個是圓點。
<view class='animation-box'>
<view class = 'time-crl-path'></view>
<view class = 'crl-dot' animation='{{dotAnData}}'></view>
</view>
WXSS:
基本設定定位，這裡只放寬高。
.animation-box{
width: 176px;
height:176px;
}
.time-crl-path {
width: 176px;
height: 176px;
......
}
.crl-dot {
width: 9px;
height:9px;
......
}
. JS:
transformOrigin 這個引數所設定的是小圓點旋轉時的原點，預設是元素中心，下面設定的就是路徑圓圈的中心，具體引數需要根據路徑圓圈不來算。
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() 解決了文章開頭的兩項注意事項。
那麼為什麼不執行 rotate(360) 或者 rotate(180) ?
這就要注意官方文件的 rotate(deg) 的 deg 的取值範圍 -180 ~ 180，從原點順時針旋轉一個 deg。還有就是 rotate animation 在運動角度幅度較大的情況下軌跡會有偏離，就是說在正常設定的 transformOrigin 的情況下圓點運動軌跡會有偏離。
所以上面的小動畫案例就是把它拆分，定義 deg 為 6 作基本增加量， ++i 累加，這樣在正常的 transformOrigin 下整個動畫就是由每個小動畫 rotate(6) 組成的。
目前微信小程式動畫對於動畫效果還是有限制的，不過簡單的動畫效果是沒問題的啦~