引子

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

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

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

原理解析

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

点击后，是重新打开了一个 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() {@Overridepublic 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() {@Overridepublic 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() {@Overridepublic 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() {@Overridepublic void onAnimationEnd(Animator animation) {quitActivityWithoutAnimation();}});exitAnimator.start();}

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

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

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

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

转载于:https://www.cnblogs.com/huansky/p/10426278.html

仿微信图片查看器入场退场动画相关推荐

Qt 仿QQ图片查看器
最近项目中,由于需要查看图片.看了网上写的各种图片查看器.感觉都没有QQ图片查看器那种界面好看一点.并且放大了可以移动图片.为此,想着仿QQ图片查看器自己写了一个,如图: 主要实现的功能有: 鼠标滚轮 ...
[分享]牛牛图片查看器[仿QQ图片查看器]及大致原理说明
这是一个完全通过Duilib来实现的一个图片查看器,仿照QQ图片查看器的效果实现,希望大家喜欢. 先看一下使用的截图吧: 做相关说明如下: 一:使用说明 1. 通过命令行调用,传递图片路径即可打开图片 ...
vue 实现图片查看器（仿windows图片查看器）
自己vue项目中用到的一个类似于windows照片查看器的功能不使用插件这里的核心代码是从插件中扒下来的因为插件有点不符合我自己的使用要求这里记录一下 //因为我这里是vue项目图片查看是 ...
窗口程序ImageView(仿QQ图片查看器)
近期一直在学习窗口程序之类的问题,下午正好有机会和大家讨论一下. 程序运行截图: 应用方法: 1.直接把图像文件拖到图标上表现 2.通过命令行方式,示例:ImageView.exe "带全路 ...
ImageView(仿QQ图片查看器)
程序运行截图: 使用方法: 1.直接把图像文件拖到图标上显示 2.通过命令行方式,示例:ImageView.exe "带全路径的图像文件名称" 3.打开ImageView.exe, ...
Android仿微信朋友圈图片展示效果,图片查看器
现在越来越多的APP都会有图片展示,这里是模仿微信朋友圈图片展示效果,图片查看器. 主要分为4部分: 1.透明Activity 2.计算gridView下iamgeView Item所在位置 3.一张 ...
Android简易图片管理器,一个简单仿微信朋友圈的图片查看器 PhotoViewer
PhotoViewer 该图片查看器是模仿微信朋友圈查看图片编写 allprojects { repositories { ... maven { url 'https://jitpack.io' } ...
android仿空间照片查看器,PhotoViewer 一个简单仿微信朋友圈的图片查看器
该图片查看器是模仿微信朋友圈查看图片编写 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } lastRel ...
一个仿微信朋友圈的图片查看器，使用超级简单！
PhotoViewer 项目地址:wanglu1209/PhotoViewer 简介:一个仿微信朋友圈的图片查看器,使用超级简单! 更多:作者提 Bug 标签: 该图片查看器是模 ...

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

引子

原理解析

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

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

仿微信图片查看器入场退场动画相关推荐

最新文章

热门文章