Android 自定义View(三) 飘动叶子

上一篇对自定义View及一些方法有所了解，下面做一个简单的叶子飘动的例子

主要技术点

---

1、添加背景图片canvas.drawBitmap()

2、Matrix动画类

3、Matrix添加到画布上

步骤

---

1、添加黄色背景颜色

public LeafView(Context context, AttributeSet attrs) {
        super(context, attrs);
        bgPaint = new Paint();
        bgPaint.setColor(mResources.getColor(R.color.bg_color));
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bgRect = new RectF(0, 0 , width, height);
        canvas.drawRect(bgRect, bgPaint);
}

2、添加背景图片

 public LeafView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mResources = getResources();
        bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();
        bgPaint = new Paint();
        bgPaint.setColor(mResources.getColor(R.color.bg_color));
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        bgDestRect = new Rect(0, 0 , width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bgRect = new RectF(0, 0 , width, height);
        canvas.drawRect(bgRect, bgPaint);
        canvas.drawBitmap(bgBitmap, null, bgDestRect, null);
}

canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) 添加图片到画布

Rect src：图片剪裁,null图片显示全屏，  RectF dst：图片在Canvas画布区域

3、添加叶子

public LeafView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mResources = getResources();
        bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();
       leafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf, null))).getBitmap();
        bgPaint = new Paint();
        bgPaint.setColor(mResources.getColor(R.color.bg_color));
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        bgDestRect = new Rect(0, 0 , width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bgRect = new RectF(0, 0 , width, height);
       //添加黄色背景
        canvas.drawRect(bgRect, bgPaint);
       //添加背景图片
        canvas.drawBitmap(bgBitmap, null, bgDestRect, null);
       //添加叶子
       canvas.drawBitmap(leafBitmap, new Matrix(), new Paint());
}

canvas.drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)添加一个带动画的bitmap到画布

这里matrix什么都没定义，所以默认如下显示，左上角叶子

4、给叶子添加Matrix动画

Matrix作用：

a、translate 平移

b、rotate 旋转

c、scale 缩放

d、skew 倾斜

这里要用到matrix.postTranslate(float x, float y)，以画布左上角为(0,0); xy为平移绝对值

public LeafView(Context context, AttributeSet attrs) {
       super(context, attrs);
       mResources = getResources();
       bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();
       leafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf, null))).getBitmap();
      mLeafHeight = leafBitmap.getWidht();     

        bgPaint = new Paint();
        bgPaint.setColor(mResources.getColor(R.color.bg_color));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        bgDestRect = new Rect(0, 0 , width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bgRect = new RectF(0, 0 , width, height);
       //添加黄色背景
        canvas.drawRect(bgRect, bgPaint);
       //添加背景图片
        canvas.drawBitmap(bgBitmap, null, bgDestRect, null);
       //添加叶子
       Matrix matrix = new Matrix();
       matrix.postTranslate(getMatriX(), (height-mLeadHeight)/2);
        canvas.drawBitmap(leafBitmap, new Matrix(), new Paint());
       //重复调用onDraw()
       postInvalidate();
    }
    long cycleTime = 5000;   //叶子滑动一周的时间5秒
    long startTime = 0;      //叶子滑动开始时间
    private float getMatriX() {
        float betweenTime = startTime - System.currentTimeMillis();
        //周期结束再加一个cycleTime
        if(betweenTime < 0) {
            startTime = System.currentTimeMillis() + cycleTime;
            betweenTime = cycleTime;
        }
        //通过时间差计算出叶子的坐标
        float fraction = (float) betweenTime / cycleTime;
        float x = (int)(width * fraction);
        return x;
    }

好了，看到的效果就是如下，由于Matrix没有设置动画时间长度概念，所以通过时间差来计算出位移值的方式，来设置滑动快慢

完整代码不贴了，就把上面这段代码复制到一个LeafView extends View中，然后在里面定义几个全局变量就好了