使用动画缩放图片

Posted xingfeng_coder

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用动画缩放图片相关的知识，希望对你有一定的参考价值。

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

创建View

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


 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout
  3.  android:id="@+id/container"
  4.  xmlns:android="http://schemas.android.com/apk/res/android"
  5.  xmlns:app="http://schemas.android.com/apk/res-auto"
  6.  xmlns:tools="http://schemas.android.com/tools"
  7.  android:layout_width="match_parent"
  8.  android:layout_height="match_parent"
  9.  tools:context=".animation.EnlargeImageActivity">
  11.  <ImageButton
  12.  android:id="@+id/imageBtn"
  13.  android:layout_width="100dp"
  14.  android:layout_height="75dp"
  15.  android:scaleType="centerCrop"
  16.  android:src="@drawable/pic_11"/>
  18.  <ImageView
  19.  android:id="@+id/imageView"
  20.  android:layout_width="match_parent"
  21.  android:layout_height="match_parent"
  22.  android:src="@drawable/pic_11"
  23.  android:visibility="invisible"/>
  25. </android.support.constraint.ConstraintLayout>

 
设置缩放动画

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

 
缩放动画

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

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

 
从小到大动画

 
代码如下：

 

 
  1. //从小到大
  2.  private fun zoomImageFromThumb() 
  4.  mCurrentAnimator?.cancel()
  6.  imageView.setImageResource(R.drawable.pic_11)
  8.  //获取尺寸
  9.  val startBoundsInt = Rect()
  10.  val finalBoundsInt = Rect()
  11.  val globalOffset = Point()
  13.  imageBtn.getGlobalVisibleRect(startBoundsInt)
  14.  imageView.getGlobalVisibleRect(finalBoundsInt, globalOffset)
  15.  //调整使top=left=0
  16.  startBoundsInt.offset(-globalOffset.x, -globalOffset.y)
  17.  finalBoundsInt.offset(-globalOffset.x, -globalOffset.y)
  19.  val startBounds = RectF(startBoundsInt)
  20.  val finalBounds = RectF(finalBoundsInt)
  22.  //计算宽高缩放比
  23.  val startScale: Float
  24.  if ((finalBounds.width() / finalBounds.height() > startBounds.width() / startBounds.height())) 
  25.  startScale = startBounds.height() / finalBounds.height()
  26.  val startWidth: Float = startScale * finalBounds.width()
  27.  val deltaWidth: Float = (startWidth - startBounds.width()) / 2
  28.  startBounds.left -= deltaWidth.toInt()
  29.  startBounds.right += deltaWidth.toInt()
  30.   else 
  31.  // Extend start bounds vertically
  32.  startScale = startBounds.width() / finalBounds.width()
  33.  val startHeight: Float = startScale * finalBounds.height()
  34.  val deltaHeight: Float = (startHeight - startBounds.height()) / 2f
  35.  startBounds.top -= deltaHeight.toInt()
  36.  startBounds.bottom += deltaHeight.toInt()
  37.  
  39.  imageBtn.visibility = View.INVISIBLE
  40.  imageView.visibility = View.VISIBLE
  42.  imageView.pivotX = 0f
  43.  imageView.pivotY = 0f
  45.  mCurrentAnimator = AnimatorSet().apply 
  46.  //x、y、scaleX、scaleY四个维度一起动画
  47.  play(ObjectAnimator.ofFloat(
  48.  imageView,
  49.  View.X,
  50.  startBounds.left,
  51.  finalBounds.left)
  52.  ).apply 
  53.  with(ObjectAnimator.ofFloat(imageView, View.Y, startBounds.top, finalBounds.top))
  54.  with(ObjectAnimator.ofFloat(imageView, 以上是关于使用动画缩放图片的主要内容，如果未能解决你的问题，请参考以下文章
     

     android 仿头条 微信大图预览动画 双击缩放 保存至相册
    

     为不同的屏幕尺寸提供不同的图片（为那些没有必要下载全尺寸大图的设备节省带宽）
    

     Android 使用Picasso加载网络图片等比例缩放
    

     Flutter 尺寸缩放形状颜色阴影变换动画
    

     android 不用XML，怎样在代码里用animation同时实现图片的缩放和移动。
    

     新浪微博gif图片最大有效显示尺寸是多少