您好,登錄后才能下訂單哦!
這篇文章主要介紹如何使用Android實(shí)現(xiàn)圓弧刷新動(dòng)畫(huà),文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
動(dòng)畫(huà)的效果是三段圓弧進(jìn)行旋轉(zhuǎn),同時(shí)弧度也在逐漸增大縮小,這里采用的是在onDraw中繪制三段圓弧。
// 繪制圓弧mPaint.setColor(mTopColor);canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, false, mPaint);mPaint.setColor(mLeftColor);canvas.drawArc(left, top, right, bottom, startAngle - 120, sweepAngle, false, mPaint);mPaint.setColor(mRightColor);canvas.drawArc(left, top, right, bottom, startAngle + 120, sweepAngle, false, mPaint);
動(dòng)畫(huà)的基礎(chǔ)是在onDraw中,依次繪制三種不同顏色的圓弧。三段圓弧每每相隔120度,這樣就可以剛好平分整個(gè)圓,比較美觀。
注意這里的startAngle的初始值是 -90 ,剛好是圓的最上面一點(diǎn)。這里需要注意的是canvas的drawArc方法中,前四個(gè)參數(shù)是決定圓弧的位置的矩形的坐標(biāo),startAngle指的是圓弧開(kāi)始的角度,0度是圓的最右側(cè)的點(diǎn),以順時(shí)針為正、逆時(shí)針為負(fù)。所以-90度剛好是圓的最上面的點(diǎn)。
sweepAngle是指圓弧掃過(guò)的角度,同樣順時(shí)針為正,逆時(shí)針為負(fù)。這里sweepAngle的大小初始值是-1,這樣在動(dòng)畫(huà)未開(kāi)始之前也能夠繪制出一個(gè)圓點(diǎn)(實(shí)際上是角度為1的圓弧,近似圓點(diǎn))。后面一個(gè)參數(shù)是useCenter,指的是是否使用圓心,為true時(shí)就會(huì)將圓弧的兩個(gè)端點(diǎn)連向圓心構(gòu)成一個(gè)扇形,為false時(shí)則不會(huì)連接圓心。
另外要注意paint的style要設(shè)置為stroke,默認(rèn)情況下是fill模式,也就是會(huì)直接填充。對(duì)于這里的圓弧,會(huì)直接連接圓弧的兩個(gè)端點(diǎn)構(gòu)成閉合圖形然后進(jìn)行填充。
這樣的話繪制出來(lái)的就是動(dòng)畫(huà)的初始狀態(tài):三個(gè)圓點(diǎn)(實(shí)際上是一段角度為1的圓弧)。
從上面也可以看出,要繪制圓弧必須要有四個(gè)坐標(biāo),這里的坐標(biāo)是以這種方式得到的:以View的長(zhǎng)寬中最短的一邊作為組成圓的正方形的邊長(zhǎng),然后居中顯示。
int width = getMeasuredWidth();int height = getMeasuredHeight();int side = Math.min(width - getPaddingStart() - getPaddingEnd(), height - getPaddingTop() - getPaddingBottom()) - (int) (mStrokeWidth + 0.5F);// 確定動(dòng)畫(huà)位置float left = (width - side) / 2F;float top = (height - side) / 2F;float right = left + side;float bottom = top + side;
上面的一段代碼就是定位圓弧的正方形坐標(biāo)的實(shí)現(xiàn),這里可以看到在計(jì)算邊長(zhǎng)side的時(shí)候,去掉了view的padding和mStrokenWidth。其中mStrokenWidth是圓弧的弧線的寬度,由于圓弧的線較寬的時(shí)候(此時(shí)相當(dāng)于圓環(huán))會(huì)向內(nèi)外均勻延伸,也就是內(nèi)邊距和外邊距的中間到圓心的距離才是半徑。因此在確定圓弧的位置時(shí),要去除線寬,以防止在交界處圓弧無(wú)法完全繪制。
另外,我們自定義View時(shí),默認(rèn)的wrap_content模式下會(huì)與match_parent的效果一樣,因此需要在onMeasure中進(jìn)行處理。這里就簡(jiǎn)單的設(shè)置wrap_content模式下為20dp。
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); // 對(duì)于wrap_content ,設(shè)置其為20dp。默認(rèn)情況下wrap_content和match_parent是一樣的效果 if (widthMode == MeasureSpec.AT_MOST) { width = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F); } if (heightMode == MeasureSpec.AT_MOST) { height = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F); } setMeasuredDimension(width, height); }
以上的操作就是動(dòng)畫(huà)的整個(gè)基礎(chǔ),而讓View動(dòng)起來(lái)的操作就是不斷地修改圓弧的startAngle和sweepAngle,然后觸發(fā)View的重繪。這個(gè)過(guò)程使用ValueAnimator來(lái)生成一系列數(shù)字,然后根據(jù)這個(gè)來(lái)計(jì)算圓弧的開(kāi)始角度和掃描角度。
// 最小角度為1度,是為了顯示小圓點(diǎn)sweepAngle = -1;startAngle = -90;curStartAngle = startAngle;// 擴(kuò)展動(dòng)畫(huà)mValueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(mDuration);mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);mValueAnimator.addUpdateListener(animation -> {float fraction = animation.getAnimatedFraction();float value = (float) animation.getAnimatedValue(); if (mReverse) fraction = 1 - fraction; startAngle = curStartAngle + fraction * 120; sweepAngle = -1 - mMaxSweepAngle * value; postInvalidate(); }); mValueAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationRepeat(Animator animation) { curStartAngle = startAngle; mReverse = !mReverse; } });
上面就是計(jì)算的過(guò)程,該動(dòng)畫(huà)采用的是value值從0到1再到0,對(duì)應(yīng)著其中一段圓弧從原點(diǎn)伸展到最大再縮小回原點(diǎn)。其中sweepAngle的計(jì)算是 sweepAngle = -1 - mMaxSweepAngle * value ,也就是在整個(gè)過(guò)程中,圓弧的角度逐漸增大到maxSweepAngle。這里采用的是負(fù)值,也就是從startAngle按逆時(shí)針?lè)较蜻M(jìn)行繪制。-1是基礎(chǔ)值,以防止縮小到最小時(shí)也能夠顯示出一個(gè)圓點(diǎn)。
startAngle的計(jì)算則是根據(jù)動(dòng)畫(huà)過(guò)程的fraction,而不是動(dòng)畫(huà)值,也就是從0到1,在整個(gè)動(dòng)畫(huà)過(guò)程中逐漸增加120度。由于整個(gè)View是由三段相同的圓弧形成的,也就是說(shuō)每段圓弧最大只能占據(jù)120度,否則就會(huì)重疊。那么在0到1這個(gè)過(guò)程中,弧度增大到120度,startAngle則必須移動(dòng)120度給圓弧騰出位置,這就是120度的由來(lái)。并且監(jiān)聽(tīng)Reverse狀態(tài),因?yàn)樵赗everse狀態(tài)下,fraction是從1到0的,而我們需要的是startAngle一直逐漸增大,因此在Reverse下通過(guò)1-fraction使之與原動(dòng)畫(huà)一致。 并且每次reverse監(jiān)聽(tīng)下,記錄startAngle作為新的當(dāng)前位置和記錄reverse狀態(tài)。
以上就是整個(gè)圓弧動(dòng)畫(huà)的實(shí)現(xiàn)細(xì)節(jié)了,整體比較簡(jiǎn)單,就是通過(guò)對(duì)弧度的startAngle和sweepAngle進(jìn)行改變?nèi)缓笸ㄖ猇iew重繪。 下面是實(shí)現(xiàn)的完整代碼 ,這里抽取了一些基礎(chǔ)變量放到屬性中,用于簡(jiǎn)便控制動(dòng)畫(huà)的顯示:
values/attrs.xml
<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="RefreshView"> <attr name="top_color" format="color"/> <attr name="left_color" format="color"/> <attr name="right_color" format="color"/> <!-- 圓弧的寬度 --> <attr name="border_width" format="dimension"/> <!-- 每個(gè)周期的時(shí)間,從點(diǎn)到最大弧為一個(gè)周期,ms --> <attr name="duration" format="integer"/> <!-- 圓弧掃過(guò)的最大角度 --> <attr name="max_sweep_angle" format="integer"/> <!-- 是否自動(dòng)開(kāi)啟動(dòng)畫(huà) --> <attr name="auto_start" format="boolean"/> </declare-styleable></resources>
RefreshView.java
package com.pgaofeng.mytest.other;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.ValueAnimator;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.util.TypedValue;import android.view.View;import com.pgaofeng.mytest.R;/** * @author gaofengpeng * @date 2019/9/16 * @description : */public class RefreshView extends View { /** * 動(dòng)畫(huà)的三種顏色 */ private int mTopColor; private int mLeftColor; private int mRightColor; private Paint mPaint; /** * 掃描角度,用于控制圓弧的長(zhǎng)度 */ private float sweepAngle; /** * 開(kāi)始角度,用于控制圓弧的顯示位置 */ private float startAngle; /** * 當(dāng)前角度,記錄圓弧旋轉(zhuǎn)的角度 */ private float curStartAngle; /** * 用動(dòng)畫(huà)控制圓弧顯示 */ private ValueAnimator mValueAnimator; /** * 每個(gè)周期的時(shí)長(zhǎng) */ private int mDuration; /** * 圓弧線寬 */ private float mStrokeWidth; /** * 動(dòng)畫(huà)過(guò)程中最大的圓弧角度 */ private int mMaxSweepAngle; /** * 是否自動(dòng)開(kāi)啟動(dòng)畫(huà) */ private boolean mAutoStart; /** * 用于判斷當(dāng)前動(dòng)畫(huà)是否處于Reverse狀態(tài) */ private boolean mReverse = false; public RefreshView(Context context) { this(context, null); } public RefreshView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public RefreshView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initAttr(context, attrs); init(); } private void initAttr(Context context, AttributeSet attrs) { TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RefreshView); mTopColor = array.getColor(R.styleable.RefreshView_top_color, Color.BLUE); mLeftColor = array.getColor(R.styleable.RefreshView_left_color, Color.YELLOW); mRightColor = array.getColor(R.styleable.RefreshView_right_color, Color.RED); mDuration = array.getInt(R.styleable.RefreshView_duration, 600); if (mDuration <= 0) { mDuration = 600; } mStrokeWidth = array.getDimension(R.styleable.RefreshView_border_width, 8F); mMaxSweepAngle = array.getInt(R.styleable.RefreshView_max_sweep_angle, 90); if (mMaxSweepAngle <= 0 || mMaxSweepAngle > 120) { // 對(duì)于不規(guī)范值直接采用默認(rèn)值 mMaxSweepAngle = 90; } mAutoStart = array.getBoolean(R.styleable.RefreshView_auto_start, true); array.recycle(); } private void init() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(mStrokeWidth); mPaint.setStrokeCap(Paint.Cap.ROUND); // 最小角度為1度,是為了顯示小圓點(diǎn) sweepAngle = -1; startAngle = -90; curStartAngle = startAngle; // 擴(kuò)展動(dòng)畫(huà) mValueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(mDuration); mValueAnimator.setRepeatMode(ValueAnimator.REVERSE); mValueAnimator.setRepeatCount(ValueAnimator.INFINITE); mValueAnimator.addUpdateListener(animation -> { float fraction = animation.getAnimatedFraction(); float value = (float) animation.getAnimatedValue(); if (mReverse) fraction = 1 - fraction; startAngle = curStartAngle + fraction * 120; sweepAngle = -1 - mMaxSweepAngle * value; postInvalidate(); }); mValueAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationRepeat(Animator animation) { curStartAngle = startAngle; mReverse = !mReverse; } }); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); // 對(duì)于wrap_content ,設(shè)置其為20dp。默認(rèn)情況下wrap_content和match_parent是一樣的效果 if (widthMode == MeasureSpec.AT_MOST) { width = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F); } if (heightMode == MeasureSpec.AT_MOST) { height = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F); } setMeasuredDimension(width, height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = getMeasuredWidth(); int height = getMeasuredHeight(); int side = Math.min(width - getPaddingStart() - getPaddingEnd(), height - getPaddingTop() - getPaddingBottom()) - (int) (mStrokeWidth + 0.5F); // 確定動(dòng)畫(huà)位置 float left = (width - side) / 2F; float top = (height - side) / 2F; float right = left + side; float bottom = top + side; // 繪制圓弧 mPaint.setColor(mTopColor); canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, false, mPaint); mPaint.setColor(mLeftColor); canvas.drawArc(left, top, right, bottom, startAngle - 120, sweepAngle, false, mPaint); mPaint.setColor(mRightColor); canvas.drawArc(left, top, right, bottom, startAngle + 120, sweepAngle, false, mPaint); } @Override protected void onDetachedFromWindow() { if (mAutoStart && mValueAnimator.isRunning()) { mValueAnimator.cancel(); } super.onDetachedFromWindow(); } @Override protected void onAttachedToWindow() { if (mAutoStart && !mValueAnimator.isRunning()) { mValueAnimator.start(); } super.onAttachedToWindow(); } /** * 開(kāi)始動(dòng)畫(huà) */ public void start() { if (!mValueAnimator.isStarted()) { mValueAnimator.start(); } } /** * 暫停動(dòng)畫(huà) */ public void pause() { if (mValueAnimator.isRunning()) { mValueAnimator.pause(); } } /** * 繼續(xù)動(dòng)畫(huà) */ public void resume() { if (mValueAnimator.isPaused()) { mValueAnimator.resume(); } } /** * 停止動(dòng)畫(huà) */ public void stop() { if (mValueAnimator.isStarted()) { mReverse = false; mValueAnimator.end(); } }}
以上是“如何使用Android實(shí)現(xiàn)圓弧刷新動(dòng)畫(huà)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。