[微信小程序系列] 動畫案例之圓點沿着圓圈運動

做者：滴滴公共前端團隊 - Tawnia

滴滴做爲第一批的小程序開發者，咱們也大量地用到了動畫，積累了一些經驗，因爲市面上的小程序動畫案例不多，咱們也分享一部分咱們作過的案例：

首先用 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) 組成的。

目前小程序動畫對於動畫效果仍是有限制的，不過簡單的動畫效果是沒問題的啦~

---

歡迎關注DDFE
GITHUB：github.com/DDFE
微信公衆號：微信搜索公衆號「DDFE」或掃描下面的二維碼