每週乙個小輪子之仿京東載入動畫

我做出來的是這樣的：（修改前）

（微調後：）

中間的狗我不會畫，所以我就畫了個勾。

我把速度動畫速度設定的很慢，這樣的話方便觀察和學習。

其實看到jd的載入動畫，第一反應就是想到了路徑動畫

我之前寫過關於路徑動畫的用法：android自定義控制項開發入門與實戰（6）路徑動畫

因為這個載入動畫的路徑都像是已經設好了，只要朝著指定方向繪製就行了。

難點主要在畫狗（他們用到了貝塞爾曲線，而我沒有座標，設計不出來），其他的話，其實還真沒什麼值得注意的地方。

所以這一篇就當做是對路徑動畫做乙個複習吧= =。

從gif圖，我們可以看出動畫順序為：

兩個小圓向左向右移動，移動到畫布的邊界時消失

小圓消失時產生兩個大圓，分別位於左上和右下，並且畫布中間開始畫狗

兩個大圓開始順時針轉圈，狗的進度和大圓一樣

在狗快要畫完時，畫布逐漸透明到消失

從上看出，我們需要：

一開始做小圓的移動動畫

小圓移動完的一瞬間做大圓的轉圈動畫

做畫勾動畫

在畫勾進度快結束時，做透明度動畫

我們需要繪製勾的路徑、大圓的路徑，並用pathmeasure和路徑進行聯絡。

我們需要在onsizechanged()或者畫布測量完的地方開始做

//初始化座標引數 @override protected void onsizechanged (int w, int h, int oldw, int oldh)

上面在畫圓的時候我用的是path.addarc而不是path.addcircle，原因是addcircle的起點一定是x軸正方向，很顯然，我們要的兩個圓他們的起始位置都不同，所以不能讓起點統一，而 addarc正好可以定義圓的起點。

我們用valueanimator就能夠計算出小圓移動、大圓轉圈（和畫勾同乙個進度）、透明度變化的動畫進度了

在小圓結束的時候，開始大圓轉圈和畫勾的動畫，在畫勾快要結束時，開始透明度度的動畫

//兩個小圓分開的動畫
private valueanimator getsmallanimation()
}); animatorsmallcircle.
addlistener
(new
animatorlisteneradapter()
}); animatorsmallcircle.
setduration
(700);
animatorsmallcircle.
setinterpolator
(new
accelerateinterpolator()
);}return animatorsmallcircle;
}//打勾動畫和大圓轉圈的動畫是同時進行的，所以公用乙個動畫
public valueanimator getgouandbigcircleanimation()
}invalidate()
;}})
; animatorgouandbigcircle.
setduration
(1000);
animatorgouandbigcircle.
setinterpolator
(new
linearinterpolator()
);}return animatorgouandbigcircle;
}//透明度動畫
public valueanimator getanimatoralpha()
}); animatoralpha.
setduration
(1000);
animatoralpha.
setinterpolator
(new
accelerateinterpolator()
);}return animatoralpha;
}

我們需要根據動畫計算出的進度，來繪製這些路徑：

//就是開始各種動畫
@override
protected
void
ondraw
(canvas canvas)
//打勾動畫,大圓轉圈的動畫，大圓是畫布周長的長度是1/4
if(bigprogress <=
1f&& bigprogress >=0)
//透明度動畫
if(alphaprogress >=
0f&& alphaprogress <=1f)
//繪製路徑
canvas.
drawpath
(dstgoupath, goupaint)
; canvas.
drawpath
(dstbigpath1, bigpaint1)
; canvas.
drawpath
(dstbigpath2, bigpaint2)
;}

到這裡，乙個簡單的載入動畫就做完啦

路徑動畫不難，而且實用性特別高，效果很棒，我一開始以為jd的載入動畫很炫酷所以會很複雜，但是用這個做法，其實把動畫思路理清楚了，還是蠻簡單的

path的addcircle和addarc有區別，addarc相比於addcircle更適合路徑動畫，因為它可以定義圓的起點我這裡沒有用到貝塞爾曲線，因為我沒有考慮到繪圖座標，以後會想辦法去用一下。

因為那片灰色的畫布一開始是沒有的，所以我把他抽成乙個圓出來，在做透明動畫時，將這個圓也搞消失。

canvas.
drawcircle
(originx,originy,canvasradius,canvaspaint);.
..//透明度動畫
if(alphaprogress >=
0f&& alphaprogress <=1f)

每週乙個小輪子之仿京東載入動畫

每週乙個 Python 模組 string

每週乙個 Python 模組 fnmatch

Flutter每週乙個Widget系列

每週乙個小輪子之 仿京東載入動畫

每週乙個 Python 模組 string

每週乙個 Python 模組 fnmatch

Flutter每週乙個Widget系列

相關推薦

每週乙個小輪子之仿京東載入動畫