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中,然后在里面定义几个全局变量就好了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 自制面膜大全祛斑美白(省钱还效果好)
下一篇: K-Means 概要及其实现代码