注：本文翻譯自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;
}
});
}
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
