自定義View 波浪動效

2021-09-11 21:28:15 字數 2803 閱讀 3344

最近開始學習自定義view,看到現在公司專案上的乙個動畫效果,頓時想到其實可以自己畫,於是就開始著手優(zhuang)化(bi)這個動畫。

動畫如下:

其實很簡單對不對,但初學者的我還是要思考一下。

動畫有兩部分,

根據ui提供的詳細動畫細節,可以知道:

public

float maxheight;

public

float threeheight;

public

float halfheight;

public

float oneheight;

複製**

其中還有一種拉伸量為0。maxheight是最大的高度,threeheight為次最高高度。

列出幾個關鍵幀(約定,從左到右將元素命名為元素1、元素2、元素3、元素4、元素5)

... 通過觀察,我...先定義乙個類,來儲存這些點的四種拉伸量的高度(我們也稱之為狀態)和中心位置的座標:

public

class

voiceanimpoint

}複製**

然後在onsizechanged中初始化這五個點:

@override

protected

void

onsizechanged

(int w, int h, int oldw, int oldh)

複製**

對於元素1,我們看到有這樣的乙個變化過程:

那麼我們可以構造這樣的乙個函式:

x暫時可以看成是第幾幀,x=0,第1幀時候,y=0,代表原始狀態,x=1,第2幀的時候,y=1,代表元素1 高7.3px 對應 oneheight,y=2,代表元素1 高11px 對應 halfheight,y=3,代表元素1 高11px 對應 threeheight,y=4,代表元素1 高16px 對應 maxheight,,,

那麼其他的元素呢,我們把他們的變化過程放在一起:

發現,每乙個元素的變化都是一樣的,只不過是x軸的位移,而相鄰的元素的x相差2,也就是假如 元素1在 oneheight,x=8 狀態的時候,對應的 相鄰元素2 就是元素1在x-2=6的時候的狀態,也就是 元素2的 threeheight 狀態,而,元素2相鄰的元素3就是在元素1的x-2-2=4的時候的狀態,為 元素3的 threeheight,,,如此類推。所以我們只用元素1當前的位置和上面的函式圖,就可以推斷出其他元素的情況。

那麼ondraw中可以這樣來:pointindex 代表著元素1繪製的第 n 幀,然後依次按照如上所分析的去得到其他元素的對應幀。

@override

protected

void

ondraw

(canvas canvas)

}}複製**

其中的0-4狀態就是上面的函式的y值,通過x得到相應的y,而y則對應則元素的5中狀態,ondraw中就是根據5中狀態去繪製相應的高度:

/**

* 動畫軌跡其實符合乙個函式

* 這裡傳入對應的x,返回函式的y

* @param x 位置

* @return y 4 : 最大, 3:threeheight, 2: 一半, 1:oneheight, 0 :0 。

*/private

intindexchangefunc

(int x)

複製**

paint = new paint();

paint.setantialias(true);

paint.setcolor(0xffc2e379);

paint.setstyle(paint.style.fill);

paint.setstrokewidth(pointwidth);

paint.setstrokecap(paint.cap.round);

複製**

注意的一點,假如你的paint寬10px,而同時你又設定了線帽為圓形,畫了20px的line,那其實你畫的如下:

所以才有上面的ondraw中的,高度要減去線帽:

canvas.drawline(point.centerx,point.centery-point.maxheight/2+pointwidth/2,point.centerx,point.centery+point.maxheight/2-pointwidth/2,paint);

複製**

@override

protected

void

ondraw

(canvas canvas)

}if (!isrevert)

else

if (pointindex == 23)

else

if (pointindex == -6)

}複製**

private runnable r = new runnable() 

};public

void

startanim()}

public

void

stopanim()}

複製**

載入動畫後,大概用了1m多,每一論的波浪,都吃15%cpu。

用了自定義動畫後:

載入動畫後,大概用了不到1m,每一論的波浪,都吃不到5%cpu。

Android自定義View 自定義元件

自繪控制項也分兩種,自定義元件和自定義容器,自定義元件是繼承view類,自定義容器時繼承viewgrounp 今天主要分析下自定義元件 還是舉個例子來的實際些,假如我們要畫乙個最簡單的textview,首先想到的就是canvas.drawtext 方法,怎麼畫了?還是得一步一步來 1 寫乙個myte...

自定義view之自定義屬性

1.首先在res的values檔案下新建乙個名為attrs.xml檔案 在該xml檔案中編寫我們需要的屬性 declare styleable後面的name必須要與接下來要自定義的view名一致。attr 後面的name表示需要自定義的屬性,format表示這些屬性的型別 2.新建乙個類繼承text...

自定義view 二

自定義view的最重要的乙個部分是自定義它的外觀。根據你的程式的需求,通過ondraw方法實現繪製。在ondraw中,會傳遞給你乙個canvas。canvas封裝了繪製圖形的方法。還需要自定義乙個 paint去定義顏色樣式的填充 簡單來說 canvas定義你在螢幕上畫的圖形,而paint定義顏色,樣...