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

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