如何在Android項目中實現一個自旋轉圓環特效

本文章向大家介紹如何在Android項目中實現一個自旋轉圓環特效的基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。

Android是什么

Android是一種基于Linux內核的自由及開放源代碼的操作系統，主要使用于移動設備，如智能手機和平板電腦，由美國Google公司和開放手機聯盟領導及開發。

實現思路：

1.首先是黑色底色圓環的繪制(黑色圈是固定不變的)。

2.在繪制好黑色底色圓環之后再繪制漸變色圓弧(藍綠部分)。

3.最后繪制小星星部分，使用一張模糊圖片得到bitmap，并通過PathMeasure進行路徑繪制。

代碼實現：

/**
 * Created by jiangzn on 17/2/3.
 */
public class RoundLightBarView extends ImageView {
  private int mTotalWidth, mTotalHeight;
  private int mCenterX, mCenterY;
  //底色畫筆
  private Paint mCirclePaint;
  //進度條畫筆
  private Paint mProgressPaint;
  //圓點畫筆
  private Paint mbitmapPaint;
  private Matrix mMatrix; // 矩陣,用于對圖片進行一些操作
  private float[] pos;   // 當前點的實際位置
  private float[] tan;   // 當前點的tangent值,用于計算圖片所需旋轉的角度
 
 
  private int mCircleR;
 
 
  private Context mContext;
  //距離外圍的邊距
  private float interval ;
 
  private int startAngle = 1;
 
  //球
  private Bitmap mLititleBitmap; // 圓點圖片
 
  public RoundLightBarView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
 
  }
 
  public RoundLightBarView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mContext = context;
    interval = DensityUtils.px2dip(mContext, 50);
    //初始化畫筆
    initPaint();
    //初始化bitmap
    initBitmap();
  }
 
  private void initBitmap() {
    mMatrix=new Matrix();
    pos = new float[2];
    tan = new float[2];
    mLititleBitmap= ((BitmapDrawable) getResources()
        .getDrawable(R.mipmap.white_round))
        .getBitmap();
  }
 
  private void initPaint() {
    //畫黑底的深色圓畫筆
    mCirclePaint = new Paint();
    //抗鋸齒
    mCirclePaint.setAntiAlias(true);
    // 防抖動
    mCirclePaint.setDither(true);
    // 開啟圖像過濾，對位圖進行濾波處理。
    mCirclePaint.setFilterBitmap(true);
    mCirclePaint.setColor(Color.BLACK);
    //空心圓
    mCirclePaint.setStyle(Paint.Style.STROKE);
    //圓半徑
    mCircleR = DensityUtils.px2dip(mContext, 20);
    mCirclePaint.setStrokeWidth(mCircleR);
 
    //畫彩色圓弧的畫筆
    mProgressPaint = new Paint();
    //抗鋸齒
    mProgressPaint.setAntiAlias(true);
    // 防抖動
    mProgressPaint.setDither(true);
    // 開啟圖像過濾，對位圖進行濾波處理。
    mProgressPaint.setFilterBitmap(true);
    mProgressPaint.setColor(Color.BLUE);
    //空心圓
    mProgressPaint.setStyle(Paint.Style.STROKE);
    //設置筆刷樣式為原型
    mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
    //設置圓弧粗
    mProgressPaint.setStrokeWidth(mCircleR);
    //將繪制的內容顯示在第一次繪制內容之上
    mProgressPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
 
 
    //圓點畫筆
    mbitmapPaint = new Paint();
    mbitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
    mbitmapPaint.setStyle(Paint.Style.FILL);
    mbitmapPaint.setAntiAlias(true);
 
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //canvas去鋸齒
    canvas.setDrawFilter(
        new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
    //畫底色圓
    canvas.drawCircle(mCenterX, mCenterY, mCenterX - mCircleR - interval, mCirclePaint);
    //畫進度條
    int colorSweep[] = {Color.TRANSPARENT, Color.parseColor("#3bbaea"),Color.parseColor("#7ac9d3"),Color.parseColor("#7cc9d0")};
 
    //設置漸變色
    sweepGradient = new SweepGradient(mCenterX, mCenterY, colorSweep, null);
    //按照圓心旋轉
    Matrix matrix = new Matrix();
    matrix.setRotate(startAngle, mCenterX, mCenterY);
    sweepGradient.setLocalMatrix(matrix);
 
    mProgressPaint.setShader(sweepGradient);
 
    canvas.drawArc(
        new RectF(0 + mCircleR + interval, 0 + mCircleR + interval,
            mTotalWidth - mCircleR - interval, mTotalHeight - mCircleR - interval),
        2 + startAngle, 350, false, mProgressPaint);
 
    startAngle++;
    if (startAngle == 360) {
      startAngle = 1;
    }
 
    //繪制白色小星星
    Path orbit = new Path();
    //通過Path類畫一個90度（180—270）的內切圓弧路徑
    orbit.addArc(
        new RectF(0 + mCircleR + interval, 0 + mCircleR + interval,
            mTotalWidth - mCircleR - interval, mTotalHeight - mCircleR - interval)
        , 2 + startAngle, 350);
    // 創建 PathMeasure
    PathMeasure measure = new PathMeasure(orbit, false);
    measure.getPosTan(measure.getLength() * 1, pos, tan);
    mMatrix.reset();
    mMatrix.postScale(2,2);
    mMatrix.postTranslate(pos[0] - mLititleBitmap.getWidth() , pos[1] - mLititleBitmap.getHeight() );  // 將圖片繪制中心調整到與當前點重合
    canvas.drawBitmap(mLititleBitmap, mMatrix, mbitmapPaint);//繪制球
    mbitmapPaint.setColor(Color.WHITE);
    //繪制實心小圓圈
    canvas.drawCircle(pos[0], pos[1], 5, mbitmapPaint);
 
    //啟動繪制
    postInvalidateDelayed(10);
  }
 
  SweepGradient sweepGradient;
 
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mTotalWidth = w;
    mTotalHeight = h;
    mCenterX = mTotalWidth / 2;
    mCenterY = mTotalHeight / 2;
 
 
  }
 
}

總結：

總體實現難度并不大，復習了自定義View和canvas的知識點。

其中需要重視的點在繪圖層需要注意給畫筆添加覆蓋模式：setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP))，將繪制的內容顯示在第一次繪制的內容之上，還有一個比較難的點是PathMeasure進行對bitmap的路徑收集和方向控制并繪制小星星的過程：

 // 創建 PathMeasure
    PathMeasure measure = new PathMeasure(orbit, false);
    measure.getPosTan(measure.getLength() * 1, pos, tan);
    mMatrix.reset();
    mMatrix.postScale(2,2);
    mMatrix.postTranslate(pos[0] - mLititleBitmap.getWidth() , pos[1] - mLititleBitmap.getHeight() );  // 將圖片繪制中心調整到與當前點重合
    canvas.drawBitmap(mLititleBitmap, mMatrix, mbitmapPaint);//繪制球
    mbitmapPaint.setColor(Color.WHITE);
    //繪制實心小圓圈
    canvas.drawCircle(pos[0], pos[1], 5, mbitmapPaint);

以上就是小編為大家帶來的如何在Android項目中實現一個自旋轉圓環特效的全部內容了，希望大家多多支持億速云！