SoFunction
Updated on 2025-03-04

Android realizes image click preview effect (zoom animation)

refer to:/training/animation/

1. Create Views

The following layout includes the large and small versions of the zoom you want.

It is a small version, which can be clicked, and after clicking, it displays a large version of ImageView.

It is a large version and can display the style after clicking on ImageButton.

It is invisible at first, and when ImageButton clicks, it implements zoom animation, just like expanding it from ImageButton.

<FrameLayout xmlns:andro
 android:
 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:
   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 is invisibleImageViewHold the aboveImageButton zoomThe following image version。
 Before the animation happened,It takes up the entire screen。The animation begins,thisViewFrom above
 ImageButtonThe range of changes to his own final range。
   -->
 <ImageView
  android:
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:visibility="invisible"
android:contentDescription="@string/description_zoom_touch_close" />

</FrameLayout>

2. Set up zoom animation

Set a click event on ImageButton and execute zoom animation

public class ZoomActivity extends FragmentActivity {
 // Save the current animation class so that the animation can be ended at any time private Animator mCurrentAnimator;
 //The system's short-term animation duration (units ms) // For animations that are not easy to detect or frequent occurrence // This animation duration is the most ideal private int mShortAnimationDuration;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  (savedInstanceState);
  setContentView(.activity_zoom);
  // Set click event for ImageButton  final View thumb1View = findViewById(.thumb_button_1);
  (new () {
   @Override
   public void onClick(View view) {
  //Execute zoom animation method    zoomImageFromThumb(thumb1View, .image1);
   }
  });
  //Retrieve the system's default short-term animation duration  mShortAnimationDuration = getResources().getInteger(
.config_shortAnimTime);
 }
 ...
}

3. Implement zoom animation

You need to animate the process from a normal size view to an expanded view.

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

2. Calculate the start and end positions of this ImageView

3. Animate the four points and the zoomed-size properties at the same time, from the beginning to the end. These four animations are added to the AnimatorSet to facilitate their execution at the same time.

4. When the user clicks on the screen again, the animation must be executed back. The same goes for this: give ImageView one and then hide the ImageView.

private void zoomImageFromThumb(final View thumbView, int imageResId) {
 // If there is an animation executing, cancel immediately and execute the current animation if (mCurrentAnimator != null) {
 ();
 }
 // Load high-resolution pictures final ImageView expandedImageView = (ImageView) findViewById(
  .expanded_image);
 (imageResId);
 // Calculate the picture range of the start and end positions final Rect startBounds = new Rect();
 final Rect finalBounds = new Rect();
 final Point globalOffset = new Point();
 // The starting range is the range of ImageButton. // The ending range is the range of the container (FrameLayout) // getGlobalVisibleRect(Rect) gets the Rect of the view relative to the entire hardware screen // That is, absolute coordinates, subtract the offset, and obtain the coordinates required by the animation, that is, relative coordinates // getGlobalVisibleRect(Rect,Point), Point gets the view in it // Offset of coordinates on the parent control from coordinates on the screen (startBounds);
 findViewById()
  .getGlobalVisibleRect(finalBounds, globalOffset);
 (-, -);
 (-, -);
 // 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).
 // The following logic is actually to maintain the aspect ratio float startScale;
 // If the aspect ratio of the end picture is larger than the aspect ratio of the beginning picture is larger // It is the end that it is widened (squished) the picture if ((float) () / ()
  > (float) () / ()) {
 // Extend start bounds horizontally
 startScale = (float) () / ();
 float startWidth = startScale * ();
 float deltaWidth = (startWidth - ()) / 2;
  -= deltaWidth;
  += deltaWidth;
 } else {
 // Extend start bounds vertically
 startScale = (float) () / ();
 float startHeight = startScale * ();
 float deltaHeight = (startHeight - ()) / 2;
  -= deltaHeight;
  += 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.
 // Hide small pictures and show large pictures.  When the animation starts, // Send large pictures to the location of small pictures //Small settings transparent (0f);
 //The big 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).
 (0f);
 (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((expandedImageView, ,
   , ))
  .with((expandedImageView, ,
   , ))
  .with((expandedImageView, View.SCALE_X,
  startScale, 1f)).with((expandedImageView,
   View.SCALE_Y, startScale, 1f));
 (mShortAnimationDuration);
 (new DecelerateInterpolator());
 (new AnimatorListenerAdapter() {
 @Override
 public void onAnimationEnd(Animator animation) {
  mCurrentAnimator = null;
 }
 @Override
 public void onAnimationCancel(Animator animation) {
  mCurrentAnimator = null;
 }
 });
 ();
 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.
 // Click again to return to the small picture, which is the expanded reverse animation above.  Preview is completed final float startScaleFinal = startScale;
 (new () {
 @Override
 public void onClick(View view) {
  if (mCurrentAnimator != null) {
  ();
  }
  // Animate the four positioning/sizing properties in parallel,
  // back to their original values.
  AnimatorSet set = new AnimatorSet();
  (ObjectAnimator
   .ofFloat(expandedImageView, , ))
   .with(ObjectAnimator
    .ofFloat(expandedImageView,
     ,))
   .with(ObjectAnimator
    .ofFloat(expandedImageView,
View.SCALE_X, startScaleFinal))
   .with(ObjectAnimator
    .ofFloat(expandedImageView,
View.SCALE_Y, startScaleFinal));
  (mShortAnimationDuration);
  (new DecelerateInterpolator());
  (new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
   (1f);
   ();
   mCurrentAnimator = null;
  }
  @Override
  public void onAnimationCancel(Animator animation) {
   (1f);
   ();
   mCurrentAnimator = null;
  }
  });
  ();
  mCurrentAnimator = set;
 }
 });
}

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!