為了做一個有溫度的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設置到立即升級圖片上 * 動畫結束后狀態(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的起點和終點坐標 * 動畫結束的時候開始下載更新 */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();//動畫結束，通知界面開始下載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來更新進度，更新的動畫是圖片和文字旋轉向前移動（我們的做法是將畫布旋轉），如果一定時間進度沒有變化，更新的圖片和文字置回正常狀態(tài)（我們通過啟動線程不斷的將畫布旋轉回來并更新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%，并且進度在更新的時候，畫布旋轉，然后畫進度提示圖片和文字 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毫秒進度沒有更新，將畫布旋轉回來畫進度提示圖片和文字 if (progressOffsetX < pm.getLength()) postDelayed(rotateRunnable, 300); else toSucc(); canvas.restore();其中rotateRunnable的代碼如下 //每隔一段時間刷新界面，如果進度沒有更新，將畫布旋轉回來 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
新聞熱點
疑難解答
