引子
看微信朋友圈的时候，当我们点击图片，图片会从点击的图片位置，逐渐放大，移动到正中间。退出图片查看器的时候，图片会逐渐变小，移到初始位置。对于用户来说，这是一种非常好的体验效果。
于是，自己手动撸了一个进场退场的动画。具体参见下图
下面，开始介绍实现原理。
原理解析
先对上面的动画进行分析：
- 点击后，是重新打开了一个 activity，当然也可以是一个 fragment，都可以。
-
图片是从原始位置逐渐放大移到那个到中间位置的。这个过程都发生在打开后的页面中。
- 再次点击图片，退出的时候，先做动画，在移除原有的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，图片查看器中图片可放大缩小，拖拽等。