注：本文翻譯自Google官方的Android Developers Training文檔，譯者技術(shù)一般，由于喜愛(ài)安卓而產(chǎn)生了翻譯的念頭，純屬個(gè)人興趣愛(ài)好。
原文鏈接： http://developer.android.com/training/animation/zoom.html
這節(jié)課將展示如何做一個(gè)觸摸縮放動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)非常常用，如在圖庫(kù)軟件中點(diǎn)擊照片的縮略圖，把照片放大到整個(gè)屏幕范圍：
如果你希望略過(guò)這部分內(nèi)容直接看代碼樣例，可以直接 下載 樣例代碼，然后選擇淡入淡出動(dòng)畫(huà)的例子。下面的文件是實(shí)現(xiàn)代碼：
-
src/TouchHighlightImageButton.java?（一個(gè)簡(jiǎn)單的輔助類(lèi)，當(dāng)圖片按鈕按下時(shí)，顯示一個(gè)藍(lán)色的觸摸點(diǎn)） -
src/ZoomActivity.java -
layout/activity_zoom.xml
一）. 創(chuàng)建視圖
創(chuàng)建一個(gè)布局文件，包含了你希望縮放的大小視圖版本。下面的例子為一個(gè)可點(diǎn)擊的圖片縮略圖創(chuàng)建了一個(gè) 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
>
二）. 設(shè)置縮放動(dòng)畫(huà)
一旦你應(yīng)用了你的布局后，配置時(shí)間句柄來(lái)激活縮放動(dòng)畫(huà)。下面的例子給 ImageButton 添加了一個(gè) View.OnClickListener 來(lái),當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，執(zhí)行縮放動(dòng)畫(huà)：
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);
}
...
}
三）. 縮放視圖
你現(xiàn)在需要再恰當(dāng)?shù)貢r(shí)間從標(biāo)準(zhǔn)尺寸變化到縮放后的視圖。一般而言，你需要將標(biāo)準(zhǔn)尺寸圖片的邊框擴(kuò)大到更大的尺寸圖片的邊框。下面的方法展示了如何實(shí)現(xiàn)一個(gè)縮放動(dòng)畫(huà)，它把一個(gè)圖片從縮略圖放大，具體是做了下面一些事情：
將高分辨率圖像指定到隱藏的“放大的”
ImageView
。為了方便起見(jiàn)，下面的例子在UI資源加載了一個(gè)大圖片資源。你可能會(huì)希望在另一個(gè)線(xiàn)程進(jìn)行加載來(lái)防止阻塞UI線(xiàn)程，之后再UI線(xiàn)程顯示位圖。在理想狀態(tài)下，位圖的大小應(yīng)該不能超過(guò)屏幕的大小。
計(jì)算 ImageView 的起始和中止邊框大小。
在四個(gè)方向和尺寸屬性
X
，
Y
，（
SCALE_X
，和
SCALE_Y
）同時(shí)執(zhí)行動(dòng)畫(huà)，從起始邊框一直到結(jié)束邊框。這四個(gè)動(dòng)畫(huà)被添加到一個(gè)
AnimatorSet
，這樣他們能同時(shí)開(kāi)始。
縮小時(shí)，執(zhí)行同樣的動(dòng)畫(huà)，但在用戶(hù)點(diǎn)擊已放大的圖像時(shí)，執(zhí)行的是反向的動(dòng)畫(huà)。你可以通過(guò)向 ImageView 添加 View.OnClickListener 來(lái)實(shí)現(xiàn)。當(dāng)點(diǎn)擊時(shí)， ImageView 縮小為縮略圖的大小，并將它的可視性設(shè)置為 GONE 來(lái)隱藏它。
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;
}
});
}
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
