Zoom animation, allowing you to preview images by clicking. zoom Preview

Zoom animation, allowing you to preview images by clicking. zoom Preview

Reference: https://developer.android.google.cn/training/animation/zoom.html

1. Create Views

The following layout includes the large and small version views you want to zoom in.

1. ImageButton is a minor version. Click it to display the ImageView of a major version.

2. ImageView is a large version. You can display the style after ImageButton is clicked.

3. ImageView is invisible at the beginning (invisible). When ImageButton is clicked, it implements the zoom animation, just as it is expanded from ImageButton.

1 <FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android" 2 android: id = "@ + id/container" 3 android: layout_width = "match_parent" 4 android: layout_height = "match_parent"> 5 6 <LinearLayout android: layout_width = "match_parent" 7 android: layout_height = "wrap_content" 8 android: orientation = "vertical" 9 android: padding = "16dp"> 10 11 <ImageButton12 android: id = "@ + id/thumb_button_1" 13 android: layo Ut_width = "100dp" 14 android: layout_height = "75dp" 15 android: layout_marginRight = "1dp" 16 android: src = "@ drawable/thumb1" 17 android: scaleType = "centerCrop" 18 android: contentDescription = "@ string/description_image_1"/> 19 20 </LinearLayout> 21 22 <! -- This invisible ImageView holds the image version after ImageButton zoom. 23 The animation occupies the whole screen before it occurs. Starting with the animation, the View changes from the range of the above 24 ImageButton to his final range. 25 --> 26 27 <ImageView28 android: id = "@ + id/expanded_image" 29 android: layout_width = "match_parent" 30 android: layout_height = "match_parent" 31 android: visibility = "invisible" 32 android: contentDescription = "@ string/description_zoom_touch_close"/> 33 34 </FrameLayout>

 

2. Set the zoom Animation

Set the Click Event on ImageButton and execute the zoom animation.

