Path 和 Property Animation 配合讓線條動起來

之前做過一個圖上標簽但是動畫樣式不太好看,經過查找資料發現了一種全新的思路來實現動畫,流暢的讓標簽的線顯示和隱藏,示例如下,就在這里說一說。本文會涉及到Path,Property Animation, PathEffect, PathMeasure。我們開始一一道來。

使用Path繪制曲線

當我們需要畫曲線的時候,可能會直接使用drawLine來畫,不太復雜的話還比較好實現,如果需要畫曲線,或者拐彎的線的時候使用drawLine就比較復雜了。這時候,我們可以借助 Path 來drawPath。

Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE); //一定要設置為畫線條
Path path = new Path();
path.moveTo(100, 100);   //定位path的起點
path.lineTo(100, 200);
path.lineTo(200, 150);
path.close();
canvas.drawPath(path, paint);

通過以上的方法代碼我們就可以畫出三角形了。

測量Path的長度

實現動畫的前提是首先得到Path的長度,然后根據長度計算出每個時間節點應該顯示的長度。因為系統給我們提供了測量長度的方法,就不需要我們去進行復雜的計算了。直接使用 PathMeasure 就可以了。

PathMeasure measure = new PathMeasure(path, false);
float length = measure.getLength();

只繪制Path的一部分

為了讓Path能夠逐步顯示出來,或者逐步隱藏。我們需要做到能夠顯示path的一部分,并且改變顯示的長度。我們知道可以通過 DashPathEffect 來顯示虛線效果。同時我們可以借助DashPathEffect讓我們的實線和虛線的部分的長度分別為我們的Path的長度,然后來改變偏移量,實現只顯示path的一部分。

PathEffect effect = new DashPathEffect(new float[]{pathLength, pathLength}, pathLength/2);
paint.setPathEllect(effect);
canvas.drawPath(path, paint)

讓Path動起來

通過上面說的,我們改變PathEffect的偏移量就可以改變path顯示的長度,因此我們可以給我們的View或者對象定義個屬性,通過Property Animation來改變這個屬性的值,即可實現動畫。

PathEffect 屬性值變化

float percentage = 0.0f;
PathEffect effect = new DashPathEffect(new float[]{pathLength, pathLength}, pathLength - pathLength*percentage);

動畫定義:

Animator animatorLine = ObjectAnimator.ofFloat(view, “percentage”, 0.0f, 1.0f);

其他

就這樣就實現了。思路甚至代碼都是參考一篇國外的博客。思路很重要,一年前做這個動畫的時候百思不得姐,花了好多時間,后面實現的效果還是比較僵硬。這次發現了其他人的思路之后,很容易就解決了。

思路很重要,以及要了解更加全面的知識 ,不然很多東西都不知道,自己的思路還是會被限制。

最后就是多google,百毒上除了廣告,別的東西都挺難找到的。

沒有Demo了,可以參考我參考的那個github的庫吧。同時作者已經實現svg的動畫顯示了,原理相同,只是把svg加載為path,使用同樣的動畫。代碼: https://github.com/matthewrkula/AnimatedPathView

 

來自:http://blog.isming.me/2016/06/07/path-property-animation/

 

 本文由用戶 lonmgiwt 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!