[技術分享] 手把手教你繪制Android粘性果凍動畫組件

 作者:新投云  發布于:2017-07-05  瀏覽數:

        從事移動互聯網開發已經快兩年了,回想當初是Android帶我走進了移動端的世界,后來由于自身對用戶體驗比較感興趣,發現iOS更注重對圖形渲染以及動畫處理,所以轉身自學iOS開發,之后也發布了幾個iOS的組件庫。但是Android進兩年發展趨勢猛增,在動畫處理上也比以前有所改進,Android3.0之后開啟了GPU硬件加速讓圖形渲染沒以前那么卡頓,特別是5.0之后的material design更是引領潮流。所以趁最近工作不忙有時間,寫了個彈性動畫的ActionMenu,核心原理來自咱們iOS界有動畫小王子之稱的kittenyang的這篇博客(特此鳴謝),廢話不多說了,先上效果圖(gif存在失真,實際效果更佳流暢Q彈)

SpringActionMenu效果圖

1.核心原理

        主要知識點其實就下面三項

        * Android自定義View以及ViewGroup

        * 利用三階貝塞爾曲線繪制圖形

        * 通過ValueAnimator結合阻尼振動自定義屬性變化

2.各項講解

(1)Android自定義View以及ViewGroup

        首先我們先做出一個圓形的彈性動畫效果,先得自定義一個view,然后重寫onDraw可以用過path和paint任意繪制圖形,具體細節我就不多說了,不了解的同學可以查閱相關資料學習。

(2)利用三階貝塞爾曲線繪制圖形

        貝塞爾曲線是我認為一個比較神奇的東西,因為他基本上可以繪制出任何圖形,有興趣的同學可以到這個網站玩一下,那么我們今天需要做的就是用三階貝塞爾曲線畫圓

三階貝塞爾曲線畫圓

圖中以A,B,C,D四個點作為基準點,把一個圓分4次繪制,以c1-c8作為四次繪制中三階貝塞爾曲線的輔助點,各點的位置我們設為offSet,由前輩們計算,當offSet為(圓形直徑/3.6)時剛好是一個整圓,后來找到一篇文章介紹了其原理(雖然我看完之后還是一臉懵逼)。我們設置形變系數為factor(0~1),設定圓形拉伸的最大程度為圓形的2/5, 則extra= circleRadius*2*factor/5,分別列出各點坐標

intxA =0,xB =0,xC =0,xD =0,yA =0,yB =0,yC =0,yD =0;

xA =circleRadius;

xB =circleRadius*2+extra;

xC =circleRadius;

xD =0;

yA =extra;

yB =circleRadius;

yC =circleRadius*2-extra;

yD =circleRadius;

offSet=circleRadius*2/3.6f;

mPath.moveTo(xA,yA);

mPath.cubicTo(xA +offSet,yA,xB,yB  -offSet,xB,yB);

mPath.cubicTo(xB,yB +offSet,xC +offSet,yC,xC,yC);

mPath.cubicTo(xC -offSet,yC,xD,yD  +offSet,xD,yD);

mPath.cubicTo(xD,yD -offSet,xA -offSet,yA,xA,yA);

OK!基本點都繪制完了,直接Run起來

 

繪制圓形

看到一個紅通通的圓形繪制成功之后第一部大功告成!

(3)通過ValueAnimator結合阻尼振動自定義屬性變化

        上面我們已經繪制好了一個圓形,接下來事情就很簡單了,只需要通過改變形變系數factor(0~1)的值來改變形變程度就可以了,下面介紹一個Android的動畫API—ValueAnimator,直接通過組件屬性定義的動畫效果,然后重寫變化機制

ValueAnimator valueAnimator = ValueAnimator.ofObject(new FloatEvaluator(time,1,0),1,0);

valueAnimator.addUpdateListener(this);

valueAnimator.setDuration(time);

valueAnimator.start();

@Override

public voidonAnimationUpdate(ValueAnimator animation) {

      factor= (float)animation.getAnimatedValue();

      invalidate();

}

由此原理就是通過屬性動畫不斷的改變factor從1到0,然后刷新重繪小圓球,FloatEvaluator就是我們自定義的根據什么樣的函數去改變factor,這個時候就要介紹到我們高中學習的阻尼振動函數了

阻尼振動

阻尼振動

 

阻尼振動

阻尼振動

該函數可以模擬最真實的彈性效果

阻尼振動函數

我們60幀為基準(肉眼看到刷新流暢度的最低標準),計算出一列變化factor的值

publicFloatEvaluator(longtime, floatstartValue, floatendValue) {

        sum= (int)time *60/1000;

        float diff = endValue - startValue;

        value=new float[sum];

        float x;

        for(int i = 0; i < sum; i++) {

        x = i *1.0f/sum;

        value[i] = endValue - (float)(diff * Math.pow(Math.E,-1*dampingFactor* x) * Math.cos(velocityFactor* x));

        }

}

其中dampingFactor和velocityFactor為阻力和速度,我這里設置的是5和30,可以自定義調節改變彈性程度。

基本構建完成,添加一個按鈕啟動動畫試試效果

 

彈性動畫效果圖

彈性動畫效果圖

大功告成!

3.總結

        大家掌握了一個圓形組件的形變原理之后剩下的就容易多了,利用ViewGroup多繪制幾個擺擺位置就OK了,也可以利用這種原理自己創新構思出別的控件,只要掌握了核心的兩點:

        1.貝塞爾曲線繪制圖形

        2.利用阻尼函數以及ValueAnimator自定義形變屬性的值

        最后貼上源碼地址,有興趣的同學歡迎star,共同學習探討動畫知識!

相關文章

三期必中一期平特肖