仿微信朋友圈预览功能

话不多说，先上图

主要功能就是如图中所示，点击图片放大，拖拽图片缩小到列表中图片位置处消失。

这个功能其实原理是这样的（我猜）：

首先点击列表中的图片跳转到新的Acticity进行预览，当然这个Activity必须是透明的；
跳转的时候需要将列表图片的屏幕位置和宽高传递到新Activity中；
新Activity中监听touch事件，当手指下滑足够距离的时候让预览图在当前Activity中移动到第2步中的屏幕位置并将宽高缩放到列表图片相同的状态，最后finish新Activity(使用渐隐动画)。

下面介绍一下关键代码：

1. 获取控件在屏幕上的位置，很简单：

int[] location = new int[2];
view.getLocationOnScreen(location);

2. finish的时候动画效果我使用的是ValueAnimator :

创建ValueAnimator对象（本文为了省事儿，只做了y轴方向的拖动），所以传入的参数是手指离开时的位置moveY, 列表中图片的位置viewFinishY：

ValueAnimator finishAnimator = ValueAnimator.ofInt((int) moveY, viewFinishY).setDuration(200);

接下来就是在更新监听中更新预览view的位置和大小：

        finishAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

                int currentMove = (int) animation.getAnimatedValue();

                mImageView.setTranslationY(currentMove);

                ViewGroup.LayoutParams layoutParams = mImageView.getLayoutParams();
                int perWidth = (int) ((imgWidth - lastWidth) * (currentMove - moveY) / (viewFinishY - moveY));
                layoutParams.width = lastWidth + perWidth;
                mImageView.setLayoutParams(layoutParams);

                int screenWidth = ScreenParams.getScreenWH(PreviewActivity.this)[0];
                int targetLeft = -(screenWidth - imgWidth) / 2 + location[0];
                int perLeft = (int) (targetLeft * (currentMove - moveY) / (viewFinishY - moveY));
                mImageView.setTranslationX(perLeft);
            }
        });
        finishAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                finish();
                overridePendingTransition(0, R.anim.activity_zoom_close);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        finishAnimator.start();

很简单对不对... 本人最近换了小米，发现小米的相册也是这样效果，故而做了个简单的demo, 新人可以get下。

仿微信朋友圈预览功能

猜你喜欢