1 public class ZoomActivity extends FragmentActivity {2 // Save the current animation class so that the animation can be ended at any time. 3 private Animator mCurrentAnimator; 4 5 // the short-term and long animation duration of the system (unit: ms) 6 // For imperceptible or frequently occurring animations 7 // This animation duration is the ideal 8 private int mShortAnimationDuration; 9 10 @ Override11 protected void onCreate (Bundle savedInstanceState) {12 super. onCreate (savedInstanceState); 13 setContentView (R. layout. activity_zoom); 14 15 // set the click event for ImageButton 16 final View thumb1View = findViewById (R. id. thumb_button_1); 17 thumb1View. setOnClickListener (new View. onClickListener () {18 @ Override19 public void onClick (View view) {20 // execute the zoom animation Method 21 zoomImageFromThumb (thumb1View, R. drawable. image1); 22} 23}); 24 25 // retrieve the default short-term animation duration 26 mShortAnimationDuration = getResources (). getInteger (27 android. r. integer. config_shortAnimTime); 28} 29... 30}

3. Implement zoom Animation

You need to animation the process from a normal view to an extended view.

1. Specify the image you want to zoom in to the ImageView. (Ideally, the bitmap size should not be larger than the screen size)

2. Calculate the start and end positions of the ImageView.

3. Make the four vertices and zoom attributes into an animation at the same time, from the starting state to the ending state. These four animations are added to the AnimatorSet for simultaneous execution.

4. When the user clicks the screen again, the animation will be executed. In the same way, give the ImageView a View. OnClickListener, and then hide the ImageView.

1 private void zoomImageFromThumb (final View thumbView, int imageResId) {2 // if an animation is being executed, cancel it immediately, and then execute the current animation 3 if (mCurrentAnimator! = Null) {4 mCurrentAnimator. cancel (); 5} 6 7 // load high-resolution image 8 final ImageView expandedImageView = (ImageView) findViewById (9 R. id. expanded_image); 10 expandedImageView. setImageResource (imageResId); 11 12 // the range of the calculated start and end positions is 13 final Rect startBounds = new Rect (); 14 final Rect finalBounds = new Rect (); 15 final Point globalOffset = new Point (); 16 17 // The starting range is the range of ImageButton, and 18 // The ending range is the container (FrameLay Out) range 19 // getGlobalVisibleRect (Rect) obtains the Rect 20 // absolute coordinate of the view relative to the entire hardware screen, minus the offset, and obtains the coordinates required by the animation, that is, in the relative coordinate 21 // getGlobalVisibleRect (Rect, Point), Point obtains the offset of the view coordinate on its parent control on 22 // and that on the screen 23 thumbView. getGlobalVisibleRect (startBounds); 24 findViewById (R. id. container) 25. getGlobalVisibleRect (finalBounds, globalOffset); 26 startBounds. offset (-globalOffset. x,-globalOffset. y); 27 finalBounds. offset (-globalOffs Et. x,-globalOffset. y); 28 29 // Adjust the start bounds to be the same aspect ratio as the final 30 // bounds using the "center crop" technique. this prevents undesirable 31 // stretching during the animation. also calculate the start scaling 32 // factor (the end scaling factor is always 1.0 ). 33 34 // The following logic is to maintain the aspect ratio of 35 float startScale; 36 // If the aspect ratio of the ending image is greater than the aspect ratio of the starting image, 37 // The image is scaled (squashed) visually at the end. If (float) finalBounds. width ()/finalBounds. height () 39> (float) startBounds. width ()/startBounds. height () {40 // Extend start bounds horizontally 41 startScale = (float) startBounds. height ()/finalBounds. height (); 42 float startWidth = startScale * finalBounds. width (); 43 float deltaWidth = (startWidth-startBounds. width ()/2; 44 startBounds. left-= deltaWidth; 45 startBounds. right + = d EltaWidth; 46} else {47 // Extend start bounds vertically 48 startScale = (float) startBounds. width ()/finalBounds. width (); 49 float startHeight = startScale * finalBounds. height (); 50 float deltaHeight = (startHeight-startBounds. height ()/2; 51 startBounds. top-= deltaHeight; 52 startBounds. bottom + = deltaHeight; 53} 54 55 // Hide the thumbnail and show the zoomed-in view. when the animat Ion 56 // begins, it will position the zoomed-in view in the place of the 57 // thumbnail. 58 59 // hide a small image to display a large image. When the animation starts, 60 // The large image should be sent to the position of the small image 61 62 // The small setting is transparent 63 thumbView. setAlpha (0f); 64 // large visible 65 expandedImageView. setVisibility (View. VISIBLE ); 66 67 // Set the destination point for SCALE_X and SCALE_Y transformations 68 // to the top-left corner of the zoomed-in view (the default 69 // is the center of the view ). 70 expandedImageView. set0000tx (0f); 71 expandedImageView. setequalty (0f); 72 73 // Construct and run The parallel animation of the four translation and 74 // scale properties (X, Y, SCALE_X, and SCALE_Y ). 75 AnimatorSet set = new AnimatorSet (); 76 set 77. play (ObjectAnimator. ofFloat (expandedImageView, View. x, 78 startBounds. left, finalBounds. left) 79. with (ObjectAnimator. ofFloat (expandedImageView, View. y, 80 startBounds. top, finalBounds. top) 81. with (ObjectAnimator. ofFloat (expandedImageView, Vi Ew. SCALE_X, 82 startScale, 1f )). with (ObjectAnimator. ofFloat (expandedImageView, 83 View. SCALE_Y, startScale, 1f); 84 set. setDuration (mShortAnimationDuration); 85 set. setInterpolator (new DecelerateInterpolator (); 86 set. addListener (new AnimatorListenerAdapter () {87 @ Override 88 public void onAnimationEnd (Animator animation) {89 mCurrentAnimator = null; 90} 91 92 @ Override 93 public void onAnima TionCancel (Animator animation) {94 mCurrentAnimator = null; 95} 96}); 97 set. start (); 98 mCurrentAnimator = set; 99 100 // Upon clicking the zoomed-in image, it shoshould zoom back down101 // to the original bounds and show the thumbnail instead of102 // the expanded image.103 104 // Click again to return a small image, which is the expanded reverse animation above. 105 final float startScaleFinal = startScale; 106 expandedImageView. setOnClickListener (new View. OnClickListener () {107 @ Override108 public void onClick (View view) {109 if (mCurrentAnimator! = Null) {110 mCurrentAnimator. cancel (); 111} 112 113 // Animate the four positioning/sizing properties in parallel, 114 // back to their original values.115 AnimatorSet set = new AnimatorSet (); 116 set. play (ObjectAnimator117. ofFloat (expandedImageView, View. x, startBounds. left) 118. with (ObjectAnimator119. ofFloat (expandedImageView, 120 View. y, startBounds. top) 121. with (ObjectAnimator122. ofFloat (expandedImageView, 123 View. SCALE_X, startScaleFinal) 124. with (ObjectAnimator125. ofFloat (expandedImageView, 126 View. SCALE_Y, startScaleFinal); 127 set. setDuration (mShortAnimationDuration); 128 set. setInterpolator (new DecelerateInterpolator (); 129 set. addListener (new AnimatorListenerAdapter () {130 @ Override131 public void onAnimationEnd (Animator animation) {132 thumbView. setAlpha (1f); 133 expandedImageView. setVisibility (View. GONE); 134 mCurrentAnimator = null; 135} 136 137 @ Override138 public void onAnimationCancel (Animator animation) {139 thumbView. setAlpha (1f); 140 expandedImageView. setVisibility (View. GONE); 141 mCurrentAnimator = null; 142} 143}); 144 set. start (); 145 mCurrentAnimator = set; 146} 147}); 148}