您的位置：首页 > 移动开发 > Android开发

Android自定义View实现飘动的叶子效果（三）

2017-03-23 10:25 513 查看

上一篇对自定义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中，然后在里面定义几个全局变量就好了。

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Android View 飘动叶子

相关文章推荐

新的分享

章节导航