一个简单的Android圆弧刷新动画

概述一个简单的Android圆弧刷新动画 之前刷贴吧的时候看到的贴吧的刷新动画,就是一个圆弧旋转的动画,感觉挺好看的,就抽空实现了一下. 最终的结果是这样的: 从上图中可以看出,动画的效果是三段圆弧进行旋转,同时弧度也在逐渐增大缩小,这里采用的是在onDraw中绘制三段圆弧. // 绘制圆弧 mPaint.setColor(mTopColor); canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, false, mPaint); mPaint.setColor

之前刷贴吧的时候看到的贴吧的刷新动画，就是一个圆弧旋转的动画，感觉挺好看的，就抽空实现了一下。

最终的结果是这样的：

从上图中可以看出，动画的效果是三段圆弧进行旋转，同时弧度也在逐渐增大缩小，这里采用的是在onDraw中绘制三段圆弧。

// 绘制圆弧mPaint.setcolor(mtopcolor);canvas.drawArc(left,top,right,bottom,startAngle,sweepAngle,false,mPaint);mPaint.setcolor(mleftcolor);canvas.drawArc(left,startAngle - 120,mPaint);mPaint.setcolor(mRightcolor);canvas.drawArc(left,startAngle + 120,mPaint);

动画的基础是在onDraw中，依次绘制三种不同颜色的圆弧。三段圆弧每每相隔120度，这样就可以刚好平分整个圆，比较美观。

注意这里的startAngle的初始值是 -90 ，刚好是圆的最上面一点。这里需要注意的是canvas的drawArc方法中，前四个参数是决定圆弧的位置的矩形的坐标，startAngle指的是圆弧开始的角度，0度是圆的最右侧的点，以顺时针为正、逆时针为负。所以-90度刚好是圆的最上面的点。

sweepAngle是指圆弧扫过的角度，同样顺时针为正，逆时针为负。这里sweepAngle的大小初始值是-1，这样在动画未开始之前也能够绘制出一个圆点(实际上是角度为1的圆弧，近似圆点)。
后面一个参数是useCenter，指的是是否使用圆心，为true时就会将圆弧的两个端点连向圆心构成一个扇形，为false时则不会连接圆心。

另外要注意paint的style要设置为stroke，默认情况下是fill模式，也就是会直接填充。对于这里的圆弧，会直接连接圆弧的两个端点构成闭合图形然后进行填充。

这样的话绘制出来的就是动画的初始状态：三个圆点（实际上是一段角度为1的圆弧）。

从上面也可以看出，要绘制圆弧必须要有四个坐标，这里的坐标是以这种方式得到的：以VIEw的长宽中最短的一边作为组成圆的正方形的边长，然后居中显示。

int wIDth = getMeasureDWIDth();int height = getMeasuredHeight();int sIDe = Math.min(wIDth - getpaddingStart() - getpaddingEnd(),height - getpaddingtop() - getpaddingBottom()) - (int) (mstrokeWIDth + 0.5F);// 确定动画位置float left = (wIDth - sIDe) / 2F;float top = (height - sIDe) / 2F;float right = left + sIDe;float bottom = top + sIDe;

上面的一段代码就是定位圆弧的正方形坐标的实现，这里可以看到在计算边长sIDe的时候，去掉了vIEw的padding和mstrokenWIDth。其中mstrokenWIDth是圆弧的弧线的宽度，由于圆弧的线较宽的时候(此时相当于圆环)会向内外均匀延伸，也就是内边距和外边距的中间到圆心的距离才是半径。因此在确定圆弧的位置时，要去除线宽，以防止在交界处圆弧无法完全绘制。

另外，我们自定义view时，默认的wrap_content模式下会与match_parent的效果一样，因此需要在onMeasure中进行处理。这里就简单的设置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);    // 对于wrap_content ，设置其为20dp。默认情况下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,getContext().getResources().getdisplayMetrics()) + 0.5F);    }    setMeasuredDimension(wIDth,height);  }

以上的 *** 作就是动画的整个基础，而让VIEw动起来的 *** 作就是不断地修改圆弧的startAngle和sweepAngle，然后触发VIEw的重绘。这个过程使用ValueAnimator来生成一系列数字，然后根据这个来计算圆弧的开始角度和扫描角度。

