[原创]实现android知乎、一览等的开场动画图片放大效果

代码下载地址：

https://github.com/Carbs0126/AutoZoomInImageView

知乎等app的开场动画为：一张图片被显示到屏幕的正中央，并充满整个屏幕，过一小段时间后，开始慢慢方法，且图片的正中央始终处于屏幕的正中央，也就是“镜头缓慢放大”的效果

难点1.android手机屏幕碎片化。由于是全屏显示，因此一张图片需要放到不同大小的ImageView中，且图片中央需要放到ImageView中央；

难点2.放大时需要保证图片中央与ImageView中央处于一点；

难点3.实现缓慢放大效果（这个可以利用ValueAnimator实现）

实现原理是：采用调整ImageView的matrix的方式来实现此效果。

我将其实现过程拆分为两部：

1.调整图片，使图片位于屏幕的正中间。由于android手机屏幕尺寸多种多样，而图片的大小也不甚相同，为了灵活的使用此效果，需要将任意尺寸比例的图片显示在任意尺寸比例的手机屏幕的正中间，同时不使图片扭曲变形。

2更改float[]的值，然后更新Matrix并应用到ImageView中，从而达到图片zoomin的效果

本篇文章抽象出一个新的view，以便于使用及修改，同时完善了上篇文章由于行文仓促而留下的多个未实现的需求。

实现效果如下：

快速应用到工程：

首先，添加依赖：

compile 'cn.carbs.android:AutoZoomInImageView:1.0.0'

其次，xml布局文件中声明

    <cn.carbs.android.library.AutoZoomInImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/horse" />

最后，在Activity中使用代码：（注意，要在view完全显示出来之后使用，因此这里我用了post(runnable)的方式）

iv.post(new Runnable() {//iv即AutoZoomInImageView

            @Override
            public void run() {
                //简单方式启动放大动画
//                iv.init()
//                  .startZoomInByScaleDeltaAndDuration(0.3f, 1000, 1000);//放大增量是0.3，放大时间是1000毫秒，放大开始时间是1000毫秒以后
                //使用较为具体的方式启动放大动画
                iv.init()
                        .setScaleDelta(0.2f)//放大的系数是原来的（1 + 0.2）倍
                        .setDurationMillis(1500)//动画的执行时间为1500毫秒
                        .setOnZoomListener(new AutoZoomInImageView.OnZoomListener(){
                            @Override
                            public void onStart(View view) {
                                //放大动画开始时的回调
                            }
                            @Override
                            public void onUpdate(View view, float progress) {
                                //放大动画进行过程中的回调 progress取值范围是[0,1]
                            }
                            @Override
                            public void onEnd(View view) {
                                //放大动画结束时的回调
                            }
                        })
                        .start(1000);//延迟1000毫秒启动
            }
        });

主要的代码如下：

