縮放View · Android Training官方培訓課程中文版

> 編寫:[XizhiXu](https://github.com/XizhiXu) - 原文:[http://developer.android.com/training/animation/zoom.html](http://developer.android.com/training/animation/zoom.html) 這節課示范怎樣實現點擊縮放動畫，這對相冊很有用，他能允許相片從縮略圖轉換成原圖并填充屏幕提供動畫。下面展示了觸摸縮放動畫效果是什么樣子，它將縮略圖擴大并填充屏幕。如果你想跳過看整個例子，[下載](http://developer.android.com/shareables/training/Animations.zip) App 樣例然后運行縮放的例子。查看下列文件中的代碼實現： - src/TouchHighlightImageButton.java（簡單的helper類，當image button被按下它顯示藍色高亮） - src/ZoomActivity.java - layout/activity_zoom.xml ### 創建View 為你想縮放的內容創建一大一小兩個版本布局文件。下面的例子為可點擊的縮略圖新建了一個 [ImageButton](http://developer.android.com/reference/android/widget/ImageButton.html) 和一個 [ImageView](http://developer.android.com/reference/android/widget/ImageView.html) 來展示原圖： ~~~ <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>  <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> ~~~ ### 設置縮放動畫一旦實現了布局，你需要設置觸發縮放事件handler。下面的例子為[ImageButton](http://developer.android.com/reference/android/widget/ImageButton.html)添加了一個[View.OnClickListener](http://developer.android.com/reference/android/view/View.OnClickListener.html)，當用戶點擊按鈕時它執行放大動畫。 ~~~ public class ZoomActivity extends FragmentActivity { // 持有一個當前animator的引用, // 以后以便于中途取消動畫. private Animator mCurrentAnimator; //這個系統內的“短”動畫時長是以毫秒為單位的。 //這個時長對于精確控制的動畫或頻繁激發的動畫是非常理想的。 private int mShortAnimationDuration; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_zoom); // 為縮略圖連結點擊事件 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); } }); //獲取并緩存系統默認定義的“短”動畫時長 mShortAnimationDuration = getResources().getInteger( android.R.integer.config_shortAnimTime); } ... } ~~~ ### 縮放View 你現在需要適時應用放大動畫了。通常來說，你需要按邊界來從小號View放大到大號View。下面的方法告訴你如何實現縮放動畫： 1. 把高清圖像設置到“放大版”隱藏的[ImageView](http://developer.android.com/reference/android/widget/ImageView.html)中。為表簡單，下面的例子在 UI 線程中加載了一張大圖。但是你需要在一個單獨的線程中來加載以免阻塞 UI 線程，然后再回到 UI 線程中設置。理想狀況下，圖片不要大過屏幕。 1. 計算[ImageView](http://developer.android.com/reference/android/widget/ImageView.html)開始和結束時的邊界。 1. 同步地動態改變四個位置和大小屬性[X](http://developer.android.com/reference/android/view/View.html#X)，[Y](http://developer.android.com/reference/android/view/View.html#Y)（[SCALE_X](http://developer.android.com/reference/android/view/View.html#SCALE_X) 和 [SCALE_Y](http://developer.android.com/reference/android/view/View.html#SCALE_Y)），從起始點到結束點。這四個動畫被加入到了[AnimatorSet](http://developer.android.com/reference/android/animation/AnimatorSet.html)，所以你可以一起開始。 1. 縮回則運行相同的動畫，但是是用戶點擊屏幕放大時的逆向效果。你可以在[ImageView](http://developer.android.com/reference/android/widget/ImageView.html)中添加一個[View.OnClickListener](http://developer.android.com/reference/android/view/View.OnClickListener.html)來實現它。當點擊時，[ImageView](http://developer.android.com/reference/android/widget/ImageView.html)縮回到原來縮略圖的大小，然后設置它的visibility為[GONE](http://developer.android.com/reference/android/view/View.html#GONE)來隱藏。 ~~~ private void zoomImageFromThumb(final View thumbView, int imageResId) { //如果一個動畫正在進行過程中，那么就要立即取消之前的動畫并進行這一個。 if (mCurrentAnimator != null) { mCurrentAnimator.cancel(); } // 載入一個高分辨率的所謂 "已放大" 的圖片. final ImageView expandedImageView = (ImageView) findViewById( R.id.expanded_image); expandedImageView.setImageResource(imageResId); // 為放大的圖片計算開始動畫和結束動畫的矩形邊界 // 這個步驟牽扯到了大量的數學計算，YEAH!!坑爹的數學!! final Rect startBounds = new Rect(); final Rect finalBounds = new Rect(); final Point globalOffset = new Point(); // 動畫開始的邊界是縮略圖對全局可見的矩形，最終的邊界是外部包裹的布局可見矩形。 // 這里還設置了包裹視圖的偏移量為原點的邊界,因為這是原點為定位的動畫屬性(X, Y)。 thumbView.getGlobalVisibleRect(startBounds); findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset); startBounds.offset(-globalOffset.x, -globalOffset.y); finalBounds.offset(-globalOffset.x, -globalOffset.y); // 調整開始邊界要和使用了“centerCrop”技術的最終邊界保持相同的縱橫比。 // 這可以在動畫過程中防止不希望出現的拉伸現象。還計算了開始大小的縮放系數 // (結束大小的系數則一直為1.0) 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; } // 隱藏縮略圖并顯示放大后的View。當動畫開始，將在縮略圖的位置定位放大的視圖 thumbView.setAlpha(0f); expandedImageView.setVisibility(View.VISIBLE); // 設置錨點，以放大后的View左上角坐標為準來準備 SCALE_X 和 SCALE_Y 變換 // (默認為View的中心) expandedImageView.setPivotX(0f); expandedImageView.setPivotY(0f); // 構建并并行化運行4個平移動畫和縮放屬性(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; // 點擊放大后的圖片，應該是縮放回原來的邊界并顯示縮略圖 // 而不是顯示擴大的圖 final float startScaleFinal = startScale; expandedImageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mCurrentAnimator != null) { mCurrentAnimator.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); mCurrentAnimator = null; } @Override public void onAnimationCancel(Animator animation) { thumbView.setAlpha(1f); expandedImageView.setVisibility(View.GONE); mCurrentAnimator = null; } }); set.start(); mCurrentAnimator = set; } }); } ~~~