Android仿微信圖片點(diǎn)擊瀏覽的效果

更新時間：2016年09月05日 10:09:11 作者：huaxun66

這篇文章主要為大家詳細(xì)介紹了Android仿微信圖片點(diǎn)擊瀏覽的效果，Android 2D平滑放大顯示ImageView,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本篇我們來做一個類似于微信的圖片點(diǎn)擊瀏覽的效果，點(diǎn)擊小圖圖片后會放大至全屏顯示，且中間有一個2D平滑過渡的效果。

思路如下：

首先，從圖片縮略界面跳轉(zhuǎn)到圖片詳情頁面，應(yīng)該是從一個Activity跳轉(zhuǎn)到另外一個Activity，應(yīng)該圖片詳情頁面也有很多操作，用View或者Dialog不是很好。所以現(xiàn)在難點(diǎn)就是，如何使得前一個界面的ImageView在另外一個界面做縮放切割動畫。
其次，一般縮略界面的ImageView的是正方形的，并且是CENTER_CROP縮放屬性的。CENTER_CROP屬性會導(dǎo)致ImageView中顯示的Bitmap有被切割達(dá)到填充的效果。
而詳情頁面的ImageView一般都是FIT_CENTER的縮放屬性。所以要保證這個跳轉(zhuǎn)動畫的流暢，要做如下的變化：

1、Bitmap的縮放，因?yàn)榭s略圖和詳情圖的縮放比例肯定不一樣。
2、Bitmap位置的平移，因?yàn)榭s略圖的位置是不確定的，我們要使他平移到中間。
3、Bitmap的切割，因?yàn)镃ENTER_CROP是切割過得，而FIT_CENTER是沒有切割的，那么兩幅圖顯示的內(nèi)容區(qū)域是不同的，所以也要顯示區(qū)域的平滑變換。

要完成上面的效果，如果單單是指對ImageView做一個動畫變換，我覺得是完成不了這個要求的。所以自己重寫了ImageView來完成上述的變換。

自定義SmoothImageView
•設(shè)置初始信息，主要是初始寬高和位置

 public void setOriginalInfo(int width, int height, int locationX, int locationY) {
  mOriginalWidth = width;
  mOriginalHeight = height;
  mOriginalLocationX = locationX;
  mOriginalLocationY = locationY;
  // 因?yàn)槭瞧聊蛔鴺?biāo)，所以要轉(zhuǎn)換為該視圖內(nèi)的坐標(biāo)，因?yàn)槲宜玫脑撘晥D是MATCH_PARENT，所以不用定位該視圖的位置,如果不是的話，還需要定位視圖的位置，然后計算mOriginalLocationX和mOriginalLocationY
  mOriginalLocationY = mOriginalLocationY - getStatusBarHeight(getContext());
 }

•開始執(zhí)行進(jìn)入或退出動作

 /**
  * 用于開始進(jìn)入的方法。 調(diào)用此方前，需已經(jīng)調(diào)用過setOriginalInfo
  */
 public void transformIn() {
  mState = STATE_TRANSFORM_IN;
  mTransformStart = true;
  invalidate();
 }
 /**
  * 用于開始退出的方法。 調(diào)用此方前，需已經(jīng)調(diào)用過setOriginalInfo
  */
 public void transformOut() {
  mState = STATE_TRANSFORM_OUT;
  mTransformStart = true;
  invalidate();
 }

•進(jìn)入或退出動作立馬會調(diào)用onDraw，重新繪圖

  @Override
 protected void onDraw(Canvas canvas) {
  if (getDrawable() == null) {
   return; // couldn't resolve the URI
  }

  if (mState == STATE_TRANSFORM_IN || mState == STATE_TRANSFORM_OUT) {
   if (mTransformStart) {
    initTransform();
   }
   if (mTransfrom == null) {
    super.onDraw(canvas);
    return;
   }

   if (mTransformStart) {
    if (mState == STATE_TRANSFORM_IN) {
     mTransfrom.initStartIn();
    } else {
     mTransfrom.initStartOut();
    }
   }  
   mPaint.setAlpha(mBgAlpha);
   canvas.drawPaint(mPaint);

   int saveCount = canvas.getSaveCount();
   canvas.save();
   // 先得到圖片在此刻的圖像Matrix矩陣
   getBmpMatrix();
   canvas.translate(mTransfrom.rect.left, mTransfrom.rect.top);
   canvas.clipRect(0, 0, mTransfrom.rect.width, mTransfrom.rect.height);
   canvas.concat(mSmoothMatrix);
   getDrawable().draw(canvas);
   canvas.restoreToCount(saveCount);
   if (mTransformStart) {
    mTransformStart=false;
    startTransform(mState);
   } 
  } else {
   //當(dāng)Transform In變化完成后，把背景改為黑色，使得Activity不透明
   mPaint.setAlpha(255);
   canvas.drawPaint(mPaint);
   super.onDraw(canvas);
  }
 }

