这种loading方式你肯定见过，仿今日头条，代码就这么多点

一种很常见的Loading方式，初次是在今日头条中看见的，但由于没找到相应素材，就只好拿这几家开刀了。来看一下效果。

ezgif.com-resize (1).gif

原理

即运用PorterDuff.Mode进行图像合成。上一张图：

2041548-d964105abf4be5d9[1].jpg

黄色代表目标图像，即先绘制图像；蓝色代表了源图像，即后绘制图像。
我们这里需要的SrcIn这种方式合成图像，表现形式为在目标图像和源图像相交的地方显示源图像。我们的目标图像即为各种图片素材，源图像是什么呢？来看一下我没有使用图像合成的表现

ezgif.com-resize.gif

：
一目了然对不对？知道了原理，接下来就可以写代码了~

实现

自定义view实现 ，代码量不多，我就直接上完整的：

public class LoadingText extends View {
    private Paint mPaint=new Paint();
    private Bitmap dstBmp;
    private RectF dstRect;
    private RectF rectF =new RectF();
    private float percent;
    private float mMoveWidth=50; //移动view宽度

    private Xfermode mXfermode;
    private PorterDuff.Mode mPorterDuffMode = PorterDuff.Mode.SRC_IN;


    public LoadingText(@NonNull Context context) {
        super(context);
        init();
    }

    public LoadingText(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public LoadingText(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();

    }

    private void init() {
        mXfermode = new PorterDuffXfermode(mPorterDuffMode);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int resultW = widthSize;
        int resultH = heightSize;

        if(widthMode==MeasureSpec.AT_MOST){
            resultW=dstBmp.getWidth();
        }
        if(heightMode==MeasureSpec.AT_MOST){
            resultH=dstBmp.getHeight();
        }
        setMeasuredDimension(resultW,resultH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //将绘制操作保存到新的图层，因为图像合成是很昂贵的操作，将用到硬件加速，这里将图像合成的处理放到离屏缓存中进行
        int saveCount = canvas.saveLayer(dstRect, mPaint, Canvas.ALL_SAVE_FLAG);

        mPaint.setFilterBitmap(true);
        mPaint.setAntiAlias(true);
        //绘制目标图
        canvas.drawBitmap(dstBmp, null, dstRect, mPaint);
        // 设置混合模式
        mPaint.setXfermode(mXfermode);

        mPaint.setColor(getResources().getColor(R.color.srcColor));
        mPaint.setStyle(Paint.Style.FILL);
        // 绘制源图
        rectF.set(percent *(getWidth()+getHeight())-getHeight(), 0, percent *(getWidth()+getHeight())-getHeight() + mMoveWidth, getHeight());

        canvas.skew(0.5f,0);
        canvas.drawRect(rectF, mPaint);
        // 清除混合模式
        mPaint.setXfermode(null);
        // 还原画布
        canvas.restoreToCount(saveCount);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        dstRect=new RectF(0,0,getWidth(),getHeight());
    }


    private void startAnim() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
        valueAnimator.setDuration(1000);
        valueAnimator.setRepeatCount(-1);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                percent = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

    public void setBitmap(int drawableId){
        dstBmp = BitmapFactory.decodeResource(getResources(), drawableId);
    }

    public void start(){
        startAnim();
    }

1.设置PorterDuff.Mode mPorterDuffMode = PorterDuff.Mode.SRC_IN;
创建Xfermode子类对象 mXfermode = new PorterDuffXfermode(mPorterDuffMode);
2.ondraw方法中首先绘制目标图canvas.drawBitmap(dstBmp, null, dstRect, mPaint)，即绘制我们的素材图片
，然后设置画笔混合模式mPaint.setXfermode(mXfermode);接下来绘制源图canvas.drawRect(rectF, mPaint);
3 startAnim中使用ValueAnimator 改变源图绘制起点,从而达到源图的横向移动效果。

代码这么少？完事了~拜拜。

参考文章：各个击破搞明白PorterDuff.Mode