仿微信图片查看器入场退场动画

引子

看微信朋友圈的时候,当我们点击图片,图片会从点击的图片位置,逐渐放大,移动到正中间。退出图片查看器的时候,图片会逐渐变小,移到初始位置。对于用户来说,这是一种非常好的体验效果。

于是,自己手动撸了一个进场退场的动画。具体参见下图 

仿微信图片查看器入场退场动画

 

 下面,开始介绍实现原理。

原理解析

 先对上面的动画进行分析:

  1. 点击后,是重新打开了一个 activity,当然也可以是一个 fragment,都可以。
  2. 图片是从原始位置逐渐放大移到那个到中间位置的。这个过程都发生在打开后的页面中。

  3. 再次点击图片,退出的时候,先做动画,在移除原有的acticity.

通过上面的分析,我们已经知道粗略的技术方案了,接下去就是解决一些细节问题。

从第一个页面打开到第二个页面,需要传递什么参数?

首先是,图片的位置信息,只有这样我们才可以将图片从原始位置逐步放大。下面我们开始获取图片的坐标参数:

   /**
     * 获取图片的位置信息
     */
    public ArrayList getImagePos(View view) {
        int[] locat = new int[2];
        view.getLocationOnScreen(locat);
        int width = view.getWidth();
        int height = view.getHeight();
        ArrayList<Integer> posArr = new ArrayList<>();
        posArr.add(locat[0]);
        posArr.add(locat[0] + width);
        posArr.add(locat[1]);
        posArr.add(locat[1] + height);
        return posArr;
    }

 

将图片的位置信息传给新的 actvity :

        // 点击事件
        View.OnClickListener onClickListener = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int pos = mRecyclerView.getChildAdapterPosition(v);
                Intent intent = new Intent();
                intent.setClass(mContext, Main2Activity.class);
                intent.putIntegerArrayListExtra(POS_ARRAY, getImagePos(v));
                intent.putExtra(IMAGE_POS, pos);
                startActivity(intent);
                overridePendingTransition(0, 0);
            }
        };

 

注意需要去除原有的 activity 的默认动画。避免影响图片的动画效果。

如何让图片从原始位置动起来?

 在做动画前,需要做一些准备工作,比如计算可显示图片的屏幕宽高,放大系数,移动系数等。

/**
     * 计算动画位移和缩放
     */
    private void computerAnimationParams() {
        if (mPosArr.size() != 4) {
            return;
        }
        int screenHigh = mMetrics.heightPixels;
        int screenWidth = mMetrics.widthPixels;
        // 计算可用于显示图片的屏幕高度
        int availableScreenHeight = screenHigh - getStatusBarHeight();

        int imageHeight = mPosArr.get(3) - mPosArr.get(2);
        mOriginWidth = mPosArr.get(1) - mPosArr.get(0);

        float radioWidth = screenWidth * 1.0f / mOriginWidth;
        float radioHeight = availableScreenHeight * 1.0f / imageHeight;
        // 获取放大系数
        mRadio = Math.min(radioHeight, radioWidth);

        // 计算位移距离,屏幕中心与图片中心的距离,
        mTransition[0] = (float) (screenWidth / 2 - (mPosArr.get(0)
                + (mPosArr.get(1) - mPosArr.get(0)) / 2));
        mTransition[1] = (float) ((availableScreenHeight) / 2
                - (mPosArr.get(2) - getStatusBarHeight() + (mPosArr.get(3) - mPosArr.get(2)) / 2));
    }

 

 具体可以参考上面的代码,记得要考虑状态栏对于动画的影响。计算好了之后,我们得将现有的图片先设置成原始大小:

/**
     * 动画前的准备工作
     **/
    private void doReadyJob() {
        // 需要对图片的宽度进行调整
        FrameLayout.LayoutParams params
                = new FrameLayout.LayoutParams(mOriginWidth, FrameLayout.LayoutParams.MATCH_PARENT);
        params.setMargins(mPosArr.get(0), 0, mPosArr.get(1), 0);
        mImageView.setLayoutParams(params);
    }

 

一切准备就绪后,我们得将图片从原始位置移动到正中间。下面就是动画实现细节:

/**
     * 模拟入场动画
     */
    private void showEnterAnim() {
        final ValueAnimator enterAnimator = ValueAnimator.ofFloat(0f, 1f).setDuration(DURATION_IN);
        enterAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        enterAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mImageView.setAlpha(1f);
                mImageView.setScaleX(1 + (mRadio - 1) * value);
                mImageView.setScaleY(1 + (mRadio - 1) * value);
                mImageView.setTranslationX(mTransition[0] * value);
                mImageView.setTranslationY(-mTransition[1] * (1f - value));
                mImageView.invalidate();
            }
        });
        enterAnimator.start();
    }

 

 这里我们通过 ValueAnimator 来控制更新动画进度。到这里,图片的进场动画就完成了。

对于退场动画,原理是一样的:

/**
     * 模拟退场动画
     */
    private void showOutAnim() {
        final ValueAnimator exitAnimator = ValueAnimator.ofFloat(1f, 0f).setDuration(DURATION_IN);
        mImageView.setAlpha(1f);
        exitAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        exitAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mImageView.setScaleX((mRadio - 1) * value + 1);
                mImageView.setScaleY((mRadio - 1) * value + 1);
                mImageView.setTranslationX(mTransition[0] * value);
                mImageView.setTranslationY(-mTransition[1] * (1f - value));
            }
        });
        exitAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                quitActivityWithoutAnimation();
            }
        });
        exitAnimator.start();

    }

 

到这里,动画的主要原理已经剖析完成。

源码: https://github.com/huanshen/PictureViewer

 

目前这个比较简单,真的在项目实现起来的时候,代码量还是蛮多的,并且考虑的也要更多。

比如,你还得传递图片的 url,图片查看器中图片可放大缩小,拖拽等。

仿微信图片查看器入场退场动画

上一篇:微信小程序上传项目到github


下一篇:为什么腾讯有QQ,还要推出微信?