天天看點
傳回

canvas重新整理_貓眼下拉重新整理動畫

canvas重新整理_貓眼下拉重新整理動畫

作者：刀放下好好說話

部落格：https://www.jianshu.com/p/f22da1637b29

一、前言

最近關注了一下《愛情公墓》的票房，是以下載下傳了貓眼app，發現他的下拉重新整理動畫甚是好看：

canvas重新整理_貓眼下拉重新整理動畫
canvas重新整理_貓眼下拉重新整理動畫

是以想着仿着做一個，最終實作效果：

canvas重新整理_貓眼下拉重新整理動畫
canvas重新整理_貓眼下拉重新整理動畫

二、分析

貓眼的下拉頭部動畫是最具有美感的一個動畫效果。拆開來看，是由四個弧形，加一個中間的圖檔組成，下拉的時候，有一個水位上漲的效果，水位到頂後，開啟動畫，外面的圈旋轉，裡面的圖檔保持不動。

畫圓弧畫圖檔很簡單，但是這個水位上漲和旋轉的動畫有點麻煩。

如果不想在一個View裡面處理兩個動畫，實際上可以用一個組合的FrameLayout解決，底下是圓弧的View，上面是圖檔Logo的ImageView，功能能實作，但是不夠優雅，這裡就是用一個自定義View解決兩個動畫問題。

三、代碼實作

3.1 自定義View的模闆 

public class RefreshImageView extends View { public RefreshImageView(Context context) { this(context, );
} public RefreshImageView(Context context, AttributeSet attrs) { super(context, attrs);
initView(context, attrs);
} private void initView(Context context, AttributeSet attrs) {

} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} @Override
protected void onDraw(Canvas canvas) { super.onDraw(canvas);
}
}

3.2 onMeasure 處理

自定義第一步，你要知道自己的這個View需要多大的手機螢幕面積，也就是告訴手機我這個View的寬高。一般來說，是有固定的寫法的，先判斷是不是wrap_content的，是的話有兩種處理

1.給一個預設的值2.看子View需要多大空間計算得出 (當然這裡View沒有子類)

是以這裡簡化一點，不考慮wrap_content的情況了，直接認為使用的時候要麼是match_parent的要麼就是100dp這種确認的值，是以計算代碼如下：

public class RefreshImageView extends View { private int width; public RefreshImageView(Context context) { this(context, );
} public RefreshImageView(Context context, AttributeSet attrs) { super(context, attrs);
initView(context, attrs);
} private void initView(Context context, AttributeSet attrs) {

} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
width = MeasureSpec.getSize(widthMeasureSpec);
setMeasuredDimension(width, width);
} @Override
protected void onDraw(Canvas canvas) { super.onDraw(canvas);
}
}

這樣得到的View就是一個正方形。

3.3 圓弧Rect計算

我們知道，畫一段圓弧，一定要知道圓弧所在的正方形區域，而且，圓弧是畫在View的邊框上的，如果圓弧的寬度特别大的時候，實際上有一半的弧形是畫到邊界外面的，是以這裡我們需要計算圓弧的區域。

在确認了View的寬度width之後，直接在View内部減去一個弧形寬度的正方形區域内畫圓弧，這樣是不會超出View邊界的。

3.4 onDraw 畫弧形

四段弧形，直接一個for循環，預設是每畫80度灰色弧形，開一個10度的弧形空隙，繼續下一個弧形，這樣圖案就出來了：

canvas重新整理_貓眼下拉重新整理動畫

3.5 onDraw 畫水位

這裡是根據進度來确定水位的高度的，是以需要從使用的地方傳遞進來一個浮點型progress。重要的一點是怎麼給進度以下的部分上色？這裡需要了解 圖像混合模式

我們在View的底部繪制一個逐漸上漲的水位矩形圖，但是由于設定了圖像混合模式，隻會顯示兩個圖案并集的部分，于是就實作了這種逐漸渲染的效果：

