Android仿微信朋友圈圖片打開退出過渡動畫

大家好，最近又是不斷地改需求，終於閒下來了。看到微信朋友圈的圖片打開退出的過渡動畫，正好我們項目中也有類似功能，但是轉換效果乾巴巴的，麻麻賴賴的，一點都不圓潤。沒關係，盤他！先來看我實現的效果：

實現大致原理就是將當前點擊的ImageView 在屏幕中的位置以及寬高傳入到大圖界面，在大圖界面加了一個放大動畫。同理，退出動畫獲取大圖界面選中的position所對應外面的當前position的ImageView的位置及寬高設置一個縮小動畫。

首先獲取所有ImageView的位置及寬高，一個也是如此，在這裏我新建了一個模型實現了Parcelable接口，用來存所有的ImageView位置寬高並進行傳遞。期初我本來想將所有的ImageView 用Intent傳遞，卻不知道怎麼傳。。。如果有知道的可以告知我一下。

package com.kairui.discounts.bean;

import android.os.Parcel;
import android.os.Parcelable;

/**
 * Created by fySpring
 * Date : 2019-03-19
 * To do :
 */

public class ImgOptionEntity implements Parcelable{
    private int left;
    private int top;
    private int width;
    private int height;
    private String imgUrl;

    public ImgOptionEntity() {

    }

    public ImgOptionEntity(int left,int top, int width, int height) {
        this.left = left;
        this.top = top;
        this.width = width;
        this.height = height;
    }

    protected ImgOptionEntity(Parcel in) {
        top = in.readInt();
        left = in.readInt();
        width = in.readInt();
        height = in.readInt();
        imgUrl = in.readString();
    }

    public static final Creator<ImgOptionEntity> CREATOR = new Creator<ImgOptionEntity>() {
        @Override
        public ImgOptionEntity createFromParcel(Parcel in) {
            return new ImgOptionEntity(in);
        }

        @Override
        public ImgOptionEntity[] newArray(int size) {
            return new ImgOptionEntity[size];
        }
    };

    public int getTop() {
        return top;
    }

    public void setTop(int top) {
        this.top = top;
    }

    public int getLeft() {
        return left;
    }

    public void setLeft(int left) {
        this.left = left;
    }

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public String getImgUrl() {
        return imgUrl;
    }

    public void setImgUrl(String imgUrl) {
        this.imgUrl = imgUrl;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeInt(top);
        dest.writeInt(left);
        dest.writeInt(width);
        dest.writeInt(height);
        dest.writeString(imgUrl);
    }
}

 遍歷獲取所有寬高進行跳轉

//這裏就是當前獲取到的所有ImageVIew 的 list，換成你的即可
ArrayList<ImageView> imgDatas = new ArrayList<>();

ArrayList<ImgOptionEntity> optionEntities = new ArrayList<>();
int[] screenLocationS = new int[2];
for (int i = 0; i < imgDatas.size(); i++) {
    ImageView img = imgDatas.get(i);
    //獲取當前ImageView 在屏幕中的位置 寬高
    img.getLocationOnScreen(screenLocationS);
    ImgOptionEntity entity = new 
    ImgOptionEntity(screenLocationS[0],screenLocationS[1],img.getWidth(),img.getHeight());
    optionEntities.add(entity);
}

Intent bIntent = new Intent(this, BigImgViewActivity.class);
bIntent.putExtra(ConstantCode.imgPosition, curPosition);
bIntent.putParcelableArrayListExtra(ConstantCode.optionEntities, optionEntities);
startActivity(bIntent);
//取消原有默認的Activity到Activity的過渡動畫
overridePendingTransition(0, 0);

接下來關鍵的代碼都在大圖界面了，這裏我用了ViewPager + PhotoView，你可以只有ImageView來查看也可以。註釋都在代碼裏了，無用的代碼我都刪除，只留下了和功能相關的代碼

/**
 * Created by fySpring
 * Date : 2019-03-19
 * To do :全屏查看大圖頁面
 */

public class BigImgViewActivity extends BaseActivity implements ViewPager.OnPageChangeListener {

    private static final int DURATION = 250;

    @Bind(R.id.big_image_list_vp)
    private ViewPager imgListVp;
    @Bind(R.id.big_image_num_tv)
    private TextView imageNumTv;
    @Bind(R.id.big_image_bg_rl)
    private RelativeLayout bgRl;