// 最小角度为1度，是为了显示小圆点sweepAngle = -1;startAngle = -90;curStartAngle = startAngle;// 扩展动画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;      }    });

上面就是计算的过程，该动画采用的是value值从0到1再到0，对应着其中一段圆弧从原点伸展到最大再缩小回原点。其中sweepAngle的计算是 sweepAngle = -1 - mMaxSweepAngle * value ，也就是在整个过程中，圆弧的角度逐渐增大到maxSweepAngle。这里采用的是负值，也就是从startAngle按逆时针方向进行绘制。-1是基础值，以防止缩小到最小时也能够显示出一个圆点。

startAngle的计算则是根据动画过程的fraction，而不是动画值，也就是从0到1，在整个动画过程中逐渐增加120度。由于整个VIEw是由三段相同的圆弧形成的，也就是说每段圆弧最大只能占据120度，否则就会重叠。那么在0到1这个过程中，弧度增大到120度，startAngle则必须移动120度给圆弧腾出位置，这就是120度的由来。并且监听Reverse状态，因为在Reverse状态下，fraction是从1到0的，而我们需要的是startAngle一直逐渐增大，因此在Reverse下通过1-fraction使之与原动画一致。 并且每次reverse监听下，记录startAngle作为新的当前位置和记录reverse状态。

以上就是整个圆弧动画的实现细节了，整体比较简单，就是通过对弧度的startAngle和sweepAngle进行改变然后通知VIEw重绘。 下面是实现的完整代码 ，这里抽取了一些基础变量放到属性中，用于简便控制动画的显示：

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"/>    <!-- 每个周期的时间，从点到最大弧为一个周期,ms -->    <attr name="duration" format="integer"/>    <!-- 圆弧扫过的最大角度 -->    <attr name="max_sweep_angle" format="integer"/>    <!-- 是否自动开启动画 -->    <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 {  /**   * 动画的三种颜色   */  private int mtopcolor;  private int mleftcolor;  private int mRightcolor;  private Paint mPaint;  /**   * 扫描角度，用于控制圆弧的长度   */  private float sweepAngle;  /**   * 开始角度，用于控制圆弧的显示位置   */  private float startAngle;  /**   * 当前角度，记录圆弧旋转的角度   */  private float curStartAngle;  /**   * 用动画控制圆弧显示   */  private ValueAnimator mValueAnimator;  /**   * 每个周期的时长   */  private int mDuration;  /**   * 圆弧线宽   */  private float mstrokeWIDth;  /**   * 动画过程中最大的圆弧角度   */  private int mMaxSweepAngle;  /**   * 是否自动开启动画   */  private boolean mautoStart;  /**   * 用于判断当前动画是否处于Reverse状态   */  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,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) {      // 对于不规范值直接采用默认值      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度，是为了显示小圆点    sweepAngle = -1;    startAngle = -90;    curStartAngle = startAngle;    // 扩展动画    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,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);    // 确定动画位置    float left = (wIDth - sIDe) / 2F;    float top = (height - sIDe) / 2F;    float right = left + sIDe;    float bottom = top + sIDe;    // 绘制圆弧    mPaint.setcolor(mtopcolor);    canvas.drawArc(left,mPaint);    mPaint.setcolor(mleftcolor);    canvas.drawArc(left,mPaint);    mPaint.setcolor(mRightcolor);    canvas.drawArc(left,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();  }  /**   * 开始动画   */  public voID start() {    if (!mValueAnimator.isstarted()) {      mValueAnimator.start();    }  }  /**   * 暂停动画   */  public voID pause() {    if (mValueAnimator.isRunning()) {      mValueAnimator.pause();    }  }  /**   * 继续动画   */  public voID resume() {    if (mValueAnimator.isPaused()) {      mValueAnimator.resume();    }  }  /**   * 停止动画   */  public voID stop() {    if (mValueAnimator.isstarted()) {      mReverse = false;      mValueAnimator.end();    }  }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

总结

以上是内存溢出为你收集整理的一个简单的Android圆弧刷新动画全部内容，希望文章能够帮你解决一个简单的Android圆弧刷新动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。