onDraw里面又會調(diào)用如下幾步：
•初始化Transfrom，主要是動作執(zhí)行完后圖片的縮放比例、開始區(qū)域和結(jié)束區(qū)域位置信息

  /**
  * 初始化進(jìn)入的變量信息
  */
 private void initTransform() {
  if (getDrawable() == null) {
   return;
  }
  if (mBitmap == null || mBitmap.isRecycled()) {
   mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
  }
  //防止mTransfrom重復(fù)的做同樣的初始化
  if (mTransfrom != null) {
   return;
  }
  if (getWidth() == 0 || getHeight() == 0) {
   return;
  }
  mTransfrom = new Transfrom();

  /** 下面為縮放的計算 */
  /* 計算初始的縮放值，初始值因?yàn)槭荂ENTR_CROP效果，所以要保證圖片的寬和高至少1個能匹配原始的寬和高，另1個大于 */
  float xSScale = mOriginalWidth / ((float) mBitmap.getWidth());
  float ySScale = mOriginalHeight / ((float) mBitmap.getHeight());
  float startScale = xSScale > ySScale ? xSScale : ySScale;
  mTransfrom.startScale = startScale;
  /* 計算結(jié)束時候的縮放值，結(jié)束值因?yàn)橐_(dá)到FIT_CENTER效果，所以要保證圖片的寬和高至少1個能匹配原始的寬和高，另1個小于 */
  float xEScale = getWidth() / ((float) mBitmap.getWidth());
  float yEScale = getHeight() / ((float) mBitmap.getHeight());
  float endScale = xEScale < yEScale ? xEScale : yEScale;
  mTransfrom.endScale = endScale;

  /**
   * 下面計算Canvas Clip的范圍，也就是圖片的顯示的范圍，因?yàn)閳D片是慢慢變大，并且是等比例的，所以這個效果還需要裁減圖片顯示的區(qū)域
   * ，而顯示區(qū)域的變化范圍是在原始CENTER_CROP效果的范圍區(qū)域
   * ，到最終的FIT_CENTER的范圍之間的，區(qū)域我用LocationSizeF更好計算
   * ，他就包括左上頂點(diǎn)坐標(biāo)，和寬高，最后轉(zhuǎn)為Canvas裁減的Rect.
   */
  /* 開始區(qū)域 */
  mTransfrom.startRect = new LocationSizeF();
  mTransfrom.startRect.left = mOriginalLocationX;
  mTransfrom.startRect.top = mOriginalLocationY;
  mTransfrom.startRect.width = mOriginalWidth;
  mTransfrom.startRect.height = mOriginalHeight;
  /* 結(jié)束區(qū)域 */
  mTransfrom.endRect = new LocationSizeF();
  float bitmapEndWidth = mBitmap.getWidth() * mTransfrom.endScale;// 圖片最終的寬度
  float bitmapEndHeight = mBitmap.getHeight() * mTransfrom.endScale;// 圖片最終的寬度
  mTransfrom.endRect.left = (getWidth() - bitmapEndWidth) / 2;
  mTransfrom.endRect.top = (getHeight() - bitmapEndHeight) / 2;
  mTransfrom.endRect.width = bitmapEndWidth;
  mTransfrom.endRect.height = bitmapEndHeight;
  mTransfrom.rect = new LocationSizeF();
 }

•根據(jù)當(dāng)前是進(jìn)入還是退出操作，設(shè)置動作開始前的縮放比和位置

  private class Transfrom {
  float startScale;// 圖片開始的縮放值
  float endScale;// 圖片結(jié)束的縮放值
  float scale;// 屬性ValueAnimator計算出來的值
  LocationSizeF startRect;// 開始的區(qū)域
  LocationSizeF endRect;// 結(jié)束的區(qū)域
  LocationSizeF rect;// 屬性ValueAnimator計算出來的值

  void initStartIn() {
   scale = startScale;
   try {
    rect = (LocationSizeF) startRect.clone();
   } catch (CloneNotSupportedException e) {
    e.printStackTrace();
   }
  }

  void initStartOut() {
   scale = endScale;
   try {
    rect = (LocationSizeF) endRect.clone();
   } catch (CloneNotSupportedException e) {
    e.printStackTrace();
   }
  }  
 }