    private int imgPosition;
    private List<PhotoView> photoViewList;
    //開始的座標值
    private int startY;
    private int startX;
    //開始的寬高
    private int startWidth;
    private int startHeight;
    //X、Y的移動距離
    private int xDelta;
    private int yDelta;
    //X、Y的縮放比例
    private float mWidthScale;
    private float mHeightScale;
    //背景色
    private ColorDrawable colorDrawable;
    //當前選中的photoView
    private PhotoView curPhotoView;
    //所有圖片的位置大小參數
    private ArrayList<ImgOptionEntity> optionEntities;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_big_image);

        initView();
        initData();
    }

    @Override
    protected void initView() {
        //修改狀態欄顏色
        StatusBarUtil.setColorNoTranslucent(this, Color.BLACK);
        //全屏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        //設置背景色，後面需要爲其設置漸變動畫
        colorDrawable = new ColorDrawable(ContextCompat.getColor(this, R.color.black));
        bgRl.setBackground(colorDrawable);
    }

    @Override
    protected void initData() {
        photoViewList = new ArrayList<>();
        imgPosition = getIntent().getIntExtra(ConstantCode.imgPosition, 0);
        //獲取到當前所有ImageView對應的位置
        optionEntities = getIntent().getParcelableArrayListExtra(ConstantCode.optionEntities);

        if (optionEntities != null && !optionEntities.isEmpty()) {
            //設置選中的位置來初始化動畫
            ImgOptionEntity entity = optionEntities.get(imgPosition);

            startY = entity.getTop();
            startX = entity.getLeft();
            startWidth = entity.getWidth();
            startHeight = entity.getHeight();

            imageNumTv.setText(imgPosition + 1 + "/" + optionEntities.size());
            for (int i = 0; i < optionEntities.size(); i++) {
                addItemPhotoView(optionEntities.get(i).getImgUrl());
            }
            if (optionEntities.size() == 1) imageNumTv.setVisibility(View.GONE);
            else imageNumTv.setVisibility(View.VISIBLE);
        }

        ImageListAdapter imageListAdapter = new ImageListAdapter();
        imgListVp.setAdapter(imageListAdapter);
        imgListVp.setOnPageChangeListener(this);
        imgListVp.setCurrentItem(imgPosition);

        if (!photoViewList.isEmpty()) {
            curPhotoView = photoViewList.get(imgPosition);
            //註冊一個回調函數，當一個視圖樹將要繪製時調用這個回調函數。
            ViewTreeObserver observer = curPhotoView.getViewTreeObserver();
            observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    curPhotoView.getViewTreeObserver().removeOnPreDrawListener(this);
                    int[] screenLocation = new int[2];
                    curPhotoView.getLocationOnScreen(screenLocation);
                    //動畫需要移動的距離
                    xDelta = startX - screenLocation[0];
                    yDelta = startY - screenLocation[1];
                    //計算縮放比例
                    mWidthScale = (float) startWidth / curPhotoView.getWidth();
                    mHeightScale = (float) startHeight / curPhotoView.getHeight();
                    enterAnimation(new Runnable() {
                        @Override
                        public void run() {
                            //開始動畫之後要做的操作
                        }
                    });
                    //返回 true 繼續繪製，返回false取消。
                    return true;
                }
            });
        }
    }


    private void enterAnimation(final Runnable enterAction) {
        //放大動畫
        curPhotoView.setPivotX(0);
        curPhotoView.setPivotY(0);
        curPhotoView.setScaleX(mWidthScale);
        curPhotoView.setScaleY(mHeightScale);
        curPhotoView.setTranslationX(xDelta);
        curPhotoView.setTranslationY(yDelta);
        TimeInterpolator sDecelerator = new DecelerateInterpolator();
        curPhotoView.animate().setDuration(DURATION).scaleX(1).scaleY(1).
                translationX(0).translationY(0).setInterpolator(sDecelerator).withEndAction(enterAction);
        //設置背景漸變成你設置的顏色
        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0, 255);
        bgAnim.setDuration(DURATION);
        bgAnim.start();
    }

    private void exitAnimation(final Runnable endAction) {
        //縮小動畫
        curPhotoView.setPivotX(0);
        curPhotoView.setPivotY(0);
        curPhotoView.setScaleX(1);
        curPhotoView.setScaleY(1);
        curPhotoView.setTranslationX(0);
        curPhotoView.setTranslationY(0);

        TimeInterpolator sInterpolator = new AccelerateInterpolator();
        curPhotoView.animate().setDuration(DURATION).scaleX(mWidthScale).scaleY(mHeightScale).
                translationX(xDelta).translationY(yDelta).setInterpolator(sInterpolator).withEndAction(endAction);
        //設置背景漸透明
        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0);
        bgAnim.setDuration(DURATION);
        bgAnim.start();
    }


    @Override
    public void onBackPressed() {
        int[] screenLocation = new int[2];
        curPhotoView.getLocationOnScreen(screenLocation);
        xDelta = startX - screenLocation[0];
        yDelta = startY - screenLocation[1];
        mWidthScale = (float) startWidth / curPhotoView.getWidth();
        mHeightScale = (float) startHeight / curPhotoView.getHeight();

        exitAnimation(new Runnable() {
            public void run() {
                //結束動畫要做的操作
                finish();
                overridePendingTransition(0, 0);
            }
        });
    }

    private void addItemPhotoView(String imgUrlStr) {
        PhotoView photoView = new PhotoView(this);
        Glide.with(this)
                .load(imgUrlStr)
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .crossFade()
                .into(photoView);

        photoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
            @Override
            public void onPhotoTap(View view, float x, float y) {
                onBackPressed();
            }
        });
        photoViewList.add(photoView);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //當ViewPager滾動時重置成position對應外面的ImageView的位置信息
        curPhotoView = photoViewList.get(position);
        if (optionEntities != null && !optionEntities.isEmpty()) {
            ImgOptionEntity entity = optionEntities.get(position);
            startY = entity.getTop();
            startX = entity.getLeft();
            startWidth = entity.getWidth();
            startHeight = entity.getHeight();

            imageNumTv.setText(position + 1 + "/" + optionEntities.size());
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public class ImageListAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return photoViewList.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        /**
         * 載入圖片進去，用當前的position 除以 圖片數組長度取餘數是關鍵
         */
        public Object instantiateItem(android.view.ViewGroup container, int position) {
            container.addView(photoViewList.get(position));
            return photoViewList.get(position);

        }

        public void destroyItem(android.view.ViewGroup container, int position, Object object) {
            container.removeView(photoViewList.get(position));
        }

    }
}

以上的代碼就是全部了，由於是寫在項目裏，就沒有Demo啦，大家要多動手哦~ 

順便打個廣告，上圖所展示的APP叫惠購，由我獨立開發，可以幫你領取到淘寶、京東的大額優惠券，還能返現，各大應用平臺都可以下載，記得填我的邀請碼哦（HXFNUN）。如果你安裝了這個App，使用遇到什麼問題，請一定要告訴我，因爲我的測試機太少了 emmmm.....