1.AutoZoomInImageView的代码为：

  1 package cn.carbs.android.library;
  2 
  3 import android.animation.Animator;
  4 import android.animation.ValueAnimator;
  5 import android.annotation.SuppressLint;
  6 import android.content.Context;
  7 import android.graphics.Matrix;
  8 import android.graphics.drawable.Drawable;
  9 import android.util.AttributeSet;
 10 import android.view.View;
 11 import android.widget.ImageView;
 12 
 13 @SuppressLint("NewApi")
 14 public class AutoZoomInImageView extends ImageView{
 15     
 16     private Drawable mDrawable;
 17     private int mDrawableW;
 18     private int mDrawableH;
 19     
 20     private int mImageViewW;
 21     private int mImageViewH;
 22     
 23     private Matrix mMatrix;
 24     private float[] mValues = new float[9];
 25 
 26     private float mScaleDelta = 0.2f;
 27     private long mDurationMillis = 700;
 28 
 29     public AutoZoomInImageView(Context context) {
 30         super(context);
 31         this.setScaleType(ScaleType.MATRIX);
 32     }
 33     
 34     public AutoZoomInImageView(Context context, AttributeSet attrs) {
 35         super(context, attrs);
 36         this.setScaleType(ScaleType.MATRIX);
 37     }
 38     
 39     public AutoZoomInImageView(Context context, AttributeSet attrs, int defStyle) {
 40         super(context, attrs, defStyle);
 41         this.setScaleType(ScaleType.MATRIX);
 42     }
 43     
 44     public AutoZoomInImageView init(){
 45         initInternalValues();
 46         initPicturePosition();
 47         return this;
 48     }
 49     
 50     public void init(Drawable drawable){
 51         initInternalValues(drawable);
 52         initPicturePosition();
 53     }
 54 
 55     private void initInternalValues(){
 56         mDrawable = getDrawable();
 57         
 58         if(mDrawable == null){
 59             throw new IllegalArgumentException("please set the source of AutoZoomInImageView");
 60         }
 61         
 62         mDrawableW = mDrawable.getIntrinsicWidth();
 63         mDrawableH = mDrawable.getIntrinsicHeight();
 64         
 65         mImageViewW = getMeasuredWidth();
 66         mImageViewH = getMeasuredHeight();
 67     
 68         mMatrix = getImageMatrix();
 69         mMatrix.getValues(mValues);
 70     }
 71     
 72     private void initInternalValues(Drawable drawable){
 73         mDrawable = drawable;
 74         
 75         if(mDrawable == null){
 76             throw new IllegalArgumentException("please set the source of AutoZoomInImageView");
 77         }
 78         
 79         mDrawableW = mDrawable.getIntrinsicWidth();
 80         mDrawableH = mDrawable.getIntrinsicHeight();
 81         
 82         mImageViewW = getMeasuredWidth();
 83         mImageViewH = getMeasuredHeight();
 84     
 85         mMatrix = getImageMatrix();
 86         mMatrix.getValues(mValues);
 87     }
 88     
 89     private void initPicturePosition(){
 90         updateMatrixValuesOrigin(mMatrix, mValues, mDrawableW, mDrawableH, mImageViewW, mImageViewH);
 91         setImageMatrix(mMatrix);
 92     }
 93     
 94     private void startZoomInByScaleDelta(final float scaleDelta, long duration){
 95         
 96         final float oriScaleX = mValues[0];
 97         final float oriScaleY = mValues[4];
 98         
 99         ValueAnimator va = ValueAnimator.ofFloat(0, scaleDelta);
100         va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
101             
102             @Override
103             public void onAnimationUpdate(ValueAnimator animation) {
104                 float value = (Float)animation.getAnimatedValue();
105                 if(mOnZoomListener != null) mOnZoomListener.onUpdate(AutoZoomInImageView.this, value / scaleDelta);
106                 updateMatrixValuesSpan(mValues, mDrawableW, mDrawableH, mImageViewW, mImageViewH,
107                         oriScaleX, oriScaleY, value);
108                 mMatrix.setValues(mValues);
109                 setImageMatrix(mMatrix);
110             }
111         });
112         va.addListener(new Animator.AnimatorListener() {
113             @Override
114             public void onAnimationStart(Animator animation) {
115                 if(mOnZoomListener != null) mOnZoomListener.onStart(AutoZoomInImageView.this);
116             }
117 
118             @Override
119             public void onAnimationEnd(Animator animation) {
120                 if(mOnZoomListener != null) mOnZoomListener.onEnd(AutoZoomInImageView.this);
121             }
122             @Override
123             public void onAnimationCancel(Animator animation) {}
124             @Override
125             public void onAnimationRepeat(Animator animation) {}
126         });
127         va.setDuration(duration);
128         va.start();
129     }
130 
131     /**
132      * 开始放大动画
133      * start zooming in
134      * @param scaleDelta        放大的增大倍数，如果是0.2，那么最后大小放大至1.2倍。
135      *                          the scale that the image will add to original scale
136      * @param durationMillis    放大效果的持续时间，单位毫秒。
137      *                          the duration of zoomin animation, in millisecond.
138      * @param delayMillis       开始放大效果的延迟时间，单位毫秒。delayed毫秒后开始放大动画效果。
139      *                          the delayed time of starting zoomin animation, in millisecond.
140      */
141     public void startZoomInByScaleDeltaAndDuration(final float scaleDelta, final long durationMillis, long delayMillis){
142         if(scaleDelta < 0){
143             throw new IllegalArgumentException("scaleDelta should be larger than 0, now scaleDelta is " + scaleDelta);
144         }
145         if(durationMillis < 0){
146             throw new IllegalArgumentException("durationMillis should not be less than 0, now durationMillis is " + durationMillis);
147         }
148         if(delayMillis < 0){
149             throw new IllegalArgumentException("delayMillis should not be less than 0, now delayMillis is " + delayMillis);
150         }
151 
152         postDelayed(new Runnable() {
153             @Override
154             public void run() {
155                 startZoomInByScaleDelta(scaleDelta, durationMillis);
156             }
157         }, delayMillis);
158     }
159 
160     /**
161      * 放大的增大倍数，如果是0.2，那么最后大小放大至1.2倍。
162      * the scale that the image will add to original scale
163      * @param scaleDelta
164      * @return
165      */
166     public AutoZoomInImageView setScaleDelta(float scaleDelta){
167         mScaleDelta = scaleDelta;
168         return this;
169     }
170 
171     /**
172      * 放大效果的持续时间，单位毫秒。
173      * the duration of zoomin animation, in millisecond.
174      * @param durationMillis
175      * @return
176      */
177     public AutoZoomInImageView setDurationMillis(long durationMillis){
178         mDurationMillis = durationMillis;
179         return this;
180     }
181 
182     /**
183      * 动画结束的回调
184      * callback when zoomin animation finished
185      * @param onZoomListener
186      * @return
187      */
188     public AutoZoomInImageView setOnZoomListener(OnZoomListener onZoomListener){
189         mOnZoomListener = onZoomListener;
190         return this;
191     }
192 
193     /**
194      * 开始放大效果
195      * start animation of zoomin
196      * @param delayMillis       开始放大效果的延迟时间，单位毫秒。delayed毫秒后开始放大动画效果
197      *                          the delayed time of starting zoomin animation, in millisecond.
198      */
199     public void start(long delayMillis){
200         postDelayed(new Runnable() {
201             @Override
202             public void run() {
203                 startZoomInByScaleDelta(mScaleDelta, mDurationMillis);
204             }
205         }, delayMillis);
206     }
207 
208     private void updateMatrixValuesOrigin(Matrix outMatrix, float[] outValues, float drawW, float drawH, float imageW, float imageH){
209         
210         if(outMatrix == null || outValues == null){
211             throw new IllegalArgumentException("please set the source of AutoZoomInImageView's matrix and values");
212         }
213         
214         outMatrix.reset();
215         
216         if((imageH * drawW > drawH * imageW)){
217             float scale1 = (imageH)/(drawH);
218             float offset1 = (drawW * scale1 - imageW)/2;
219             
220             outMatrix.postScale(scale1, scale1);
221             outMatrix.postTranslate(-offset1, 0);
222                     
223         }else{
224             float scale2 = (imageW)/(drawW);
225             float offset2 = (drawH * scale2 - imageH)/2;
226 
227             outMatrix.postScale(scale2, scale2);
228             outMatrix.postTranslate(0, -offset2);
229         }
230         outMatrix.getValues(outValues);
231     }
232     
233     private void updateMatrixValuesSpan(float[] outValues,
234                                         float drawW, float drawH,
235                                         float imageW, float imageH,
236                                         float oriScaleX, float oriScaleY,
237                                         float scaleDelta){
238         //根据四个参数：图片的宽高、控件的宽高，动态的计算出输出的矩阵（float数组）的值
239         outValues[0] = oriScaleX * (1 + scaleDelta);
240         outValues[4] = oriScaleY * (1 + scaleDelta);
241         float offsetwidth = (drawW * outValues[0] - imageW)/2;
242         outValues[2] = - offsetwidth;
243         float offsetHeight = (drawH * outValues[0] - imageH)/2;
244         outValues[5] = - offsetHeight;
245     }
246 
247     private OnZoomListener mOnZoomListener;
248     public interface OnZoomListener{
249         /**
250          * 动画更新时执行的回调
251          * @param view      返回此AutoZoomInImageView
252          * @param progress  返回动画进行过程，范围是[0,1]
253          */
254         void onUpdate(View view, float progress);
255         void onEnd(View view);
256         void onStart(View view);
257     }
258 
259 
260     //function for log
261     public String printMyMatrix(Matrix m){
262         float[] valueFloat = new float[9];
263         m.getValues(valueFloat);
264         
265         String s = "";
266         for(int i = 0; i < 9; i++){
267             s = s + " [ " + valueFloat[i] + " ] ";
268         }
269         return s;
270     }
271         
272     //function for log
273     public String printMyValue(float[] valueFloat){
274         String s = "";
275         for(int i = 0; i < 9; i++){
276             s = s + " [ " + valueFloat[i] + " ] ";
277         }
278         return s;
279     }
280     
281 }

