有段時(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)畫的對(duì)象塞颁;
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ù)為路徑信息對(duì)象沸伏,來設(shè)置動(dòng)畫的對(duì)象的位置。
我們?cè)倏磏ew 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é)束,
至于變大渺绒,漸變可以看一下