屬性動(dòng)畫(huà)實(shí)現(xiàn)Loading動(dòng)畫(huà)，實(shí)現(xiàn)效果如下：
（不知為啥這個(gè)gif 錄制出來(lái)看著有點(diǎn)詭異招驴，但是不影響分析）
動(dòng)畫(huà)的實(shí)現(xiàn)難就難在分析的過(guò)程，如何將 復(fù)雜的動(dòng)畫(huà) 拆分成獨(dú)立的小動(dòng)畫(huà)枷畏，然后結(jié)合繪制實(shí)現(xiàn)界面效果别厘，接下來(lái)我對(duì)這個(gè)動(dòng)畫(huà)進(jìn)行拆分分析。
動(dòng)畫(huà)分析
分析上面的gif 拥诡，可以把動(dòng)畫(huà)的執(zhí)行過(guò)程分為三部分：
- 小圓旋轉(zhuǎn)動(dòng)畫(huà) （底色為白色）
- 小圓張開(kāi)然后收縮動(dòng)畫(huà) （底色為白色）
- 中心的圓形擴(kuò)散動(dòng)畫(huà) （無(wú)底色）
每個(gè)狀態(tài)需要繪制不同的界面触趴，開(kāi)啟不同的動(dòng)畫(huà)，如果所有邏輯判斷渴肉、繪制全部放在 onDraw 方法中冗懦，代碼將非常不利于維護(hù)，這里可以采用 策略模式仇祭，將具體的繪制和動(dòng)畫(huà)拆分封裝到對(duì)應(yīng)的狀態(tài)中去披蕉。所以有了下面抽象類(lèi)的抽取
/**
* 策略模式 視圖的狀態(tài)
* 將繪制的動(dòng)作 交由 子類(lèi)去完成
*/
private abstract class LoadingState {
public abstract void drawState(Canvas canvas);
public void cancle() {
if (mAnimator != null) {
mAnimator.cancel();
}
}
}
同時(shí) onDraw 方法就可以精簡(jiǎn)如下
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mState == null) {
//初始狀態(tài)是旋轉(zhuǎn) 狀態(tài)
mState = new RotateState();
}
//將繪制的操作 交給 對(duì)應(yīng)的狀態(tài)
mState.drawState(canvas);
}
三個(gè)狀態(tài)的具體分析：
旋轉(zhuǎn)動(dòng)畫(huà)
1??繪制6個(gè) 小圓
canvas 繪制圓形的api為:
public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
super.drawCircle(cx, cy, radius, paint);
}
我們需要繪制6個(gè)小圓，需要分別確定 6個(gè)圓心坐標(biāo)乌奇，進(jìn)行繪制
分析圖中坐標(biāo)系可得：
圓心x坐標(biāo) = 畫(huà)布x軸中心坐標(biāo) + 半徑* cos（角度）
圓心y坐標(biāo) = 畫(huà)布y軸中心坐標(biāo) + 半徑* sin （角度）
注意這里的半徑為 小圓圓心到 畫(huà)布中心點(diǎn)的距離
繪制的代碼為：
private void drawCircle(Canvas canvas) {
//每次增加的角度
float rotationRangle = (float) (2 * Math.PI / mCircleColors.length);
for (int i = 0; i < mCircleColors.length; i++) {
// 旋轉(zhuǎn)的角度
float angle = i * rotationRangle ;
//計(jì)算圓心
float cx = (float) (mCircleRidus * Math.cos(angle) + mCenterX);
float cy = (float) (mCircleRidus * Math.sin(angle) + mCenterY);
//設(shè)置畫(huà)筆顏色
mCirclePaint.setColor(mCircleColors[I]);
//繪制圓形
canvas.drawCircle(cx, cy, mCircleRidus, mCirclePaint);
}
}
2?? 讓小圓動(dòng)起來(lái)
經(jīng)過(guò)分析可知没讲，小圓的位置是通過(guò) angle 計(jì)算而來(lái)，那么我們可以通過(guò)修改 angle 的值進(jìn)行 Invalidate华弓，讓它動(dòng)起來(lái).使用ValueAnimator來(lái)實(shí)現(xiàn)該效果
修改繪制小圓代碼
private void drawCircles(Canvas canvas) {
float rotationRangle = (float) (2 * Math.PI / mCircleColors.length);
for (int i = 0; i < mCircleColors.length; i++) {
//根據(jù) 動(dòng)畫(huà)量 計(jì)算角度
float angle = i * rotationRangle + mCurrentRotationRangle;
//根據(jù)角度計(jì)算坐標(biāo)
float cx = (float) (mCurrentRotationRadis * Math.cos(angle) + mCenterX);
float cy = (float) (mCurrentRotationRadis * Math.sin(angle) + mCenterY);
mCirclePaint.setColor(mCircleColors[I]);
canvas.drawCircle(cx, cy, mCircleRidus, mCirclePaint);
}
}
加入動(dòng)畫(huà)：
//動(dòng)畫(huà)的范圍為 0 -2*PI 旋轉(zhuǎn)一周
ValueAnimator mAnimator = ValueAnimator.ofFloat(0f, (float) Math.PI * 2);
mAnimator.setDuration(defaultTime);
// 動(dòng)畫(huà)重復(fù)執(zhí)行
mAnimator.setRepeatCount(ValueAnimator.INFINITE);
//為了保持旋轉(zhuǎn)的平滑 需要設(shè)置為 線(xiàn)性 插值器
mAnimator.setInterpolator(new LinearInterpolator());
//設(shè)置更新監(jiān)聽(tīng)
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//動(dòng)畫(huà)執(zhí)行過(guò)程
//修改 旋轉(zhuǎn)角度 并進(jìn)行重繪
mCurrentRotationRangle = (float) animation.getAnimatedValue();
postInvalidate();
}
});
mAnimator.start();
張開(kāi)收縮動(dòng)畫(huà)
經(jīng)過(guò)旋轉(zhuǎn)動(dòng)畫(huà)的分析食零，動(dòng)畫(huà)的核心在于控制 小圓圓心 的坐標(biāo)
//根據(jù)角度計(jì)算坐標(biāo)
float cx = (float) (mCurrentRotationRadis * Math.cos(angle) + mCenterX);
float cy = (float) (mCurrentRotationRadis * Math.sin(angle) + mCenterY);
完成張開(kāi)收縮動(dòng)畫(huà) 可以通過(guò)動(dòng)態(tài)修改 mCurrentRotationRadis 的值來(lái)完成
mAnimator = ValueAnimator.ofFloat(mRotationRadis, 0);
mAnimator.setInterpolator(new OvershootInterpolator(20f));
mAnimator.setDuration(defaultTime);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentRotationRadis = (float) animation.getAnimatedValue();
postInvalidate();
}
});
mAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new DiffusionState();
postInvalidate();
}
});
mAnimator.start();
代碼不難，就是valueAnimator的應(yīng)用這里說(shuō)明兩點(diǎn)：
1寂屏、因?yàn)閯?dòng)畫(huà)是 先張開(kāi)再收縮 可以通過(guò)增加 valueAnimator 的關(guān)鍵幀來(lái)實(shí)現(xiàn)贰谣，同時(shí)也可以使用 OvershootInterpolator 插值器來(lái)完成
2娜搂、動(dòng)畫(huà)完成監(jiān)聽(tīng)，動(dòng)畫(huà)完成之后需要修改狀態(tài)吱抚，執(zhí)行第三階段的擴(kuò)散動(dòng)畫(huà)
擴(kuò)散動(dòng)畫(huà)
1百宇、透明底色
2、由內(nèi)向外擴(kuò)散
分析：白色區(qū)域使用白色圓環(huán)來(lái)繪制秘豹，半徑不斷變大携御，邊框?qū)挾炔粩嘧冃。罱K圓環(huán)超出屏幕范圍不顯示既绕，底部遮蓋內(nèi)容完全顯示啄刹。
半徑的范圍：0 - 對(duì)角線(xiàn)長(zhǎng)度
邊框的范圍：對(duì)角線(xiàn)長(zhǎng)度-0
代碼如下：
@Override
public void drawState(Canvas canvas) {
if(mHoleRadis==0) {
canvas.drawColor(bg);
}
mCirclePaint.setColor(bg);
mCirclePaint.setStyle(Paint.Style.STROKE);
float strokeWidth = mDiagonal - mHoleRadis;
mCirclePaint.setStrokeWidth(strokeWidth);
float ridus = mHoleRadis + strokeWidth/2;
canvas.drawCircle(mCenterX, mCenterY,ridus , mCirclePaint);
}
mAnimator = ValueAnimator.ofFloat(mHoleRadis, mDiagonal);
mAnimator.setInterpolator(new AccelerateInterpolator());
mAnimator.setDuration(defaultTime);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mHoleRadis = (float) animation.getAnimatedValue();
postInvalidate();
}
});
mAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
setVisibility(GONE);
}
});
mAnimator.start();
總結(jié)
至此，這個(gè)動(dòng)畫(huà)的實(shí)現(xiàn)過(guò)程分析結(jié)束凄贩。
在面對(duì)復(fù)雜的動(dòng)畫(huà)時(shí)誓军，把復(fù)雜動(dòng)畫(huà)拆分成簡(jiǎn)單的小動(dòng)畫(huà)，逐步實(shí)現(xiàn)疲扎，分析動(dòng)畫(huà)是通過(guò)哪個(gè)值的變化來(lái)動(dòng)起來(lái)的昵时，在這個(gè)過(guò)程中需要有一定的 canvas的繪制基礎(chǔ) 和 屬性動(dòng)畫(huà)基礎(chǔ)。