2.代码中调用AutoZoomInImageView启用动画的方法：

 1 iv.post(new Runnable() {//iv即AutoZoomInImageView
 2 
 3             @Override
 4             public void run() {
 5                 //简单方式启动放大动画
 6 //                iv.init()
 7 //                  .startZoomInByScaleDeltaAndDuration(0.3f, 1000, 1000);//放大增量是0.3，放大时间是1000毫秒，放大开始时间是1000毫秒以后
 8                 //使用较为具体的方式启动放大动画
 9                 iv.init()
10                         .setScaleDelta(0.2f)//放大的系数是原来的（1 + 0.3）倍
11                         .setDurationMillis(1500)//动画的执行时间为1000毫秒
12                         .setOnZoomListener(new AutoZoomInImageView.OnZoomListener(){
13                             @Override
14                             public void onStart(View view) {
15                                 //放大动画开始时的回调
16                             }
17                             @Override
18                             public void onUpdate(View view, float progress) {
19                                 //放大动画进行过程中的回调 progress取值范围是[0,1]
20                             }
21                             @Override
22                             public void onEnd(View view) {
23                                 //放大动画结束时的回调
24                             }
25                         })
26                         .start(1000);//延迟1000毫秒启动
27             }
28         });

3.xml文件中声明此view：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <cn.carbs.android.library.AutoZoomInImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/horse" />

</LinearLayout>

代码下载地址：

https://github.com/Carbs0126/AutoZoomInImageView