Android仿微信图片点击浏览的效果

2019-12-12 05:24:38

字体：大中小

来源：转载

供稿：网友

本篇我们来做一个类似于微信的图片点击浏览的效果，点击小图图片后会放大至全屏显示，且中间有一个2D平滑过渡的效果。

思路如下：

首先，从图片缩略界面跳转到图片详情页面，应该是从一个Activity跳转到另外一个Activity，应该图片详情页面也有很多操作，用View或者Dialog不是很好。所以现在难点就是，如何使得前一个界面的ImageView在另外一个界面做缩放切割动画。
其次，一般缩略界面的ImageView的是正方形的，并且是CENTER_CROP缩放属性的。CENTER_CROP属性会导致ImageView中显示的Bitmap有被切割达到填充的效果。
而详情页面的ImageView一般都是FIT_CENTER的缩放属性。所以要保证这个跳转动画的流畅，要做如下的变化：

1、Bitmap的缩放，因为缩略图和详情图的缩放比例肯定不一样。
2、Bitmap位置的平移，因为缩略图的位置是不确定的，我们要使他平移到中间。
3、Bitmap的切割，因为CENTER_CROP是切割过得，而FIT_CENTER是没有切割的，那么两幅图显示的内容区域是不同的，所以也要显示区域的平滑变换。

要完成上面的效果，如果单单是指对ImageView做一个动画变换，我觉得是完成不了这个要求的。所以自己重写了ImageView来完成上述的变换。

自定义SmoothImageView
•设置初始信息，主要是初始宽高和位置

 public void setOriginalInfo(int width, int height, int locationX, int locationY) {  mOriginalWidth = width;  mOriginalHeight = height;  mOriginalLocationX = locationX;  mOriginalLocationY = locationY;  // 因为是屏幕坐标，所以要转换为该视图内的坐标，因为我所用的该视图是MATCH_PARENT，所以不用定位该视图的位置,如果不是的话，还需要定位视图的位置，然后计算mOriginalLocationX和mOriginalLocationY  mOriginalLocationY = mOriginalLocationY - getStatusBarHeight(getContext()); }

•开始执行进入或退出动作

 /**  * 用于开始进入的方法。 调用此方前，需已经调用过setOriginalInfo  */ public void transformIn() {  mState = STATE_TRANSFORM_IN;  mTransformStart = true;  invalidate(); } /**  * 用于开始退出的方法。 调用此方前，需已经调用过setOriginalInfo  */ public void transformOut() {  mState = STATE_TRANSFORM_OUT;  mTransformStart = true;  invalidate(); }

•进入或退出动作立马会调用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 {   //当Transform In变化完成后，把背景改为黑色，使得Activity不透明   mPaint.setAlpha(255);   canvas.drawPaint(mPaint);   super.onDraw(canvas);  } }

onDraw里面又会调用如下几步：
•初始化Transfrom，主要是动作执行完后图片的缩放比例、开始区域和结束区域位置信息

  /**  * 初始化进入的变量信息  */ private void initTransform() {  if (getDrawable() == null) {   return;  }  if (mBitmap == null || mBitmap.isRecycled()) {   mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();  }  //防止mTransfrom重复的做同样的初始化  if (mTransfrom != null) {   return;  }  if (getWidth() == 0 || getHeight() == 0) {   return;  }  mTransfrom = new Transfrom();  /** 下面为缩放的计算 */  /* 计算初始的缩放值，初始值因为是CENTR_CROP效果，所以要保证图片的宽和高至少1个能匹配原始的宽和高，另1个大于 */  float xSScale = mOriginalWidth / ((float) mBitmap.getWidth());  float ySScale = mOriginalHeight / ((float) mBitmap.getHeight());  float startScale = xSScale > ySScale ? xSScale : ySScale;  mTransfrom.startScale = startScale;  /* 计算结束时候的缩放值，结束值因为要达到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的范围，也就是图片的显示的范围，因为图片是慢慢变大，并且是等比例的，所以这个效果还需要裁减图片显示的区域   * ，而显示区域的变化范围是在原始CENTER_CROP效果的范围区域   * ，到最终的FIT_CENTER的范围之间的，区域我用LocationSizeF更好计算   * ，他就包括左上顶点坐标，和宽高，最后转为Canvas裁减的Rect.   */  /* 开始区域 */  mTransfrom.startRect = new LocationSizeF();  mTransfrom.startRect.left = mOriginalLocationX;  mTransfrom.startRect.top = mOriginalLocationY;  mTransfrom.startRect.width = mOriginalWidth;  mTransfrom.startRect.height = mOriginalHeight;  /* 结束区域 */  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(); }

•根据当前是进入还是退出操作，设置动作开始前的缩放比和位置

  private class Transfrom {  float startScale;// 图片开始的缩放值  float endScale;// 图片结束的缩放值  float scale;// 属性ValueAnimator计算出来的值  LocationSizeF startRect;// 开始的区域  LocationSizeF endRect;// 结束的区域  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();   }  }   }

•开始变换动作，主要是根据当前是进入还是退出动作，设置起始区域，起始缩放比和结束区域，结束缩放比。然后通过属性动画算出中间每个位置的区域信息和缩放比，在动画的监听过程中去重新绘制View，从而形成从起始区域到结束区域的一个平滑过渡效果。

  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) {    /*     * 如果是进入的话，当然是希望最后停留在center_crop的区域。但是如果是out的话，就不应该是center_crop的位置了     * ， 而应该是最后变化的位置，因为当out的时候结束时，不回复视图是Normal，要不然会有一个突然闪动回去的bug     */    // TODO 这个可以根据实际需求来修改    if (state == STATE_TRANSFORM_IN) {     mState = STATE_NORMAL;    }    if (mTransformListener != null) {     mTransformListener.onTransformComplete(state);    }   }   @Override   public void onAnimationCancel(Animator animation) {   }  });  valueAnimator.start(); }

•最后我们再来看一下动画绘制过程：
得到图片的变换矩阵，先根据当前scale对矩阵设置一个缩放，然后根据当前图片和显示区域差值给矩阵设置一个平移，从而实现CENTER_CROP的效果

  private void getBmpMatrix() {  if (getDrawable() == null) {   return;  }  if (mTransfrom == null) {   return;  }  if (mBitmap == null || mBitmap.isRecycled()) {   mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();  }  /* 下面实现了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绘图，通过平移、切割区域，再关联上面矩阵来实现

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内容差不多讲完了，下面开看看如何使用它吧。

使用SmoothImageView

•进入

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里也实现了退出操作成功后的回调，譬如demo中退出成功后就销毁掉当前Activity。

最后来看看运行效果图吧!