android树叶掉落效果,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中，然后在里面定义几个全局变量就好了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。