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

cb0d6a8b92230ab7c1223ab4f9f3cf4e.gif

主要技术点

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);

}

e518956fdac61c85ad5d8cc38743f17c.png

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画布区域

3098314f0a91179a0c6d265217f03867.png

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什么都没定义,所以默认如下显示,左上角叶子

ed7fe4eefd29db95479b5476ce9c5893.png

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没有设置动画时间长度概念,所以通过时间差来计算出位移值的方式,来设置滑动快慢

df33555c69977ff33c6e2e36d102c4f7.gif

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