zoom动画,实现图片点击预览效果


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

 1.创建Views

下面的布局包括了你想要zoom的大版本和小版本的view。

1.ImageButton是小版本的,能点击的,点击后显示大版本的ImageView。

2.ImageView是大版本的,可以显示ImageButton点击后的样式。

3.ImageView一开始是不可见的(invisible),当ImageButton点击后,它会实现zoom动画,就像从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         <ImageButton
12             android:id="@+id/thumb_button_1"
13             android:layout_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     <!-- 这个不可见的ImageView持有上面的ImageButton zoom后的图片版本。
23     动画没有发生之前,它占据了整个屏幕。动画开始,这个View从上面
24     ImageButton的范围变化到他自己最终的范围。
25          -->
26 
27     <ImageView
28         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.设置zoom动画

  在ImageButton上设置点击事件,执行zoom动画

 1 public class ZoomActivity extends FragmentActivity {
 2     // 保存下当前动画类,以便可以随时结束动画
 3     private Animator mCurrentAnimator;
 4 
 5     //系统的短时长动画持续时间(单位ms)
 6     // 对于不易察觉的动画或者频繁发生的动画
 7     // 这个动画持续时间是最理想的
 8     private int mShortAnimationDuration;
 9 
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.activity_zoom);
14 
15         // 给ImageButton设置点击事件
16         final View thumb1View = findViewById(R.id.thumb_button_1);
17         thumb1View.setOnClickListener(new View.OnClickListener() {
18             @Override
19             public void onClick(View view) {
20         //执行zoom动画方法
21                 zoomImageFromThumb(thumb1View, R.drawable.image1);
22             }
23         });
24 
25         //取回系统默认的短时长动画持续时间
26         mShortAnimationDuration = getResources().getInteger(
27                 android.R.integer.config_shortAnimTime);
28     }
29     ...
30 }

 3.实现zoom动画

  你需要把从正常大小的view到扩大以后的view这个过程作成动画。

1.指定想要zoom的图片给ImageView。(理想情况下,这个bitmap的大小不应该比屏幕大)

2.计算这个ImageView的开始和结束位置

3.把四个点和缩放大小的属性同时作成动画,从开始的状态到结束的状态。这四个动画被添加到AnimatorSet中,方便他们同时执行。

4.当用户再次点击屏幕时,动画要执行回去。一样道理,给ImageView一个View.OnClickListener,然后隐藏ImageView。

  1 private void zoomImageFromThumb(final View thumbView, int imageResId) {
  2     // 如果有动画在执行,立即取消,然后执行现在这个动画
  3     if (mCurrentAnimator != null) {
  4         mCurrentAnimator.cancel();
  5     }
  6 
  7     // 加载高分辨率的图片
  8     final ImageView expandedImageView = (ImageView) findViewById(
  9             R.id.expanded_image);
 10     expandedImageView.setImageResource(imageResId);
 11 
 12     // 计算开始和结束位置的图片范围
 13     final Rect startBounds = new Rect();
 14     final Rect finalBounds = new Rect();
 15     final Point globalOffset = new Point();
 16 
 17     // 开始的范围就是ImageButton的范围,
 18     // 结束的范围是容器(FrameLayout)的范围
 19     // getGlobalVisibleRect(Rect)得到的是view相对于整个硬件屏幕的Rect
 20     // 即绝对坐标,减去偏移,获得动画需要的坐标,即相对坐标
 21     // getGlobalVisibleRect(Rect,Point)中,Point获得的是view在它在
 22     // 父控件上的坐标与在屏幕上坐标的偏移
 23     thumbView.getGlobalVisibleRect(startBounds);
 24     findViewById(R.id.container)
 25             .getGlobalVisibleRect(finalBounds, globalOffset);
 26     startBounds.offset(-globalOffset.x, -globalOffset.y);
 27     finalBounds.offset(-globalOffset.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     // 下面这段逻辑其实就是保持纵横比
 35     float startScale;
 36     // 如果结束图片的宽高比比开始图片的宽高比大
 37     // 就是结束时“视觉上”拉宽了(压扁了)图片
 38     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 += deltaWidth;
 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 animation
 56     // begins, it will position the zoomed-in view in the place of the
 57     // thumbnail.
 58 
 59     // 隐藏小的图片,展示大的图片。当动画开始的时候,
 60     // 要把大的图片发在小的图片的位置上
 61 
 62     //小的设置透明
 63     thumbView.setAlpha(0f);
 64     //大的可见
 65     expandedImageView.setVisibility(View.VISIBLE);
 66 
 67     // Set the pivot 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.setPivotX(0f);
 71     expandedImageView.setPivotY(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, View.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 onAnimationCancel(Animator animation) {
 94             mCurrentAnimator = null;
 95         }
 96     });
 97     set.start();
 98     mCurrentAnimator = set;
 99 
100     // Upon clicking the zoomed-in image, it should zoom back down
101     // to the original bounds and show the thumbnail instead of
102     // the expanded image.
103 
104     // 再次点击返回小的图片,就是上面扩大的反向动画。即预览完成
105     final float startScaleFinal = startScale;
106     expandedImageView.setOnClickListener(new View.OnClickListener() {
107         @Override
108         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(ObjectAnimator
117                         .ofFloat(expandedImageView, View.X, startBounds.left))
118                         .with(ObjectAnimator
119                                 .ofFloat(expandedImageView,
120                                         View.Y,startBounds.top))
121                         .with(ObjectAnimator
122                                 .ofFloat(expandedImageView,
123                                         View.SCALE_X, startScaleFinal))
124                         .with(ObjectAnimator
125                                 .ofFloat(expandedImageView,
126                                         View.SCALE_Y, startScaleFinal));
127             set.setDuration(mShortAnimationDuration);
128             set.setInterpolator(new DecelerateInterpolator());
129             set.addListener(new AnimatorListenerAdapter() {
130                 @Override
131                 public void onAnimationEnd(Animator animation) {
132                     thumbView.setAlpha(1f);
133                     expandedImageView.setVisibility(View.GONE);
134                     mCurrentAnimator = null;
135                 }
136 
137                 @Override
138                 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 }

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM