使用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的图片加载逻辑和点击事件:

使用Transition轻松实现查看大图的缩放动画_第1张图片

接下来实现PhotoActivity:

使用Transition轻松实现查看大图的缩放动画_第2张图片
使用Transition轻松实现查看大图的缩放动画_第3张图片
使用Transition轻松实现查看大图的缩放动画_第4张图片

下面是PhotoActivity的布局,非常简单:

使用Transition轻松实现查看大图的缩放动画_第5张图片

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."

你可能感兴趣的:(使用Transition轻松实现查看大图的缩放动画)