Android自定義View實現(xiàn)飄動的葉子效果（三）

2019-12-12 03:18:13

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

上一篇對自定義View及一些方法有所了解，下面做一個簡單的葉子飄動的例子

主要技術(shù)點

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畫布區(qū)域

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什么都沒定義，所以默認(rèn)如下顯示，左上角葉子

4、給葉子添加Matrix動畫

Matrix作用：

a、translate 平移

b、rotate 旋轉(zhuǎn)

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());  //重復(fù)調(diào)用onDraw()  postInvalidate(); } long cycleTime = 5000; //葉子滑動一周的時間5秒 long startTime = 0;  //葉子滑動開始時間 private float getMatriX() {  float betweenTime = startTime - System.currentTimeMillis();  //周期結(jié)束再加一個cycleTime  if(betweenTime < 0) {   startTime = System.currentTimeMillis() + cycleTime;   betweenTime = cycleTime;  }  //通過時間差計算出葉子的坐標(biāo)  float fraction = (float) betweenTime / cycleTime;  float x = (int)(width * fraction);  return x; }

好了，看到的效果就是如下，由于Matrix沒有設(shè)置動畫時間長度概念，所以通過時間差來計算出位移值的方式，來設(shè)置滑動快慢