Android漸變色的圓弧虛線

在學習Android的paint類的時候學習了 PathEffect 路徑效果和 Shader 渲染效果。做了下面的一個效果的自定義的view組主要是用DashPathEffect、SweepGradient的API形成的效果。下面是效果圖：

Android漸變色的圓弧虛線

1，SweepGradient(梯度渲染)

public SweepGradient (float cx, float cy, int[] colors, float[] positions)

掃描渲染，就是以某個點位中心旋轉一周所形成的效果！參數依次是：

cx：掃描的中心x坐標

cy：掃描的中心y坐標

colors：梯度漸變的顏色數組

positions：指定顏色數組的相對位置

public static final int[] SWEEP_GRADIENT_COLORS = new int[]{Color.GREEN, Color.GREEN, Color.BLUE, Color.RED, Color.RED};
mColorShader = new SweepGradient(radius, radius,SWEEP_GRADIENT_COLORS,null);

效果圖：

SweepGradient

2，DashPathEffect(Path的線段虛線化)

DashPathEffect(float[] intervals, float phase)

intervals：為虛線的ON和OFF的數組，數組中元素數目需要 >= 2

phase：為繪制時的偏移量

//計算路徑的長度
PathMeasure pathMeasure = new PathMeasure(mPath, false);
float length = pathMeasure.getLength();
float step = length / 60;
dashPathEffect = new DashPathEffect(new float[]{step / 3, step * 2 / 3}, 0);

效果圖：

DashPathEffect

3，下面是全部的代碼：

package com.example.yyw.xfermodedemo;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by yyw on 2016/10/11.
 */

public class OilTableLine extends View {
    public static final int[] SWEEP_GRADIENT_COLORS = new int[]{Color.GREEN, Color.GREEN, Color.BLUE, Color.RED, Color.RED};
    private int tableWidth = 50;
    private Paint mPaint;
    private Path mPath;
    private RectF mTableRectF;
    //把路徑分成虛線段的
    private DashPathEffect dashPathEffect;
    //給路徑上色
    private SweepGradient mColorShader;
    //指針的路徑
    private Path mPointerPath;
    private float mCurrentDegree = 60;

    public OilTableLine(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(Color.BLACK);
        mPath = new Path();
        mPointerPath = new Path();
        startAnimator();

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        float size = Math.min(w, h) - tableWidth * 2;
        //油表的位置方框
        mTableRectF = new RectF(0, 0, size, size);
        mPath.reset();
        //在油表路徑中增加一個從起始弧度
        mPath.addArc(mTableRectF, 60, 240);
        //計算路徑的長度
        PathMeasure pathMeasure = new PathMeasure(mPath, false);
        float length = pathMeasure.getLength();
        float step = length / 60;
        dashPathEffect = new DashPathEffect(new float[]{step / 3, step * 2 / 3}, 0);

        float radius = size / 2;
        mColorShader = new SweepGradient(radius, radius,SWEEP_GRADIENT_COLORS,null);
        //設置指針的路徑位置
        mPointerPath.reset();
        mPointerPath.moveTo(radius, radius - 20);
        mPointerPath.lineTo(radius, radius + 20);
        mPointerPath.lineTo(radius * 2 - tableWidth, radius);
        mPointerPath.close();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float dx = (getWidth() - mTableRectF.width()) / 2;
        float dy = (getHeight() - mTableRectF.height()) / 2;
        //把油表的方框平移到正中間
        canvas.translate(dx, dy);
        canvas.save();
        //旋轉畫布
        canvas.rotate(90, mTableRectF.width() / 2, mTableRectF.height() / 2);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(tableWidth);
        mPaint.setPathEffect(dashPathEffect);
        mPaint.setShader(mColorShader);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        //還原畫筆
        mPaint.setPathEffect(null);
        mPaint.setShader(null);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(tableWidth / 10);
        canvas.save();
        canvas.rotate(150 + mCurrentDegree, mTableRectF.width() / 2, mTableRectF.height() / 2);
        canvas.drawPath(mPointerPath, mPaint);
        canvas.restore();
    }

    public void startAnimator() {
        ValueAnimator animator = ValueAnimator.ofFloat(0, 240);
        animator.setDuration(40000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentDegree = (int) (0 + (Float) animation.getAnimatedValue());
                invalidate();
            }
        });
        animator.start();
    }
}

來自：http://www.jianshu.com/p/92bf75e41fff