canvas重新整理_貓眼下拉重新整理動畫
public class RefreshImageView extends View { private int width; private int borderWidth = 10; private RectF rectF; private Paint borderPaint; private float progress = 0.5f; private Paint progressPaint; private PorterDuffXfermode mXfermode; public RefreshImageView(Context context) { this(context, );
} public RefreshImageView(Context context, AttributeSet attrs) { super(context, attrs);
initView(context, attrs);
} private void initView(Context context, AttributeSet attrs) {
borderPaint = new Paint;
borderPaint.setAntiAlias(true);
borderPaint.setStrokeWidth(borderWidth);
borderPaint.setStrokeCap(Paint.Cap.ROUND);
borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setColor(Color.parseColor("#999999"));

progressPaint = new Paint;
progressPaint.setAntiAlias(true);
progressPaint.setColor(Color.parseColor("#eb1c42")); //最重要的一點，選擇合适的圖檔重疊模式
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
width = MeasureSpec.getSize(widthMeasureSpec);
rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
setMeasuredDimension(width, width);
} @Override
protected void onDraw(Canvas canvas) { int sc = canvas.saveLayer(0, 0, width, width, , Canvas.ALL_SAVE_FLAG); for (int i = 0; i < 4; i++) {
canvas.drawArc(rectF, -40 + 90 * i, 80, false, borderPaint);
}
progressPaint.setXfermode(mXfermode);
canvas.drawRect(0, width - width * progress, width, width, progressPaint);
progressPaint.setXfermode;
canvas.restoreToCount(sc);
} public void setProgress(float progress) { this.progress = progress;
invalidate;
}
}

首先我們需要在離屏緩存的canvas上繪制兩者混合的圖案，否則沒有混合的效果。初始我們定的progress為50%，效果已經出來了：

canvas重新整理_貓眼下拉重新整理動畫

3.6 繪制Logo

中間的logo的矩形應該比border的矩形更小，否則會重合border，這裡需要通過勾股定理計算，也不複雜，不了解可以畫一個圖形幫助了解：

canvas重新整理_貓眼下拉重新整理動畫
public class RefreshImageView extends View { private int width; private int borderWidth = 10; private RectF rectF; private Paint borderPaint; private float progress = 0.5f; private Paint progressPaint; private PorterDuffXfermode mXfermode; private RectF bitmapRectF; private Paint bitmapPaint; private Bitmap srcBitmap; private int innerWidth; private int offset; public RefreshImageView(Context context) { this(context, );
} public RefreshImageView(Context context, AttributeSet attrs) { super(context, attrs);
initView(context, attrs);
} private void initView(Context context, AttributeSet attrs) {
borderPaint = new Paint;
borderPaint.setAntiAlias(true);
borderPaint.setStrokeWidth(borderWidth);
borderPaint.setStrokeCap(Paint.Cap.ROUND);
borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setColor(Color.parseColor("#999999"));

progressPaint = new Paint;
progressPaint.setAntiAlias(true);
progressPaint.setColor(Color.parseColor("#eb1c42")); //最重要的一點，選擇合适的圖檔重疊模式
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);

bitmapPaint = new Paint;
bitmapPaint.setAntiAlias(true);
srcBitmap = BitmapFactory.decodeResource(getResources, R.drawable.riv_test);
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
width = MeasureSpec.getSize(widthMeasureSpec);
rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
setMeasuredDimension(width, width); //此處計算logo的矩形位置
int innerCircleRadius = width / 2 - borderWidth * 2;
innerWidth = (int) (Math.sqrt(2) * innerCircleRadius);
offset = width / 2 - innerWidth / 2;
bitmapRectF = new RectF(offset, offset, width - offset, width - offset);
} @Override
protected void onDraw(Canvas canvas) { int sc = canvas.saveLayer(0, 0, width, width, , Canvas.ALL_SAVE_FLAG); for (int i = 0; i < 4; i++) {
canvas.drawArc(rectF, -40 + 90 * i, 80, false, borderPaint);
}
progressPaint.setXfermode(mXfermode);
canvas.drawRect(0, width - width * progress, width, width, progressPaint);
progressPaint.setXfermode;
canvas.restoreToCount(sc);

canvas.drawBitmap(srcBitmap, , bitmapRectF, bitmapPaint);
} public void setProgress(float progress) { this.progress = progress;
invalidate;
}
}

3.7 border 動畫

如果沒有logo圖案，可以讓View rotate實作旋轉，但是有了logo這樣導緻logo也在旋轉，不合理，是以需要不斷的改變border的起始繪制位置，這樣就很容易想到屬性動畫，0到360度的數值變化：

public void startAnim {
progress = 1;
animator = ValueAnimator.ofInt(0, 360);
animator.setDuration(1000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator);
animator.start;
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener { @Override
public void onAnimationUpdate(ValueAnimator animation) {
dAngle = (Integer) animation.getAnimatedValue;
invalidate;
}
});
} public void stopAnim { if (animator != ) {
animator.cancel;
dAngle = 0;
progress = 0;
invalidate;
}
}

開啟動畫之前，設定progress為1，確定水位是滿的，0度到360度的變化，增加一個變量dAngle，記錄變化的角度，是以onDraw的代碼也要做出變化：

