使用动画缩放图片

我们的app经常遇到这样一种场景，就是小图到大图的转换，这时候如果有个缩放动画就会很自然。本节将介绍如何使用动画进行缩放图片，在点击头像看大图这种场景可以使用。本文的例子的示意图如下所示：

创建View

布局主要包含两个View，一个ImageButton用于加载缩略图，一个ImageView用于显示大图。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".animation.EnlargeImageActivity">

    <ImageButton
        android:id="@+id/imageBtn"
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:scaleType="centerCrop"
        android:src="@drawable/pic_11"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/pic_11"
        android:visibility="invisible"/>

</android.support.constraint.ConstraintLayout>

设置缩放动画

ImageButtton触发动画，这里就不赘述了。

缩放动画

大体上，你需要从正常尺寸的View的界限动画到大尺寸的View的界限。下面的方法通过四步介绍了如何实现一个从缩略图到大图的放大动画。

分配大图给ImageView，即放大后的View。下面的代码是在主线程中加载图片的，这个过程在现实app中一般是要进行网络操作的，需要放在非UI线程。理想状态下，这个图片的尺寸是不应该超过屏幕尺寸的。
计算ImageView的起始和结束尺寸。
从起始尺寸同时动画四个属性：X、Y、SCALE_X和SCALE_Y。这四个参数一起加入到AnimationSet，以便可以同时动画。
使用一个相似的动画作用于大的ImageView，当点击后，图片缩小回去，最后隐藏ImageView。

从小到大动画

代码如下：

//从小到大
    private fun zoomImageFromThumb() {

        mCurrentAnimator?.cancel()

        imageView.setImageResource(R.drawable.pic_11)

        //获取尺寸
        val startBoundsInt = Rect()
        val finalBoundsInt = Rect()
        val globalOffset = Point()

        imageBtn.getGlobalVisibleRect(startBoundsInt)
        imageView.getGlobalVisibleRect(finalBoundsInt, globalOffset)
        //调整使top=left=0
        startBoundsInt.offset(-globalOffset.x, -globalOffset.y)
        finalBoundsInt.offset(-globalOffset.x, -globalOffset.y)

        val startBounds = RectF(startBoundsInt)
        val finalBounds = RectF(finalBoundsInt)

        //计算宽高缩放比
        val startScale: Float
        if ((finalBounds.width() / finalBounds.height() > startBounds.width() / startBounds.height())) {
            startScale = startBounds.height() / finalBounds.height()
            val startWidth: Float = startScale * finalBounds.width()
            val deltaWidth: Float = (startWidth - startBounds.width()) / 2
            startBounds.left -= deltaWidth.toInt()
            startBounds.right += deltaWidth.toInt()
        } else {
            // Extend start bounds vertically
            startScale = startBounds.width() / finalBounds.width()
            val startHeight: Float = startScale * finalBounds.height()
            val deltaHeight: Float = (startHeight - startBounds.height()) / 2f
            startBounds.top -= deltaHeight.toInt()
            startBounds.bottom += deltaHeight.toInt()
        }

        imageBtn.visibility = View.INVISIBLE
        imageView.visibility = View.VISIBLE

        imageView.pivotX = 0f
        imageView.pivotY = 0f

        mCurrentAnimator = AnimatorSet().apply {
            //x、y、scaleX、scaleY四个维度一起动画
            play(ObjectAnimator.ofFloat(
                    imageView,
                    View.X,
                    startBounds.left,
                    finalBounds.left)
            ).apply {
                with(ObjectAnimator.ofFloat(imageView, View.Y, startBounds.top, finalBounds.top))
                with(ObjectAnimator.ofFloat(imageView, View.SCALE_X, startScale, 1f))
                with(ObjectAnimator.ofFloat(imageView, View.SCALE_Y, startScale, 1f))
            }
            duration = mShortAnimationDuration.toLong()
            interpolator = DecelerateInterpolator()
            addListener(object : AnimatorListenerAdapter() {

                override fun onAnimationEnd(animation: Animator) {
                    mCurrentAnimator = null
                }

                override fun onAnimationCancel(animation: Animator) {
                    mCurrentAnimator = null
                }
            })
            start()
        }
    }