首页 > 系统 > Android > 正文

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

2019-12-12 03:18:13
字体:
来源:转载
供稿:网友

上一篇对自定义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中,然后在里面定义几个全局变量就好了。

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

发表评论 共有0条评论
用户名: 密码:
验证码: 匿名发表