实现骨架shimmer 的加载效果

前几日要做一个加载的进度条样式，如图。gif的效果一般，再说明一下

底色是蓝色，左到右边是渐变色，浅蓝到深蓝。在这基础之上，会有一个白色透明模块，不断划过蓝色区域，形成一种加载的动效。这种动画也叫骨架动效。facebook有个框架叫shimmer.大家github搜索。

这里面涉及几个点：

1.渐变的背景色

这个效果简单，之前给view设置背景即可

<com.lll.testshimmer.TestView
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:background="@drawable/shape_gradient"
    />

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="0"
        android:endColor="#FF2870FF"
        android:startColor="#CC2870FF" />
</shape>

2.滑动的动效

1.首先实现一个过渡色

自定义一个view,然后onDraw()里，绘制一个shader，这里使用LinearGradient ,线性着色对象。着色一个rect 区域，这个rect 又被分为三块分别着色，中间为亮白，边缘为透明白，形成一种渐变的效果。如果对shader不了解，可以搜搜

效果：
可能这样看不出来效果

换个颜色

这样的话，看着就好多了，边缘浅，中间深，这样再实现快速滑动，就会实现最终的效果。

   private int edge_color = Color.parseColor("#00FFFFFF");
   private int center_color = Color.parseColor("#33FFFFFF");

   protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mViewWidth = getMeasuredWidth();
        if (mViewWidth > 0) {
            mTranslate += mViewWidth / 10;

            Log.d(TAG, "onSizeChanged() mViewWidth= [" + mViewWidth + "], mTranslate = [" + mTranslate + "]");
            if (mTranslate > mViewWidth + shimer_width) {
                mTranslate = 0;
            }
        }
        Log.d(TAG, "onDraw: mTranslate=" + mTranslate);
        LinearGradient linearGradient =
                new LinearGradient(mTranslate, 0, mTranslate + shimer_width, 0, mColors, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);

        canvas.drawRect(mTranslate, 0, mTranslate + shimer_width, getHeight(), mPaint);

        postInvalidateDelayed(50);
    }

LinearGradient 属于shader的子类，实现了线性着色的逻辑。且可以绘制多个点，不同的方向来着色。

参数：
float x0, float y0：起点坐标
float x1, float y1：终点坐标
int[] colors：颜色集，如果多个颜色，默认平分绘制
float[] positions:颜色绘制的比例 范围：0-1
TileMode tile：绘制的类型；

 /**
     * Create a shader that draws a linear gradient along a line.
     *
     * @param x0           The x-coordinate for the start of the gradient line
     * @param y0           The y-coordinate for the start of the gradient line
     * @param x1           The x-coordinate for the end of the gradient line
     * @param y1           The y-coordinate for the end of the gradient line
     * @param colors       The sRGB colors to be distributed along the gradient line
     * @param positions    May be null. The relative positions [0..1] of
     *                     each corresponding color in the colors array. If this is null,
     *                     the the colors are distributed evenly along the gradient line.
     * @param tile         The Shader tiling mode
     */
    public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int[] colors,
            @Nullable float[] positions, @NonNull TileMode tile) {
        this(x0, y0, x1, y1, convertColors(colors), positions, tile,
                ColorSpace.get(ColorSpace.Named.SRGB));
    }

2. 实现滑动

我们这绘制完着色区域后，就可以实现滑动了。onDraw执行的最后，执行 postInvalidateDelayed(50); 让view刷新，执行onDraw方法，不断计算坐标距离，让Rect的这个区域的坐标动起来，就会形成动效的样子。

   postInvalidateDelayed(50);

3.整体code

public class TestView extends View {
    public TestView(Context context) {
        super(context);
    }

    public TestView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public TestView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //    private int edge_color = Color.parseColor("#00FFFFFF");
//    private int center_color = Color.parseColor("#33FFFFFF");
    private int edge_color = Color.parseColor("#36EFD707");
    private int center_color = Color.parseColor("#E8EFD707");
    int[] mColors = {edge_color, center_color, edge_color};
    private Paint mPaint = new Paint();
    private int mViewWidth = 0;
    private int mTranslate = 100;
    private int shimer_width = 100;

    private static final String TAG = "TestView";


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mViewWidth = getMeasuredWidth();
        if (mViewWidth > 0) {
            mTranslate += mViewWidth / 10;

            Log.d(TAG, "onSizeChanged() mViewWidth= [" + mViewWidth + "], mTranslate = [" + mTranslate + "]");
            if (mTranslate > mViewWidth + shimer_width) {
                mTranslate = 0;
            }
        }
        Log.d(TAG, "onDraw: mTranslate=" + mTranslate);
        LinearGradient linearGradient =
                new LinearGradient(mTranslate, 0, mTranslate + shimer_width, 0, mColors, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);

        canvas.drawRect(mTranslate, 0, mTranslate + shimer_width, getHeight(), mPaint);

        postInvalidateDelayed(50);
    }
}