Android自定義View新年煙花、祝福語橫幅動(dòng)畫

更新時(shí)間：2018年01月24日 09:13:38 作者：匆忙擁擠repeat

這篇文章主要為大家詳細(xì)介紹了Android自定義View新年煙花、祝福語橫幅動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

新年了，項(xiàng)目中要作個(gè)動(dòng)畫，整體要求實(shí)現(xiàn)彩帶亂飛，煙花沖天而起，煙花縮放，小雞換圖，小雞飄移，橫幅裁剪、展開等動(dòng)畫效果，全局大量使用了屬性動(dòng)畫來實(shí)現(xiàn)。

如下效果圖：

我在實(shí)現(xiàn)過程中，橫幅的裁剪計(jì)算，搗騰了比較久的時(shí)間，初版采用屬性動(dòng)畫計(jì)算float的一個(gè)比率值，來配合每一幀的裁剪繪制，如下代碼：

private static class RollView extends View { 
 private Bitmap mBitmap; 
 private Rect mSrc; 
 private Rect mDst; 
 private int mRollWidth = 60; 
 private float mRate; 
 private boolean mIsStopAnim; 
 
 public RollView(Context context) { 
  super(context); 
  mSrc = new Rect(); 
  mDst = new Rect(); 
 } 
 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 } 
 
 @Override 
 protected void onDraw(Canvas canvas) { 
  if (mBitmap == null) return; 
 
  drawFromMiddleByFloatCompute(canvas); 
 
 } 
 
 private void drawFromMiddleByFloatCompute(Canvas canvas) { 
  /* 
  以下src 都需要加上mBitmap. 的前綴，， 因從drawable拿到的是原始圖片寬高 
  而適配時(shí)，可能view的寬高比 drawable的寬高還小或大 
  */ 
  final float rate = mRate; 
 
  mSrc.left = 0; 
  mSrc.top = 0; 
  mSrc.right = mRollWidth; 
  mSrc.bottom = mBitmap.getHeight(); 
 
  mDst.left = (int) ((getWidth() / 2 - mRollWidth) - (getWidth() / 2 - mRollWidth) * rate); 
  mDst.top = 0; 
  mDst.right = mDst.left + mRollWidth + 1;//因精度問題，這里強(qiáng)制+1 
  mDst.bottom = getHeight(); 
  canvas.drawBitmap(mBitmap, mSrc, mDst, null); 
 
  //中間 
  int sw = (int) ((mBitmap.getWidth() - mRollWidth * 2) * rate); 
  mSrc.left = mBitmap.getWidth() / 2 - sw / 2; 
  mSrc.top = 0; 
  mSrc.right = mSrc.left + sw; 
  mSrc.bottom = mBitmap.getHeight(); 
 
  int dw = (int) ((getWidth() - mRollWidth * 2) * rate); 
  mDst.left = getWidth() / 2 - dw / 2; 
  mDst.top = 0; 
  mDst.right = mDst.left + dw; 
  mDst.bottom = getHeight(); 
  canvas.drawBitmap(mBitmap, mSrc, mDst, null); 
 
  //右邊 
  mSrc.left = mBitmap.getWidth() - mRollWidth; 
  mSrc.top = 0; 
  mSrc.right = mBitmap.getWidth(); 
  mSrc.bottom = mBitmap.getHeight(); 
 
  mDst.left = (int) (getWidth() / 2 + (getWidth() / 2 - mRollWidth) * rate); 
  mDst.top = 0; 
  mDst.right = mDst.left + mRollWidth; 
  mDst.bottom = getHeight(); 
 
  canvas.drawBitmap(mBitmap, mSrc, mDst, null); 
 } 
 
 public void setRes(int resId) { 
  mBitmap = getBitmapFromLocal(resId); 
 } 
 
 @RequiresApi(api = Build.VERSION_CODES.HONEYCOMB) 
 public void startFloatComputeAnim() { 
  /* 
  如果有float獲取比率值，從而計(jì)算出相應(yīng)的坐標(biāo)值，那么可能由于最終在轉(zhuǎn)成Rect的坐標(biāo)時(shí)， 
  float to int ，有精度的損失：1個(gè)px 而引起效果的不理想 
  */ 
  ValueAnimator animator = ValueAnimator.ofFloat(0, 1); 
  animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
  @Override 
  public void onAnimationUpdate(ValueAnimator animation) { 
   if (mIsStopAnim) { 
   animation.cancel(); 
   return; 
   } 
   mRate = (float) animation.getAnimatedValue(); 
   invalidate(); 
 
  } 
  }); 
  animator.setDuration(2000); 
  animator.start(); 
 } 
 
 public void stopAnim() { 
  mIsStopAnim = true; 
 } 
 }

> 因float轉(zhuǎn)int有一個(gè)精度損失的問題，所以在計(jì)算中強(qiáng)制加上了1px(代碼中有)；
這樣雖然解決了有1px沒有繪制的問題，但是會(huì)發(fā)生繪制時(shí)不夠平滑，而出現(xiàn)抖動(dòng)的情形(在某些devices上)
所以最好還是不要使用float來計(jì)算
> 后來，同事猜想使用一個(gè)固定int值來參與計(jì)算，可能可以解決上述問題：
比如每秒30幀，這里動(dòng)畫時(shí)長(zhǎng)2秒，即共30*2=60幀；
圖片寬度、左畫軸、右畫軸對(duì) 60幀數(shù) 做相應(yīng)的除法及其他計(jì)算，可得出一個(gè)單幀中它們應(yīng)該運(yùn)動(dòng)的x距離
> 之后，我又想了一種，使用一個(gè)屬性動(dòng)畫，來計(jì)算出從0到getWidth()之間的動(dòng)畫值，
從而通過計(jì)算，使得橫幅從左向右拉開，如下：