放缩Zooming
- 原文链接
- 创建视图
- 设置缩放动画
- 实现放缩效果

放缩（Zooming）

原文链接

本篇博文介绍如何实现点击-放缩动画效果。当需要在缩略图和原图之间进行切换时（例如Gallery），缩放动画非常实用。

下面是缩放动画效果：

创建新项目，并且在相应目录创建下面三个文件

src/TouchHighlightImageButton.java

src/ZoomActivity.java

layout/activity_zoom.xml

创建视图

创建一个布局文件，其中包含所需放缩的小版本和大版本的内容。下面的例子中，创建了一个ImageButton（展示照片的缩略图）以及一个ImageView（展示原图）:

<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><!-- This initially-hidden ImageView will hold the expanded/zoomed version ofthe images above. Without transformations applied, it takes up the entirescreen. To achieve the "zoom" animation, this view's bounds are animatedfrom the bounds of the thumbnail button above, to its final laid-outbounds.--><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>

设置缩放动画

写好布局文件后，设置事件监听器，在需要的时候放缩视图。在我们的例子中，通过监听ImageButton 的View.OnClickListener事件，执行放缩动画。

public class ZoomActivity extends FragmentActivity {// Hold a reference to the current animator,// so that it can be canceled mid-way.private Animator mCurrentAnimator;// The system "short" animation time duration, in milliseconds. This// duration is ideal for subtle animations or animations that occur// very frequently.private int mShortAnimationDuration;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_zoom);// Hook up clicks on the thumbnail views.final View thumb1View = findViewById(R.id.thumb_button_1);thumb1View.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {zoomImageFromThumb(thumb1View, R.drawable.image1);}});// Retrieve and cache the system's default "short" animation time.mShortAnimationDuration = getResources().getInteger(android.R.integer.config_shortAnimTime);}...
}

实现放缩效果

通常情况下，需要将正常大小的视图放大到大尺寸。下面的方法展示了如何实现缩放动画：
1. 分配高质量的图片资源给隐藏的需要放大的ImageView 。下面的例子简单地在UI线程加载一张大图，实际项目中应该另起一个线程，同时在UI线程使用Bitmap，防止阻塞UI线程。理想情况下，Bitmap的大小应该小于屏幕的大小。
2. 计算ImageView的起始和结束边界。
3. 从开始到结束，X，Y，SCALE_X，SCALE_Y 四个值同时进行变化。四个动画同时添加到AnimatorSet 中，他们将会同时开始。
4. 缩小与放大相似，点击屏幕时，图片缩小。添加View.OnClickListener 监听器，监听ImageView的点击事件。当点击ImageView时，最小化使之变回为缩略图，并且设置其visibility 为GONE。

private void zoomImageFromThumb(final View thumbView, int imageResId) {// If there's an animation in progress, cancel it// immediately and proceed with this one.if (mCurrentAnimator != null) {mCurrentAnimator.cancel();}// Load the high-resolution "zoomed-in" image.final ImageView expandedImageView = (ImageView) findViewById(R.id.expanded_image);expandedImageView.setImageResource(imageResId);// Calculate the starting and ending bounds for the zoomed-in image.// This step involves lots of math. Yay, math.final Rect startBounds = new Rect();final Rect finalBounds = new Rect();final Point globalOffset = new Point();// The start bounds are the global visible rectangle of the thumbnail,// and the final bounds are the global visible rectangle of the container// view. Also set the container view's offset as the origin for the// bounds, since that's the origin for the positioning animation// properties (X, Y).thumbView.getGlobalVisibleRect(startBounds);findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset);startBounds.offset(-globalOffset.x, -globalOffset.y);finalBounds.offset(-globalOffset.x, -globalOffset.y);// 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).float startScale;if ((float) finalBounds.width() / finalBounds.height()> (float) startBounds.width() / startBounds.height()) {// Extend start bounds horizontallystartScale = (float) startBounds.height() / finalBounds.height();float startWidth = startScale * finalBounds.width();float deltaWidth = (startWidth - startBounds.width()) / 2;startBounds.left -= deltaWidth;startBounds.right += deltaWidth;} else {// Extend start bounds verticallystartScale = (float) startBounds.width() / finalBounds.width();float startHeight = startScale * finalBounds.height();float deltaHeight = (startHeight - startBounds.height()) / 2;startBounds.top -= deltaHeight;startBounds.bottom += 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.thumbView.setAlpha(0f);expandedImageView.setVisibility(View.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).expandedImageView.setPivotX(0f);expandedImageView.setPivotY(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(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() {@Overridepublic void onAnimationEnd(Animator animation) {mCurrentAnimator = null;}@Overridepublic void onAnimationCancel(Animator animation) {mCurrentAnimator = null;}});set.start();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.final float startScaleFinal = startScale;expandedImageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (mCurrentAnimator != null) {mCurrentAnimator.cancel();}// Animate the four positioning/sizing properties in parallel,// back to their original values.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() {@Overridepublic void onAnimationEnd(Animator animation) {thumbView.setAlpha(1f);expandedImageView.setVisibility(View.GONE);mCurrentAnimator = null;}@Overridepublic void onAnimationCancel(Animator animation) {thumbView.setAlpha(1f);expandedImageView.setVisibility(View.GONE);mCurrentAnimator = null;}});set.start();mCurrentAnimator = set;}});
}

Android Animations（四）：放缩（Zooming）相关推荐

Android中四种补间动画的使用示例(附代码下载)
场景 Android中四种补间动画. 透明度渐变动画旋转动画缩放动画平移动画注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的 ...
android的四种启动模式,(转)彻底弄懂Activity四大启动模式
原地址:https://blog..net/mynameishuangshuai/article/details/51491074 最近有几位朋友给我留言,让我谈一下对Activity启动模式的理解. ...
Android Espresso(四)——RecyclerView
文章目录 Android Espresso(四)--RecyclerView RecyclerViewActions API RecyclerView已定义API测试代码 RecyclerView自定 ...
Android Camera 四 Camera HAL 分析
Android Camera 一源码路径 Android Camera 二 JNI JAVA和C/CPP图像数据传输流程分析 Android Camera 三 CameraService 和 Cli ...
Android多媒体四：MediaRecorder录制视频短片
Android多媒体四:MediaRecorder录制视频短片 MediaRecorder除了可用于录制音频之外,还可用于录制视频,使用MediaRecorder录制视频与录制音频的步骤基本相同. 只 ...
小米3连续快速点击android版本四次后出现屏幕是红的咋耨,小米3怎么打开usb调试...
小米3怎么打开usb调试安卓手机要连接电脑,就必须开启USB调试模式,而通常手机默认是关闭USB调试模式的,这导致了不少用户无法成功将手机连接电脑,另外一些搭载安卓4.1以上系统的手机,开启USB调 ...
android camera(四)：camera 驱动 GT2005
关键词:android camera CMM 模组 camera参数 GT2005 摄像头常见问题平台信息: 内核:linux 系统:android 平台:S5PV310(samsung exy ...
android如何在底部显示四个按钮,[Android系列—] 四. 添加操作栏(Action Bar)
[Android系列-] 4. 添加操作栏(Action Bar) 前言操作栏是最重要的设计元素之一,使用它来实现你的应用程序活动.通过提供多种用户界面功能, 使应用程序快速和其他的Andorid应 ...
Android：四种启动模式分析
2019独角兽企业重金招聘Python工程师标准>>> 在一个项目中会包括着多个Activity,系统中使用任务栈来存储创建的Activity实例,任务栈是一种"后进先出& ...

Android Animations（四）：放缩（Zooming）