首页 >Android相关

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

2018-02-26 14:37 编辑: yyuuzhu 分类:Android相关 来源:chiyidun

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

2.gif

原理

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

2d1739b17d391880bf32dba5b6767b51f1c43880.jpg

黄色代表目标图像,即先绘制图像;蓝色代表了源图像,即后绘制图像。

我们这里需要的SrcIn这种方式合成图像,表现形式为在目标图像和源图像相交的地方显示源图像。我们的目标图像即为各种图片素材,源图像是什么呢?来看一下我没有使用图像合成的表现:

2.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

作者:chiyidun

链接:https://www.jianshu.com/p/c4adeb801677


搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:【Android】在任意位置弹出PopupWindow
下一篇:Android P首个开发者预览版发布:适配"刘海"设计

相关资讯

我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部