注冊登錄

微信小程序開發(fā)動畫以圓點沿著圓圈運動為案例

2017-12-05
導讀:2017年6月14日,微信小程序開發(fā)動畫已經(jīng)是當下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦蜷_發(fā)動畫以圓點沿著圓圈運動為案例相關(guān)的內(nèi)容。...

微信小程序開發(fā)動畫已經(jīng)是當下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦蜷_發(fā)動畫以圓點沿著圓圈運動為案例相關(guān)的內(nèi)容。

滴滴作為第一批的小程序開發(fā)者,大量地用到了動畫,積累了一些經(jīng)驗,由于市面上的小程序動畫案例很少,我們就分享一部分滴滴做過的案例:

首先用 wx.createAnimation(OBJECT) 創(chuàng)建一個動畫實例,OBJECT 里的參數(shù)是設(shè)置動畫 duration、timingFunction、delay、transformOrigin;然后通過 export 方法將動畫實例輸出并 setData 給組件 data{} 里的 animation 屬性。

在開始說下面的小動畫之前需要注意以下幾點:

1、小程序官方動畫 API 文檔的最下面的 bug&tip :

bug: IOS/Android 6.3.30 通過step()分隔動畫,只有第一步動畫能生效。

2、在小程序動畫文檔里的 wx.creatAnimation(OBJECT) 這個方法提供的參數(shù)沒有類似 css3 animation-iteration-count 這樣的參數(shù)。

接來就說說下面的小動畫案例:

微信小程序開發(fā)動畫以圓點沿著圓圈運動為案例

如上圖我們要實現(xiàn)小圓點沿著圓圈軌跡運動的小動畫。

WXML:

兩個 view 標簽,一個是路徑圓圈,圓圈可以用背景圖來做也可以用 border-radius 來實現(xià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 這個參數(shù)所設(shè)置的是小圓點旋轉(zhuǎn)時的原點,默認是元素中心,下面設(shè)置的就是路徑圓圈的中心,具體參數(shù)需要根據(jù)路徑圓圈不來算。

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() 解決了文章開頭的兩項注意事項。

那么為什么不執(zhí)行 rotate(360) 或者 rotate(180) ?

這就要注意官方文檔的 rotate(deg) 的 deg 的取值范圍 -180 ~ 180,從原點順時針旋轉(zhuǎn)一個 deg。還有就是 rotate animation 在運動角度幅度較大的情況下軌跡會有偏離,就是說在正常設(shè)置的 transformOrigin 的情況下圓點運動軌跡會有偏離。

所以上面的小動畫案例就是把它拆分,定義 deg 為 6 作基本增加量, ++i 累加,這樣在正常的 transformOrigin 下整個動畫就是由每個小動畫 rotate(6) 組成的。

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

 


重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預約演示 0元開店