使用Transition轻松实现查看大图的缩放动画

一言不合先看图：

这个交互动画大概过程是：

点击时间线timeline里某个位置的item

item逐渐放大并移动到屏幕中间

在用户选择退出后（一般是再次点击全屏的item触发，或者android里面点击back键触发）

item又会逐渐缩小并回退到原来的位置

在android里面，一般的实现思路大概有两种：

第一种，由于activity的根布局是FrameLayout，FrameLayout在addView()的时候，最后添加的view显示在最上层，利用这一特性，可以在点击timeline某个item的时候，计算出item在屏幕所处的位置和大小，然后构建一个克隆item，将克隆item添加到根布局上，

这时候如果前面计算的位置正确的话，克隆的item应该恰好遮住被点击的那个item，之后使用animator同时执行scale和translate动画，使克隆的item过度到屏幕中央，退出的话，则是执行反向动画，待克隆的item回到起始位置后，从根布局remove掉；

第二种的话，起一个新的背景半透明并且没有入场和退场动画的activity，在这个activity里面初始化克隆的item，之后的逻辑和方案一基本差不多。

比较两种方案，其中第二种适用的场景更多，图片放大后又可能有其他操作逻辑，比如手势缩放，保存到本地，使用滤镜或裁剪。

这些额外的逻辑，你肯定不想跟timeline都写在同一个activity里面，那样timeline的activity会膨胀到可观的地步，而第二种方案，对大图的操作逻辑代码都能写在新的activity，更易维护和重用。

然而，其实两种方法都有点繁琐，在android 5.0之后引入的Transition动画框架后，采用第二种方案实现这个跨场景的动画就轻松的多。无需自己去计算item的位置，系统自动帮你完成。

首先，你需要一个优秀的图片加载库(如picasso，glide或者fresco)，保证在进行场景切换后，你能方便快速的从内存缓存中取出你在timeline所点击item正在使用的bitmap对象，这里以glide为例，采用RecyclerView实现图片timeline，在Adapter的onBindViewHolder()里实现item的图片加载逻辑和点击事件：

接下来实现PhotoActivity:

下面是PhotoActivity的布局，非常简单：

Transition动画框架降低了android在跨场景动画方面的实现难度，能给用户带来更佳的交互体验。github上开源的应用Plaid算是这方面优秀的范例，这里安利一下Plaid。

Plaid的开发者是google的设计师兼android工程师nick butcher，Plaid本身抛弃了android老旧的系统，直接从5.0 lollipop(虽然lollipop也是2年前的系统版本…)开始，大量使用系统新的api和特性，很多动效做的很赞，值得学习。

写在最后

在twitter，facebook上查看大图手势随意拖拽退出当前界面的交互，也在Plaid里面给出了一个实现方案，感兴趣的可以看看ElasticDragDismissLayout这个开源库。

注：本文中视频录制使用的是Jake Wharton的Telecine。

本文作者：李洋（点融黑帮），工程部，android工程师，参与点融android的开发。"A coder has no name."