溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
為了做一個有溫度的IT男，我決定在以后的文章中給大家分享一些看到的，聽到的一些東西，如果你不喜歡請留言讓我知道，如果你喜歡請點個贊。你也可留言寫下自己想分享的東西，溫暖你我他。這次分享的是一首歌，毛不易的《消愁》，分享這首歌主要是這首歌的歌詞，借用薛之謙的評價：“我是研究歌詞的人，我研究了十幾年，但是你寫到我想給你跪！”，下面貼部分歌詞供大家欣賞
一杯敬朝陽，一杯敬月光
喚醒我的向往，溫柔了寒窗
于是可以不回頭的逆風飛翔
不怕心頭有雨，眼底有霜
一杯敬故鄉(xiāng)，一杯敬遠方
守著我的善良，催著我成長
所以南北的路從此不再漫長
靈魂不再無處安放
好了，言歸正傳，本篇文章是實現(xiàn)項目中的更新功能，效果如下
觀察動畫，可以分為幾個階段：
1.首選看初始化階段，我們要判斷用戶是否點擊了立即升級按鈕，我們通過監(jiān)聽onTouchEvent事件判斷手指是否落在可點擊區(qū)域
//如果點擊生效，執(zhí)行動畫
if (rectClickRange.contains(event.getX(), event.getY()))
startBtnDisappear();//立即更新按鈕消失動畫
其中rectClickRange是我們定義的可點擊區(qū)域，也就是立即更新圖片的顯示區(qū)域
rectClickRange = new RectF(getWidth() / 2 - startDrawable.getWidth() / 2, getHeight() / 2 - startDrawable.getHeight() / 2, getWidth() / 2 + startDrawable.getWidth() / 2, getHeight() / 2 + startDrawable.getHeight() / 2);//startDrawable是立即更新圖片
點擊生效后我們執(zhí)行立即更新按鈕消失動畫，代碼如下
/**
* 點擊立即升級的時候，立即升級按鈕執(zhí)行消失動畫
* 動畫效果是按鈕放大一點之后縮小至消失
* 根據(jù)效果選擇插值器AnticipateInterpolator（開始的時候向后然后向前甩）
* 將bitmapscale設置到立即升級圖片上
* 動畫結(jié)束后狀態(tài)更新為準備狀態(tài)
*/
private void startBtnDisappear() {
initStateData();
ValueAnimator va = ValueAnimator.ofInt(0, 1);
va.setInterpolator(new AnticipateInterpolator());
va.setDuration(800);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
bitmapScale = 1 - animation.getAnimatedFraction();
invalidate();
}
});
va.addListener(new MyAnimationListener() {
@Override
public void onAnimationEnd(Animator animation) {
cancleValueAnimator(va_List);
state = PREPARE;
toPrepare();
}
});
va.start();
va_List.add(va);
}
然后在onDraw里面繪制立即升級按鈕動畫，代碼如下：
matrix.reset();
matrix.setScale(bitmapScale, bitmapScale);//縮放圖片
matrix.preTranslate(0, 0);
matrix.postTranslate(width / 2 - startDrawable.getWidth() / 2 * bitmapScale, height / 2 - startDrawable.getHeight() / 2 * bitmapScale);//不斷的改變縮放的中心點
canvas.drawBitmap(startDrawable, matrix, bitmapPaint);
2.接著我們看一下準備階段，我們通過畫path，并不斷的改變path的起點和終點達到所需要的動畫效果，代碼如下：
/**
* PREPARE狀態(tài)
* 進度條從中間向兩端擴散
* 具體做法是不斷改變path的起點和終點坐標
* 動畫結(jié)束的時候開始下載更新
*/
private void toPrepare() {
final ValueAnimator va = ValueAnimator.ofFloat(0, width / 2 - pbPaint.getStrokeWidth() * 3 - pbProgerssDrawable.getWidth());
va.setInterpolator(new LinearInterpolator());
va.setDuration(200);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) animation.getAnimatedValue();
startX = (int) (width / 2 - value);
endX = (int) (width / 2 + value);
if (animation.getAnimatedFraction() == 1) prepareDone = true;
invalidate();
}
});
va.addListener(new MyAnimationListener() {
@Override
public void onAnimationEnd(Animator animation) {
if (startDownLoadListener != null && !isSetListener) {
isSetListener = true;
postDelayed(new Runnable() {
@Override
public void run() {
state = UPDATEING;
startDownLoadListener.downLoad();//動畫結(jié)束，通知界面開始下載apk
text = progress * 100 / max + "%";
}
}, 200);
}
}
});
va.start();
va_List.add(va);
}
具體的繪制代碼如下
pbPath.reset();
pbPath.moveTo(startX, height / 2);
pbPath.lineTo(endX, height / 2);
canvas.drawPath(pbPath, pbPaint);//繪制path
//進度條完全顯示后，畫進度提示圖片和文字
if (prepareDone) {
canvas.drawBitmap(pbProgerssDrawable, startX - pbProgerssDrawable.getWidth() / 2, height / 2 - pbProgerssDrawable.getHeight() - pbPaint.getStrokeWidth(), bitmapPaint);
String text = "0%";
textPaint.getTextBounds(text.toCharArray(), 0, text.toCharArray().length, textRect);
canvas.drawText(text, startX - textRect.right / 2, height / 2 - pbProgerssDrawable.getHeight() / 2 - pbPaint.getStrokeWidth() + textRect.bottom, textPaint);
}
3.這個時候界面就開始下載apk（代碼不貼了），然后通知view來更新進度，更新的動畫是圖片和文字旋轉(zhuǎn)向前移動（我們的做法是將畫布旋轉(zhuǎn)），如果一定時間進度沒有變化，更新的圖片和文字置回正常狀態(tài)（我們通過啟動線程不斷的將畫布旋轉(zhuǎn)回來并更新view，如果這個階段進度有更新的話，我們把線程remove掉），繪制代碼如下
pbPath.reset();
pbPath.moveTo(startX, height / 2);
pbPath.lineTo(endX, height / 2);
pm.setPath(pbPath, false);
//不斷截取進度到pbPathSec并繪制
if (progressOffsetX >= pm.getLength()) {
pm.getSegment(0, pm.getLength(), pbPathSec, true);
pm.getPosTan(pm.getLength(), POS, null);
} else {
pm.getSegment(0, progressOffsetX, pbPathSec, true);
pm.getPosTan(progressOffsetX, POS, null);
}
matrix.reset();
matrix.setTranslate(POS[0] - pbProgerssDrawable.getWidth() / 2, POS[1] - pbProgerssDrawable.getHeight() - pbPaint.getStrokeWidth());
canvas.drawPath(pbPath, pbPaint);
canvas.drawPath(pbPathSec, pbUpdatePaint);
canvas.save();
//如果進度沒有到達100%，并且進度在更新的時候，畫布旋轉(zhuǎn)，然后畫進度提示圖片和文字
if (progressOffsetX < pm.getLength() && !isRotate) {
canvas.rotate(-15, POS[0], POS[1] - pbPaint.getStrokeWidth() / 2);
}
canvas.drawBitmap(pbProgerssDrawable, matrix, bitmapPaint);
if (progressOffsetX >= pm.getLength())
progressOffsetX = pm.getLength();
text = (int) (progressOffsetX * 100 / pm.getLength()) + "%";
textPaint.getTextBounds(text.toCharArray(), 0, text.toCharArray().length, textRect);
canvas.drawText(text, progressOffsetX + startX - textRect.right / 2, height / 2 - pbProgerssDrawable.getHeight() / 2 - pbPaint.getStrokeWidth() + textRect.bottom, textPaint);
//我們啟動一個線程，如果300毫秒進度沒有更新，將畫布旋轉(zhuǎn)回來畫進度提示圖片和文字
if (progressOffsetX < pm.getLength()) postDelayed(rotateRunnable, 300);
else toSucc();
canvas.restore();
其中rotateRunnable的代碼如下
//每隔一段時間刷新界面，如果進度沒有更新，將畫布旋轉(zhuǎn)回來
private Runnable rotateRunnable = new Runnable() {
@Override
public void run() {
isRotate = true;
invalidate();
}
};
4.當進度達到100%的時候，我們將進度提示圖片縮放至消失，并且進度背景執(zhí)行兩端向中間縮小動畫，也是改變path的起始點，代碼如下
//下載進度達到100時，進度提示圖片進行縮放
private void toSuccBitmapScale() {
cancleValueAnimator(va_List);
ValueAnimator va = ValueAnimator.ofFloat(1, 0);
va.setInterpolator(new AccelerateInterpolator());
va.setDuration(100);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
bitmapScale = (Float) animation.getAnimatedValue();
state = SUCCESS;
invalidate();
}
});
va.start();
va.addListener(new MyAnimationListener() {
@Override
public void onAnimationEnd(Animator animation) {
toSuccPathAnim();
}
});
va_List.add(va);
}
//成功后進度條縮放動畫
private void toSuccPathAnim() {
cancleValueAnimator(va_List);
ValueAnimator va = ValueAnimator.ofInt(0, (endX - startX) / 2);
va.setInterpolator(new AccelerateInterpolator());
va.setDuration(300);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
transx = (int) animation.getAnimatedValue();
state = SUCCESS;
invalidate();
}
});
va.start();
va.addListener(new MyAnimationListener() {
@Override
public void onAnimationEnd(Animator animation) {
toInstall();
}
});
va_List.add(va);
}
繪制代碼如下
pbPath.reset(); pbPath.moveTo(startX + transx, height / 2);//不斷的改變起點 pbPath.lineTo(endX - transx, height / 2);//改變終點 pm.setPath(pbPath, false); pm.getSegment(0, (endX - startX), pbPathSec, true); pm.getPosTan(endX - startX, POS, null); matrix.reset(); matrix.preTranslate(POS[0] - pbProgerssDrawable.getWidth() / 2, POS[1] - pbProgerssDrawable.getHeight() - pbPaint.getStrokeWidth()); matrix.postScale(bitmapScale, bitmapScale, POS[0], POS[1] - pbPaint.getStrokeWidth()); canvas.drawPath(pbPath, pbUpdatePaint);//path縮放動畫 canvas.drawBitmap(pbProgerssDrawable, matrix, bitmapPaint);//bitmap縮放動畫
5.最后就是顯示馬上安裝圖片動畫了，一個簡單的縮放
//顯示馬上安裝圖片動畫
private void toInstall() {
cancleValueAnimator(va_List);
ValueAnimator va = ValueAnimator.ofInt(0, 1);
va.setInterpolator(new LinearInterpolator());
va.setDuration(400);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
bitmapScale = animation.getAnimatedFraction();
state = INSTALL;
invalidate();
}
});
va.start();
va_List.add(va);
}
//繪制代碼如下
matrix.reset();
matrix.setScale(bitmapScale, bitmapScale);
matrix.preTranslate(0, 0);
matrix.postTranslate(width / 2 - succDrawable.getWidth() / 2 * bitmapScale, height / 2 - succDrawable.getHeight() / 2 * bitmapScale);
canvas.drawBitmap(succDrawable, matrix, bitmapPaint);
回過頭來看看，其實當我們把動畫不斷的分解之后，發(fā)現(xiàn)其實每個動畫并沒有那么難，我們這里用到的有path繪制及截取，getPosTan（獲取路徑上某點的坐標及其切線的坐標），利用Matrix做動畫，使用屬性動畫ValueAnimator。本篇還有好多功能沒有實現(xiàn)，比如下載失敗動畫，失敗后恢復至初始化動畫，不過任何輪子都不一定能完全適合你，學習到知識之后自己造一個適合自己的才是最重要。
github地址：https://github.com/MrAllRight/BezierView
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
