注：本文翻译自Google官方的Android Developers Training文档，译者技术一般，由于喜爱安卓而产生了翻译的念头，纯属个人兴趣爱好。
原文链接： http://developer.android.com/training/animation/zoom.html
这节课将展示如何做一个触摸缩放动画，这个动画非常常用，如在图库软件中点击照片的缩略图，把照片放大到整个屏幕范围：
如果你希望略过这部分内容直接看代码样例，可以直接 下载 样例代码，然后选择淡入淡出动画的例子。下面的文件是实现代码：
-
src/TouchHighlightImageButton.java（一个简单的辅助类，当图片按钮按下时，显示一个蓝色的触摸点） -
src/ZoomActivity.java -
layout/activity_zoom.xml
一）. 创建视图
创建一个布局文件，包含了你希望缩放的大小视图版本。下面的例子为一个可点击的图片缩略图创建了一个 ImageButton ，以及展示放大图片的 ImageView ：
<
FrameLayout
xmlns:android
="http://schemas.android.com/apk/res/android"
android:id
="@+id/container"
android:layout_width
="match_parent"
android:layout_height
="match_parent"
>
<
LinearLayout
android:layout_width
="match_parent"
android:layout_height
="wrap_content"
android:orientation
="vertical"
android:padding
="16dp"
>
<
ImageButton
android:id
="@+id/thumb_button_1"
android:layout_width
="100dp"
android:layout_height
="75dp"
android:layout_marginRight
="1dp"
android:src
="@drawable/thumb1"
android:scaleType
="centerCrop"
android:contentDescription
="@string/description_image_1"
/>
</
LinearLayout
>
<!--
This initially-hidden ImageView will hold the expanded/zoomed version of
the images above. Without transformations applied, it takes up the entire
screen. To achieve the "zoom" animation, this view's bounds are animated
from the bounds of the thumbnail button above, to its final laid-out
bounds.
-->
<
ImageView
android:id
="@+id/expanded_image"
android:layout_width
="match_parent"
android:layout_height
="match_parent"
android:visibility
="invisible"
android:contentDescription
="@string/description_zoom_touch_close"
/>
</
FrameLayout
>
二）. 设置缩放动画
一旦你应用了你的布局后，配置时间句柄来激活缩放动画。下面的例子给 ImageButton 添加了一个 View.OnClickListener 来,当用户点击按钮时，执行缩放动画：
public
class
ZoomActivity
extends
FragmentActivity {
//
Hold a reference to the current animator,
//
so that it can be canceled mid-way.
private
Animator mCurrentAnimator;
//
The system "short" animation time duration, in milliseconds. This
//
duration is ideal for subtle animations or animations that occur
//
very frequently.
private
int
mShortAnimationDuration;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_zoom);
//
Hook up clicks on the thumbnail views.
final
View thumb1View =
findViewById(R.id.thumb_button_1);
thumb1View.setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View view) {
zoomImageFromThumb(thumb1View, R.drawable.image1);
}
});
//
Retrieve and cache the system's default "short" animation time.
mShortAnimationDuration =
getResources().getInteger(
android.R.integer.config_shortAnimTime);
}
...
}
三）. 缩放视图
你现在需要再恰当地时间从标准尺寸变化到缩放后的视图。一般而言，你需要将标准尺寸图片的边框扩大到更大的尺寸图片的边框。下面的方法展示了如何实现一个缩放动画，它把一个图片从缩略图放大，具体是做了下面一些事情：
将高分辨率图像指定到隐藏的“放大的”
ImageView
。为了方便起见，下面的例子在UI资源加载了一个大图片资源。你可能会希望在另一个线程进行加载来防止阻塞UI线程，之后再UI线程显示位图。在理想状态下，位图的大小应该不能超过屏幕的大小。
计算 ImageView 的起始和中止边框大小。
在四个方向和尺寸属性
X
，
Y
，（
SCALE_X
，和
SCALE_Y
）同时执行动画，从起始边框一直到结束边框。这四个动画被添加到一个
AnimatorSet
，这样他们能同时开始。
缩小时，执行同样的动画，但在用户点击已放大的图像时，执行的是反向的动画。你可以通过向 ImageView 添加 View.OnClickListener 来实现。当点击时， ImageView 缩小为缩略图的大小，并将它的可视性设置为 GONE 来隐藏它。
private
void
zoomImageFromThumb(
final
View thumbView,
int
imageResId) {
//
If there's an animation in progress, cancel it
//
immediately and proceed with this one.
if
(mCurrentAnimator !=
null
) {
mCurrentAnimator.cancel();
}
//
Load the high-resolution "zoomed-in" image.
final
ImageView expandedImageView =
(ImageView) findViewById(
R.id.expanded_image);
expandedImageView.setImageResource(imageResId);
//
Calculate the starting and ending bounds for the zoomed-in image.
//
This step involves lots of math. Yay, math.
final
Rect startBounds =
new
Rect();
final
Rect finalBounds =
new
Rect();
final
Point globalOffset =
new
Point();
//
The start bounds are the global visible rectangle of the thumbnail,
//
and the final bounds are the global visible rectangle of the container
//
view. Also set the container view's offset as the origin for the
//
bounds, since that's the origin for the positioning animation
//
properties (X, Y).
thumbView.getGlobalVisibleRect(startBounds);
findViewById(R.id.container)
.getGlobalVisibleRect(finalBounds, globalOffset);
startBounds.offset(
-globalOffset.x, -
globalOffset.y);
finalBounds.offset(
-globalOffset.x, -
globalOffset.y);
//
Adjust the start bounds to be the same aspect ratio as the final
//
bounds using the "center crop" technique. This prevents undesirable
//
stretching during the animation. Also calculate the start scaling
//
factor (the end scaling factor is always 1.0).
float
startScale;
if
((
float
) finalBounds.width() /
finalBounds.height()
> (
float
) startBounds.width() /
startBounds.height()) {
//
Extend start bounds horizontally
startScale = (
float
) startBounds.height() /
finalBounds.height();
float
startWidth = startScale *
finalBounds.width();
float
deltaWidth = (startWidth - startBounds.width()) / 2
;
startBounds.left
-=
deltaWidth;
startBounds.right
+=
deltaWidth;
}
else
{
//
Extend start bounds vertically
startScale = (
float
) startBounds.width() /
finalBounds.width();
float
startHeight = startScale *
finalBounds.height();
float
deltaHeight = (startHeight - startBounds.height()) / 2
;
startBounds.top
-=
deltaHeight;
startBounds.bottom
+=
deltaHeight;
}
//
Hide the thumbnail and show the zoomed-in view. When the animation
//
begins, it will position the zoomed-in view in the place of the
//
thumbnail.
thumbView.setAlpha(0f);
expandedImageView.setVisibility(View.VISIBLE);
//
Set the pivot point for SCALE_X and SCALE_Y transformations
//
to the top-left corner of the zoomed-in view (the default
//
is the center of the view).
expandedImageView.setPivotX(0f);
expandedImageView.setPivotY(0f);
//
Construct and run the parallel animation of the four translation and
//
scale properties (X, Y, SCALE_X, and SCALE_Y).
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) {
mCurrentAnimator
=
null
;
}
@Override
public
void
onAnimationCancel(Animator animation) {
mCurrentAnimator
=
null
;
}
});
set.start();
mCurrentAnimator
=
set;
//
Upon clicking the zoomed-in image, it should zoom back down
//
to the original bounds and show the thumbnail instead of
//
the expanded image.
final
float
startScaleFinal =
startScale;
expandedImageView.setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View view) {
if
(mCurrentAnimator !=
null
) {
mCurrentAnimator.cancel();
}
//
Animate the four positioning/sizing properties in parallel,
//
back to their original values.
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);
mCurrentAnimator
=
null
;
}
@Override
public
void
onAnimationCancel(Animator animation) {
thumbView.setAlpha(1f);
expandedImageView.setVisibility(View.GONE);
mCurrentAnimator
=
null
;
}
});
set.start();
mCurrentAnimator
=
set;
}
});
}
