欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义View实现飘动的叶子效果(三)

程序员文章站 2023-11-28 15:50:28
上一篇对自定义view及一些方法有所了解,下面做一个简单的叶子飘动的例子 主要技术点 1、添加背景图片canvas.drawbitmap() 2、matrix动画...

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

Android自定义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);
}

Android自定义View实现飘动的叶子效果(三)

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

Android自定义View实现飘动的叶子效果(三)

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

Android自定义View实现飘动的叶子效果(三)

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

Android自定义View实现飘动的叶子效果(三)

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

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