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

本篇我们来做一个类似于微信的图片点击浏览的效果，点击小图图片后会放大至全屏显示，且中间有一个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和mOriginalLocationYmOriginalLocationY = 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（） {@Overridepublic void onTransformComplete（int mode） { if （mode == 2） {finish（）; }} }）;imageView.transformOut（）;

我们在自定义View里也实现了退出操作成功后的回调，譬如demo中退出成功后就销毁掉当前Activity。
最后来看看运行效果图吧！

源码下载：http://xiazai.jb51.net/201609/yuanma/Android2DImageView（jb51.net）.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。