android 屬性動(dòng)畫——貝塞爾曲線

有段時(shí)間沒寫了,最近也有點(diǎn)忙,前段時(shí)間看見個(gè)有意思的動(dòng)畫,在這里自己學(xué)習(xí)一下,作為記錄,原項(xiàng)目地址

https://github.com/saulmm/Curved-Fab-Reveal-Example

好了現(xiàn)在開始搞起

先看效果圖


沒有見過貝塞爾曲線的小伙伴肯定懵逼了,怎么實(shí)現(xiàn)呢,其實(shí)這個(gè)動(dòng)畫效果就是貝塞爾曲線實(shí)現(xiàn)的,不知道的可以去問下度娘。

直接看代碼:


activity沒什么好看的,主要內(nèi)容在fragment里,按鈕點(diǎn)擊事件執(zhí)行方法:


可以看出,用到了ObjectAnimator屬性動(dòng)畫,看一下ofObject()參數(shù)


target:傳入需要進(jìn)行屬性動(dòng)畫的對象;

propertyName:動(dòng)畫的屬性名稱;

TypeEvaluator:將在每個(gè)動(dòng)畫幀上調(diào)用,以在Object值之間提供必要的插值(第四個(gè)參數(shù))以導(dǎo)出動(dòng)畫值。就是通過貝塞爾曲線公式算出當(dāng)前進(jìn)度點(diǎn)所在的位置。

values:動(dòng)畫隨時(shí)間變化的一組值。就是路徑集合

這時(shí)候再看“fabLoc”這個(gè)有什么用,你會(huì)發(fā)現(xiàn)代碼里有個(gè)這樣方法:

打了日志,你就會(huì)發(fā)現(xiàn)在動(dòng)畫執(zhí)行時(shí)將會(huì)不斷調(diào)用這個(gè)方法,這個(gè)基于ObjectAnimation的實(shí)現(xiàn)原理定義:定義setFabLoc函數(shù)。參數(shù)為路徑信息對象,來設(shè)置動(dòng)畫的對象的位置。

我們再看new PathEvaluator();

這里就是通過貝塞爾曲線公式計(jì)算當(dāng)前進(jìn)度所在的坐標(biāo)點(diǎn),然后通過反射調(diào)用setFabLoc時(shí)函數(shù)的傳參

繼續(xù)看path.getPoints().toArray();這個(gè)就是一個(gè)添加點(diǎn)坐標(biāo)的集合

PathPoint類包含了重置起點(diǎn)的路徑,三階貝塞爾移動(dòng)路徑,直線移動(dòng)的路徑;


繼續(xù)設(shè)置動(dòng)畫屬性anim.setInterpolator(newAccelerateInterpolator());是漸變加速度還是直接加速度等等,這里設(shè)置默認(rèn);

然后設(shè)置動(dòng)畫時(shí)長,就可以start了;

好了到這里,整個(gè)貝塞爾曲線動(dòng)畫已經(jīng)結(jié)束,

至于變大,漸變可以看一下


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,008評論 25 709
  • 又是一年畢業(yè)季,今年終于輪到我了,最近一邊忙著公司的項(xiàng)目,一邊趕著畢設(shè)和論文,還私下和朋友搞了些小外包,然后還要抽...
    李晨瑋閱讀 7,488評論 5 65
  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,880評論 2 32
  • 黑板筆墨臺(tái)三尺, 前路漫漫字指引 授知識, 把蒙啟。 古來今往敬作揖, 芬芳天下滿桃李。
    林柳楓閱讀 270評論 0 0
  • 第一幅圖是比著第三幅圖畫的,女兒要公主 畫人物真的好難 今天簡筆畫已經(jīng)過半了時(shí)間,雖然要求每2天打卡一次,一個(gè)月不...
    谷月溪Amanda閱讀 408評論 0 0

友情鏈接更多精彩內(nèi)容