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/