参考: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 }