注：本篇文章是对官方开发文档的翻译，加上自己的理解和分析。

地址：https://developer.android.com/training/animation/zoom

本篇文章所实现的功能：

触摸一张ImageView后开始展示缩放动画，将视图从缩略图放大为填充屏幕的全尺寸图像，并且点击大图后还能够原路返回，缩放回去。无图无真相，先来看看效果图：

实现的代码中你需要知道的一些理论知识(大神请忽略)：

首先是View的两个方法：

getGlobalVisibleRect(Rect r)  →  得到这个view的可视区域的矩形

getGlobalVisibleRect(Rect r, Point globalOffset)  →  比上面的那个多了个参数，这个参数的内容是view的左上角相对屏幕左上角的偏移量

一开始看到这我是有点迷糊的，getGlobalVisibleRect中第二个参数到底是干啥用的？抱着这个疑问，我决定打个Log来看看，先看看用了哪些代码来打印：

//下面这个container就是当前的根布局的id，finalBounds就是新建的一个Rect,

findViewById(R.id.container)

.getGlobalVisibleRect(finalBounds, globalOffset);

//globalOffset里的偏移量

Log.i("TAG", "globalOffset.x:" + globalOffset.x);

Log.i("TAG", "globalOffset.y:" + globalOffset.y);

startBounds.offset(-globalOffset.x, -globalOffset.y);

finalBounds.offset(-globalOffset.x, -globalOffset.y);

//获取状态栏高度

int height = 0;

int resourceId = getApplicationContext().getResources().getIdentifier("status_bar_height", "dimen", "android");

if (resourceId > 0) {

height = getApplicationContext().getResources().getDimensionPixelSize(resourceId);

}

Log.i("TAG", "状态栏高度:" + height);

//获取actionBar的高度

int actionBarHeight = 0;

TypedValue tv = new TypedValue();

if (this.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {

actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());

Log.i("TAG", "actionBar高度:" + actionBarHeight);

}

打印的log：

到这里就一目了然了，根部局(也就是上面gif中白色的区域)的globalOffset.y = 状态栏高度 + actionBar高度 = 160，他们的关系就像下面这张图一样：

由于根部局container是铺满了除状态栏和actionBar之外的所有区域的，所以自然globalOffset.x就等于0了，这个不难理解。

在说完View的这两个方法之后，接下来开始进入正题，如何实现文章一开始时那个动图的效果呢？

1.在布局中准备一个ImageButton用于显示缩略图，再准备一个ImageView用于展示放大后的图片，一开始这个ImageView设置为不可见

2.给thumbView(ImageButton)设置点击事件，点击后开始放大，并将缩略图设置为invisible

public class MainActivity extends AppCompatActivity {

//动画的持续时间

private int mShortAnimationDuration = 1000;

//当前正在进行的动画

private AnimatorSet mCurrentAnimation;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

final ImageButton thumbView = findViewById(R.id.ib_small);

thumbView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

zoomImageFromThumb(thumbView, R.mipmap.wang);

}

});

}

3.也就是核心部分，zoomImageFromThumb都做了哪些事儿，注释写的很清楚，大家先瞅瞅

/**

* 缩放动画

*

* @param thumbView 缩略图

* @param imageResId 图片资源ID

*/

private void zoomImageFromThumb(final View thumbView, int imageResId) {

//如果当前有动画就取消，并执行当前的动画

if (mCurrentAnimation != null) {

mCurrentAnimation.cancel();

}

//加载大图到预设好的ImageView中

final ImageView expandedImageView = findViewById(

R.id.iv_big);

expandedImageView.setImageResource(imageResId);

//计算放大图像的起始边界和结束边界

final Rect startBounds = new Rect();

final Rect finalBounds = new Rect();

final Point globalOffset = new Point();

//起始边界是缩略图的全局可见矩形，最后的边界是容器container的全局可见矩形

//将容器视图container的偏移量设置为区域的起源，因为定位动画的起源属性是(X，Y)

thumbView.getGlobalVisibleRect(startBounds);

findViewById(R.id.container)

.getGlobalVisibleRect(finalBounds, globalOffset);

startBounds.offset(-globalOffset.x, -globalOffset.y);

finalBounds.offset(-globalOffset.x, -globalOffset.y);

//使用center_crop将起始边界调整为与最终边界相同的纵横比边界

//这可以防止在动画期间的不良拉伸。还计算开始缩放比例

float startScale;

if ((float) finalBounds.width() / finalBounds.height()

> (float) startBounds.width() / startBounds.height()) {

//横向放大

startScale = (float) startBounds.height() / finalBounds.height();

float startWidth = startScale * finalBounds.width();

float deltaWidth = (startWidth - startBounds.width()) / 2;

startBounds.left -= deltaWidth;

startBounds.right += deltaWidth;

} else {

//纵向放大

startScale = (float) startBounds.width() / finalBounds.width();

float startHeight = startScale * finalBounds.height();

float deltaHeight = (startHeight - startBounds.height()) / 2;

startBounds.top -= deltaHeight;

startBounds.bottom += deltaHeight;

}

//隐藏缩略图并显示放大视图

//当动画开始时，它会将放大的视图定位在原来缩略图的位置

thumbView.setAlpha(0f);

expandedImageView.setVisibility(View.VISIBLE);

//设置SCALE_X和SCALE_Y转换的轴心点为到放大后视图的左上角(默认值是视图的中心)

expandedImageView.setPivotX(0f);

expandedImageView.setPivotY(0f);

//四种动画同时播放

AnimatorSet set = new AnimatorSet();

set

.play(ObjectAnimator.ofFloat(expandedImageView, View.X,

startBounds.left, finalBounds.left))

.with(ObjectAnimator.ofFloat(expandedImageView, View.Y,

startBounds.top, finalBounds.top))

.with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X,

startScale, 1f))

.with(ObjectAnimator.ofFloat(expandedImageView,

View.SCALE_Y, startScale, 1f));

set.setDuration(mShortAnimationDuration);

set.setInterpolator(new DecelerateInterpolator());

set.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

mCurrentAnimation = null;

}

@Override

public void onAnimationCancel(Animator animation) {

mCurrentAnimation = null;

}

});

set.start();

mCurrentAnimation = set;

//从这往下就是给大图设置点击监听，完成缩小回去的过程

final float startScaleFinal = startScale;

expandedImageView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

if (mCurrentAnimation != null) {

mCurrentAnimation.cancel();

}

AnimatorSet set = new AnimatorSet();

set.play(ObjectAnimator

.ofFloat(expandedImageView, View.X, startBounds.left))

.with(ObjectAnimator

.ofFloat(expandedImageView,

View.Y, startBounds.top))

.with(ObjectAnimator

.ofFloat(expandedImageView,

View.SCALE_X, startScaleFinal))

.with(ObjectAnimator

.ofFloat(expandedImageView,

View.SCALE_Y, startScaleFinal));

set.setDuration(mShortAnimationDuration);

set.setInterpolator(new DecelerateInterpolator());

set.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

thumbView.setAlpha(1f);

expandedImageView.setVisibility(View.GONE);

mCurrentAnimation = null;

}

@Override

public void onAnimationCancel(Animator animation) {

thumbView.setAlpha(1f);

expandedImageView.setVisibility(View.GONE);

mCurrentAnimation = null;

}

});

set.start();

mCurrentAnimation = set;

}

});

}

除了注释之外，还需要对上面的代码做一些说明：

1.读了本文开头部分之后，相信你一定就明白了startBounds.offset()和finalBounds.offset();这两句话是在消除偏差，保证这两个矩形区域边界的计算都是相对于坐标轴的起始点(0,0)。

2.关于选择横向放大还是纵向放大的判断，先来看一张图：

就拿纵向放大来说吧，当startBounds的宽/高  > finalBounds的宽/高时，也就是上图右边那种情况，这时代码是下面这样的：

//纵向放大

startScale = (float) startBounds.width() / finalBounds.width();

float startHeight = startScale * finalBounds.height();

float deltaHeight = (startHeight - startBounds.height()) / 2;

startBounds.top -= deltaHeight;

startBounds.bottom += deltaHeight;

经过上面几行代码的处理之后，实际上startBounds高度已经变高，相当将startBounds上下分别拉伸了相同距离，从而达到了纵向放大的效果。最终startBounds经过动画放大到红色区域，缩小的过程原理也是一样的，就不再多言了。

因为非常简单，所有代码已经贴在上面，所以就不贴demo了。