观心静

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

 

转载地址:https://blog.csdn.net/mengks1987/article/details/77770922

先来看下效果: 

是不是有一种熟悉感,其实这种效果使用序列帧动画也是可以实现的,这里我们介绍下如何使用自定义View实现。 
这是我们的素材,一张图片上有5个京东小哥

我们只需要不停的变换小哥就好了,原理明白了我们看下代码:

public class JDLoadingView extends View {

    private Bitmap bitmap;

    private int index = 0;

    private Paint paint;

    private long lastTime = 0;

    public JDLoadingView(Context context) {
        this(context,null);
    }

    public JDLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public JDLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr,0);
    }

    public JDLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.jd);
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第2个和第3个一样的,作图的时候重复了,所以抛弃第二个
        if(index == 2){
            index = 3;
        }
        //计算显示第几个小哥
        int left = bitmap.getWidth()/5*index;
        int top =0;
        int right = bitmap.getWidth()/5*(index+1);
        int bottom = bitmap.getHeight();
        //显示一个京东小哥
        canvas.drawBitmap(bitmap,new Rect(left,top,right,bottom),new Rect(0,0,getWidth(),getHeight()),paint );
        index++;
        //显示到最后一个,再次从头开始显示
        if(index >=5){
            index = 0;
        }
        //100ms以后刷新
        postInvalidateDelayed(100);
    }
}

重点地方加上了注释,只要原理明白了,实现还是很简单的。

posted on 2018-07-03 11:59  观心静  阅读(330)  评论(0编辑  收藏  举报