一种很常见的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 改变源图绘制起点,从而达到源图的横向移动效果。
代码这么少？完事了~拜拜。
