上一篇对自定义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中，然后在里面定义几个全局变量就好了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。