•開始變換動作，主要是根據(jù)當(dāng)前是進(jìn)入還是退出動作，設(shè)置起始區(qū)域，起始縮放比和結(jié)束區(qū)域，結(jié)束縮放比。然后通過屬性動畫算出中間每個位置的區(qū)域信息和縮放比，在動畫的監(jiān)聽過程中去重新繪制View，從而形成從起始區(qū)域到結(jié)束區(qū)域的一個平滑過渡效果。

  private void startTransform(final int state) {
  if (mTransfrom == null) {
   return;
  }
  ValueAnimator valueAnimator = new ValueAnimator();
  valueAnimator.setDuration(300);
  valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
  if (state == STATE_TRANSFORM_IN) {
   PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.startScale, mTransfrom.endScale);
   PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.startRect.left, mTransfrom.endRect.left);
   PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.startRect.top, mTransfrom.endRect.top);
   PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.startRect.width, mTransfrom.endRect.width);
   PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.startRect.height, mTransfrom.endRect.height);
   PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 0, 255);
   valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
  } else {
   PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.endScale, mTransfrom.startScale);
   PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.endRect.left, mTransfrom.startRect.left);
   PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.endRect.top, mTransfrom.startRect.top);
   PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.endRect.width, mTransfrom.startRect.width);
   PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.endRect.height, mTransfrom.startRect.height);
   PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 255, 0);
   valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
  }

  valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public synchronized void onAnimationUpdate(ValueAnimator animation) {
    mTransfrom.scale = (Float) animation.getAnimatedValue("scale");
    mTransfrom.rect.left = (Float) animation.getAnimatedValue("left");
    mTransfrom.rect.top = (Float) animation.getAnimatedValue("top");
    mTransfrom.rect.width = (Float) animation.getAnimatedValue("width");
    mTransfrom.rect.height = (Float) animation.getAnimatedValue("height");
    mBgAlpha = (Integer) animation.getAnimatedValue("alpha");
    invalidate();
    ((Activity)getContext()).getWindow().getDecorView().invalidate();
   }
  });
  valueAnimator.addListener(new ValueAnimator.AnimatorListener() {
   @Override
   public void onAnimationStart(Animator animation) {

   }

   @Override
   public void onAnimationRepeat(Animator animation) {

   }

   @Override
   public void onAnimationEnd(Animator animation) {
    /*
     * 如果是進(jìn)入的話，當(dāng)然是希望最后停留在center_crop的區(qū)域。但是如果是out的話，就不應(yīng)該是center_crop的位置了
     * ， 而應(yīng)該是最后變化的位置，因?yàn)楫?dāng)out的時候結(jié)束時，不回復(fù)視圖是Normal，要不然會有一個突然閃動回去的bug
     */
    // TODO 這個可以根據(jù)實(shí)際需求來修改
    if (state == STATE_TRANSFORM_IN) {
     mState = STATE_NORMAL;
    }
    if (mTransformListener != null) {
     mTransformListener.onTransformComplete(state);
    }
   }

   @Override
   public void onAnimationCancel(Animator animation) {

   }
  });
  valueAnimator.start();
 }

•最后我們再來看一下動畫繪制過程：
得到圖片的變換矩陣，先根據(jù)當(dāng)前scale對矩陣設(shè)置一個縮放，然后根據(jù)當(dāng)前圖片和顯示區(qū)域差值給矩陣設(shè)置一個平移，從而實(shí)現(xiàn)CENTER_CROP的效果

  private void getBmpMatrix() {
  if (getDrawable() == null) {
   return;
  }
  if (mTransfrom == null) {
   return;
  }
  if (mBitmap == null || mBitmap.isRecycled()) {
   mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
  }
  /* 下面實(shí)現(xiàn)了CENTER_CROP的功能 */
  mSmoothMatrix.setScale(mTransfrom.scale, mTransfrom.scale);
  mSmoothMatrix.postTranslate(-(mTransfrom.scale * mBitmap.getWidth() / 2 - mTransfrom.rect.width / 2),
    -(mTransfrom.scale * mBitmap.getHeight() / 2 - mTransfrom.rect.height / 2));
 }

開始Canvas繪圖，通過平移、切割區(qū)域，再關(guān)聯(lián)上面矩陣來實(shí)現(xiàn)

int saveCount = canvas.getSaveCount();
canvas.save();
// 先得到圖片在此刻的圖像Matrix矩陣
getBmpMatrix();
canvas.translate(mTransfrom.rect.left, mTransfrom.rect.top);
canvas.clipRect(0, 0, mTransfrom.rect.width,mTransfrom.rect.height);
canvas.concat(mSmoothMatrix);
getDrawable().draw(canvas);
canvas.restoreToCount(saveCount);

至此，自定義SmoothImageView內(nèi)容差不多講完了，下面開看看如何使用它吧。

使用SmoothImageView

•進(jìn)入

imageView = new SmoothImageView(this);
imageView.setOriginalInfo(mWidth, mHeight, mLocationX, mLocationY);
imageView.transformIn();
imageView.setImageResource(mRes);

•退出

imageView.setOnTransformListener(new SmoothImageView.TransformListener() {
  @Override
  public void onTransformComplete(int mode) {
   if (mode == 2) {
    finish();
   }
  }
 });
imageView.transformOut();

我們在自定義View里也實(shí)現(xiàn)了退出操作成功后的回調(diào)，譬如demo中退出成功后就銷毀掉當(dāng)前Activity。

最后來看看運(yùn)行效果圖吧!