for (int i = 0; i < 4; i++) {
canvas.drawArc(rectF, -40 + 90 * i + dAngle, 80, false, borderPaint);
}

每一段弧形加上變化的角度。

四、總結

到這裡就全部結束了，剩下的就是代碼的優化了，将border寬度和顔色什麼的都寫到屬性檔案裡，可以在xml裡友善的設定上。

附上完整代碼

public class RefreshImageView extends View { private int width; private int borderWidth = 10; private RectF rectF; private Paint borderPaint; private float progress; private Paint progressPaint; private PorterDuffXfermode mXfermode; private RectF bitmapRectF; private Paint bitmapPaint; private Bitmap srcBitmap; private int innerWidth; private int offset; private ValueAnimator animator; //變化的角度
private int dAngle; private int borderColor; private int borderCoverColor; private int gapAngle; public RefreshImageView(Context context) { this(context, );
} public RefreshImageView(Context context, AttributeSet attrs) { super(context, attrs);
initView(context, attrs);
} private void initView(Context context, AttributeSet attrs) { if (attrs != ) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RefreshImageView);
borderWidth = (int) array.getDimension(R.styleable.RefreshImageView_refresh_iv_border_width, 10);
borderColor = array.getColor(R.styleable.RefreshImageView_refresh_iv_border_color, Color.GRAY);
borderCoverColor = array.getColor(R.styleable.RefreshImageView_refresh_iv_cover_color, Color.RED);
gapAngle = array.getInt(R.styleable.RefreshImageView_refresh_iv_gap_angle, 10); int srcId = array.getResourceId(R.styleable.RefreshImageView_refresh_iv_src, R.drawable.riv_test);
srcBitmap = BitmapFactory.decodeResource(getResources, srcId);
}

borderPaint = new Paint;
borderPaint.setAntiAlias(true);
borderPaint.setStrokeWidth(borderWidth);
borderPaint.setStrokeCap(Paint.Cap.ROUND);
borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setColor(borderColor);

progressPaint = new Paint;
progressPaint.setAntiAlias(true);
progressPaint.setColor(borderCoverColor); //最重要的一點，選擇合适的圖檔重疊模式
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);

bitmapPaint = new Paint;
bitmapPaint.setAntiAlias(true);
srcBitmap = BitmapFactory.decodeResource(getResources, R.drawable.riv_test);
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
width = MeasureSpec.getSize(widthMeasureSpec);
rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
setMeasuredDimension(width, width); int innerCircleRadius = width / 2 - borderWidth * 2;
innerWidth = (int) (Math.sqrt(2) * innerCircleRadius);
offset = width / 2 - innerWidth / 2;
bitmapRectF = new RectF(offset, offset, width - offset, width - offset);
} @Override
protected void onDraw(Canvas canvas) { int sc = canvas.saveLayer(0, 0, width, width, , Canvas.ALL_SAVE_FLAG); for (int i = 0; i < 4; i++) { int sweepAngle = 90 - gapAngle;
canvas.drawArc(rectF, -sweepAngle / 2 + 90 * i + dAngle, sweepAngle, false, borderPaint);
}
progressPaint.setXfermode(mXfermode);
canvas.drawRect(0, width - width * progress, width, width, progressPaint);
progressPaint.setXfermode;
canvas.restoreToCount(sc);

canvas.drawBitmap(srcBitmap, , bitmapRectF, bitmapPaint);
} public void setProgress(float progress) { this.progress = progress;
invalidate;
} public void startAnim {
progress = 1;
animator = ValueAnimator.ofInt(0, 360);
animator.setDuration(1000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator);
animator.start;
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener { @Override
public void onAnimationUpdate(ValueAnimator animation) {
dAngle = (Integer) animation.getAnimatedValue;
invalidate;
}
});
} public void stopAnim { if (animator != ) {
animator.cancel;
dAngle = 0;
progress = 0;
invalidate;
}
}
}

近期文章：

  • 3分鐘教會你Android Studio插件開發！

  • 抓住2019風口，我看這8個公衆号！

  • 主程玩失蹤，公司蒸發600w,創始人秒變打工仔(含視訊)

今日問題：

大家平時都是如何閱讀源碼的？

打卡格式：

打卡 X 天，答：xxx 。

canvas重新整理_貓眼下拉重新整理動畫
canvas重新整理
上一篇: 統計信号處理基礎-估計與檢測理論的學習過程
下一篇: 用matlab繪制信源熵函數曲線,繪制信源熵函數曲線.doc

繼續閱讀