最近做一个项目类似于QQ空间，做到照片浏览的功能，对于QQ空间中点击图片放大至全屏，感觉效果很赞，于是也做了个类似的效果。如下。
我不知道QQ那个是怎么做的，我的思路如下：
首先，从图片缩略界面跳转到图片详情页面，应该是从一个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来完成上述的变换。
直接贴上主要的ImageView
[java]view plaincopy packagecom.roamer.ui.view;importandroid.animation.Animator;importandroid.animation.PropertyValuesHolder;importandroid.animation.ValueAnimator;importandroid.app.Activity;importandroid.content.Context;importandroid.graphics.Bitmap;importandroid.graphics.Canvas;importandroid.graphics.Matrix;importandroid.graphics.Paint;importandroid.graphics.Paint.Style;importandroid.graphics.drawable.BitmapDrawable;importandroid.util.AttributeSet;importandroid.util.Log;importandroid.view.animation.AccelerateDecelerateInterpolator;importandroid.widget.ImageView;/***2d平滑变化的显示图片的ImageView*仅限于用于:从一个ScaleType==CENTER_CROP的ImageView，切换到另一个ScaleType=*FIT_CENTER的ImageView，或者反之(当然，得使用同样的图片最好)**@authorDeanTao**/publicclassSmoothImageViewextendsImageView{privatestaticfinalintSTATE_NORMAL=0;privatestaticfinalintSTATE_TRANSFORM_IN=1;privatestaticfinalintSTATE_TRANSFORM_OUT=2;privateintmOriginalWidth;privateintmOriginalHeight;privateintmOriginalLocationX;privateintmOriginalLocationY;privateintmState=STATE_NORMAL;privateMatrixmSmoothMatrix;privateBitmapmBitmap;privatebooleanmTransformStart=false;privateTransfrommTransfrom;privatefinalintmBgColor=0xFF000000;privateintmBgAlpha=0;privatePaintmPaint;publicSmoothImageView(Contextcontext){super(context);init();}publicSmoothImageView(Contextcontext,AttributeSetattrs){super(context,attrs);init();}publicSmoothImageView(Contextcontext,AttributeSetattrs,intdefStyle){super(context,attrs,defStyle);init();}privatevoidinit(){mSmoothMatrix=newMatrix();mPaint=newPaint();mPaint.setColor(mBgColor);mPaint.setStyle(Style.FILL);//setBackgroundColor(mBgColor);}publicvoidsetOriginalInfo(intwidth,intheight,intlocationX,intlocationY){mOriginalWidth=width;mOriginalHeight=height;mOriginalLocationX=locationX;mOriginalLocationY=locationY;//因为是屏幕坐标，所以要转换为该视图内的坐标，因为我所用的该视图是MATCH_PARENT，所以不用定位该视图的位置,如果不是的话，还需要定位视图的位置，然后计算mOriginalLocationX和mOriginalLocationYmOriginalLocationY=mOriginalLocationY-getStatusBarHeight(getContext());}/***获取状态栏高度**@return*/publicstaticintgetStatusBarHeight(Contextcontext){Class<?>c=null;Objectobj=null;java.lang.reflect.Fieldfield=null;intx=0;intstatusBarHeight=0;try{c=Class.forName("com.android.internal.R$dimen");obj=c.newInstance();field=c.getField("status_bar_height");x=Integer.parseInt(field.get(obj).toString());statusBarHeight=context.getResources().getDimensionPixelSize(x);returnstatusBarHeight;}catch(Exceptione){e.printStackTrace();}returnstatusBarHeight;}/***用于开始进入的方法。调用此方前，需已经调用过setOriginalInfo*/publicvoidtransformIn(){mState=STATE_TRANSFORM_IN;mTransformStart=true;invalidate();}/***用于开始退出的方法。调用此方前，需已经调用过setOriginalInfo*/publicvoidtransformOut(){mState=STATE_TRANSFORM_OUT;mTransformStart=true;invalidate();}privateclassTransfrom{floatstartScale;//图片开始的缩放值floatendScale;//图片结束的缩放值floatscale;//属性ValueAnimator计算出来的值LocationSizeFstartRect;//开始的区域LocationSizeFendRect;//结束的区域LocationSizeFrect;//属性ValueAnimator计算出来的值voidinitStartIn(){scale=startScale;try{rect=(LocationSizeF)startRect.clone();}catch(CloneNotSupportedExceptione){e.printStackTrace();}}voidinitStartOut(){scale=endScale;try{rect=(LocationSizeF)endRect.clone();}catch(CloneNotSupportedExceptione){e.printStackTrace();}}}/***初始化进入的变量信息*/privatevoidinitTransform(){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=newTransfrom();/**下面为缩放的计算*//*计算初始的缩放值，初始值因为是CENTR_CROP效果，所以要保证图片的宽和高至少1个能匹配原始的宽和高，另1个大于*/floatxSScale=mOriginalWidth/((float)mBitmap.getWidth());floatySScale=mOriginalHeight/((float)mBitmap.getHeight());floatstartScale=xSScale>ySScale?xSScale:ySScale;mTransfrom.startScale=startScale;/*计算结束时候的缩放值，结束值因为要达到FIT_CENTER效果，所以要保证图片的宽和高至少1个能匹配原始的宽和高，另1个小于*/floatxEScale=getWidth()/((float)mBitmap.getWidth());floatyEScale=getHeight()/((float)mBitmap.getHeight());floatendScale=xEScale<yEScale?xEScale:yEScale;mTransfrom.endScale=endScale;/***下面计算CanvasClip的范围，也就是图片的显示的范围，因为图片是慢慢变大，并且是等比例的，所以这个效果还需要裁减图片显示的区域*，而显示区域的变化范围是在原始CENTER_CROP效果的范围区域*，到最终的FIT_CENTER的范围之间的，区域我用LocationSizeF更好计算*，他就包括左上顶点坐标，和宽高，最后转为Canvas裁减的Rect.*//*开始区域*/mTransfrom.startRect=newLocationSizeF();mTransfrom.startRect.left=mOriginalLocationX;mTransfrom.startRect.top=mOriginalLocationY;mTransfrom.startRect.width=mOriginalWidth;mTransfrom.startRect.height=mOriginalHeight;/*结束区域*/mTransfrom.endRect=newLocationSizeF();floatbitmapEndWidth=mBitmap.getWidth()*mTransfrom.endScale;//图片最终的宽度floatbitmapEndHeight=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=newLocationSizeF();}privateclassLocationSizeFimplementsCloneable{floatleft;floattop;floatwidth;floatheight;@OverridepublicStringtoString(){return"[left:"+left+"top:"+top+"width:"+width+"height:"+height+"]";}@OverridepublicObjectclone()throwsCloneNotSupportedException{//TODOAuto-generatedmethodstubreturnsuper.clone();}}/*下面实现了CENTER_CROP的功能的Matrix，在优化的过程中，已经不用了*/privatevoidgetCenterCropMatrix(){if(getDrawable()==null){return;}if(mBitmap==null||mBitmap.isRecycled()){mBitmap=((BitmapDrawable)getDrawable()).getBitmap();}/*下面实现了CENTER_CROP的功能*/floatxScale=mOriginalWidth/((float)mBitmap.getWidth());floatyScale=mOriginalHeight/((float)mBitmap.getHeight());floatscale=xScale>yScale?xScale:yScale;mSmoothMatrix.reset();mSmoothMatrix.setScale(scale,scale);mSmoothMatrix.postTranslate(-(scale*mBitmap.getWidth()/2-mOriginalWidth/2),-(scale*mBitmap.getHeight()/2-mOriginalHeight/2));}privatevoidgetBmpMatrix(){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));}@OverrideprotectedvoidonDraw(Canvascanvas){if(getDrawable()==null){return;//couldn'tresolvetheURI}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();}}if(mTransformStart){Log.d("Dean","mTransfrom.startScale:"+mTransfrom.startScale);Log.d("Dean","mTransfrom.startScale:"+mTransfrom.endScale);Log.d("Dean","mTransfrom.scale:"+mTransfrom.scale);Log.d("Dean","mTransfrom.startRect:"+mTransfrom.startRect.toString());Log.d("Dean","mTransfrom.endRect:"+mTransfrom.endRect.toString());Log.d("Dean","mTransfrom.rect:"+mTransfrom.rect.toString());}mPaint.setAlpha(mBgAlpha);canvas.drawPaint(mPaint);intsaveCount=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{//当TransformIn变化完成后，把背景改为黑色，使得Activity不透明mPaint.setAlpha(255);canvas.drawPaint(mPaint);super.onDraw(canvas);}}privatevoidstartTransform(finalintstate){if(mTransfrom==null){return;}ValueAnimatorvalueAnimator=newValueAnimator();valueAnimator.setDuration(300);valueAnimator.setInterpolator(newAccelerateDecelerateInterpolator());if(state==STATE_TRANSFORM_IN){PropertyValuesHolderscaleHolder=PropertyValuesHolder.ofFloat("scale",mTransfrom.startScale,mTransfrom.endScale);PropertyValuesHolderleftHolder=PropertyValuesHolder.ofFloat("left",mTransfrom.startRect.left,mTransfrom.endRect.left);PropertyValuesHoldertopHolder=PropertyValuesHolder.ofFloat("top",mTransfrom.startRect.top,mTransfrom.endRect.top);PropertyValuesHolderwidthHolder=PropertyValuesHolder.ofFloat("width",mTransfrom.startRect.width,mTransfrom.endRect.width);PropertyValuesHolderheightHolder=PropertyValuesHolder.ofFloat("height",mTransfrom.startRect.height,mTransfrom.endRect.height);PropertyValuesHolderalphaHolder=PropertyValuesHolder.ofInt("alpha",0,255);valueAnimator.setValues(scaleHolder,leftHolder,topHolder,widthHolder,heightHolder,alphaHolder);}else{PropertyValuesHolderscaleHolder=PropertyValuesHolder.ofFloat("scale",mTransfrom.endScale,mTransfrom.startScale);PropertyValuesHolderleftHolder=PropertyValuesHolder.ofFloat("left",mTransfrom.endRect.left,mTransfrom.startRect.left);PropertyValuesHoldertopHolder=PropertyValuesHolder.ofFloat("top",mTransfrom.endRect.top,mTransfrom.startRect.top);PropertyValuesHolderwidthHolder=PropertyValuesHolder.ofFloat("width",mTransfrom.endRect.width,mTransfrom.startRect.width);PropertyValuesHolderheightHolder=PropertyValuesHolder.ofFloat("height",mTransfrom.endRect.height,mTransfrom.startRect.height);PropertyValuesHolderalphaHolder=PropertyValuesHolder.ofInt("alpha",255,0);valueAnimator.setValues(scaleHolder,leftHolder,topHolder,widthHolder,heightHolder,alphaHolder);}valueAnimator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){@OverridepublicsynchronizedvoidonAnimationUpdate(ValueAnimatoranimation){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(newValueAnimator.AnimatorListener(){@OverridepublicvoidonAnimationStart(Animatoranimation){}@OverridepublicvoidonAnimationRepeat(Animatoranimation){}@OverridepublicvoidonAnimationEnd(Animatoranimation){/**如果是进入的话，当然是希望最后停留在center_crop的区域。但是如果是out的话，就不应该是center_crop的位置了*，而应该是最后变化的位置，因为当out的时候结束时，不回复视图是Normal，要不然会有一个突然闪动回去的bug*///TODO这个可以根据实际需求来修改if(state==STATE_TRANSFORM_IN){mState=STATE_NORMAL;}if(mTransformListener!=null){mTransformListener.onTransformComplete(state);}}@OverridepublicvoidonAnimationCancel(Animatoranimation){}});valueAnimator.start();}publicvoidsetOnTransformListener(TransformListenerlistener){mTransformListener=listener;}privateTransformListenermTransformListener;publicstaticinterfaceTransformListener{/****@parammode*STATE_TRANSFORM_IN1,STATE_TRANSFORM_OUT2*/voidonTransformComplete(intmode);//mode1}}
使用的时候，从前一个Activity传递到详情Activity下面几个主要的信息：
[java]view plaincopy Intentintent=newIntent(MainActivity.this,SpaceImageDetailActivity.class);intent.putExtra("images",(ArrayList<String>)datas);//非必须intent.putExtra("position",position);int[]location=newint[2];imageView.getLocationOnScreen(location);intent.putExtra("locationX",location[0]);//必须intent.putExtra("locationY",location[1]);//必须intent.putExtra("width",imageView.getWidth());//必须intent.putExtra("height",imageView.getHeight());//必须startActivity(intent);overridePendingTransition(0,0);
在详情Activity接受到这些参数，并对SmoothImageView初始化位置信息，然后就可以进行变化了。
[java]view plaincopy mDatas=(ArrayList<String>)getIntent().getSerializableExtra("images");mPosition=getIntent().getIntExtra("position",0);mLocationX=getIntent().getIntExtra("locationX",0);mLocationY=getIntent().getIntExtra("locationY",0);mWidth=getIntent().getIntExtra("width",0);mHeight=getIntent().getIntExtra("height",0);imageView=newSmoothImageView(this);imageView.setOriginalInfo(mWidth,mHeight,mLocationX,mLocationY);imageView.transformIn();imageView.setLayoutParams(newViewGroup.LayoutParams(-1,-1));imageView.setScaleType(ScaleType.FIT_CENTER);setContentView(imageView);ImageLoader.getInstance().displayImage(mDatas.get(mPosition),imageView);
上面的就已经完成了图片的缩放效果，但是还需要设置下Activity透明的风格，才能使得alpha效果体验出来，用户体验更好。
对Activity设置如下风格，另外说明，在SmoothImageView中没有定位视图的位置，只是做了对状态栏的处理，所以要设置Activity 为NotitleBar，具体style如下：
[java]view plaincopy <stylename="IMTheme.Transparent"><itemname="android:windowBackground">@android:color/transparent</item><itemname="android:windowIsTranslucent">true</item><itemname="android:windowNoTitle">true</item><itemname="android:windowContentOverlay">@null</item>lt;/style>
Demo下载
