SnakeMaker：模仿实现 即刻APP 头像拖动的残影效果

一直比较喜欢即刻APP的交互效果，作为一个比较注重交互体验的安卓开发爱好者，自然不免会关注它的交互体验以及实现方式。其中的头像拖动效果一直让我觉得挺有意思：

https://www.zhihu.com/video/927920856120823808

头像拖动时会产生残影，拖动结束时残影也会慢慢消失。最初看到这种效果就被吸引了，一直沉迷于思考如何实现这种效果。但实在是太懒，经常思考出实现方式后就顿觉无味，失去兴趣，转而去沉迷下一个奇淫技巧了。最近忽然痛定思痛，决心也写点什么东西，抖点所谓的干货出来，分享于世，也不枉转行做了这么久的开发，首先想写的就是这种效果了。

拖动效果挺像游戏里的贪吃蛇的，所以我起了个名字 SnakeMaker，先看一下我做的效果：

跟即刻的效果基本上一致。下面来分享一下实现思路。

安卓开发中View的位置依赖于其父容器，因此也只能在其父容器限定的区域里显示。这样就带来一个问题：如果想要实现目标View在整个屏幕区域里拖动，其父容器的尺寸要和屏幕尺寸相同。但实际开发中，创建布局时，很多时候我们不能保证目标view的父容器和屏幕尺寸一样。那么有没有方法解决这个问题呢？

当然有解决的方式了。为了保证可以对Activity或Fragment的布局里的任何一个子view做出这种拖动效果，必须绕过上述的问题。如果我们不直接操作目标view，而是复制一个和目标view一摸一样的copyView，然后将copyView添加到一个和屏幕尺寸一样大的ViewGroup里，接着操作copyView的拖动，这样就不受目标view位置的限制了！没错，就是一种偷梁换柱，瞒天过海的方法。所以我得实现实现思路是这样子的：

1.当Activity或Fragment的布局加载完毕后，获取目标view的信息（尺寸，背景图，屏幕中的位置等）
2. 复制多个目标view。一个作为头，剩余的作为残影。
3.处理复制的view（残影透明度，监听绑定等），然后添加到指定的ViewGroup里（ViewGroup的尺寸最好覆盖整个屏幕，这样可以在整个屏幕里拖动）。
4.隐藏目标view，处理复制view的拖动效果。

以上便是整个实现思路。通过这样的处理，我们可以包装布局里任意一个子view，给其添加这种拖动效果。具体的代码细节就不讲了，上面步骤中没有太难实现的地方，重要的是分享思路。文后会给出github地址。简单看一下如何使用：

SnakeViewMaker snakeViewMaker = new SnakeViewMaker(MainActivity.this);
snakeViewMaker .addTargetView(imageView) // 绑定目标View
 .attachToRootLayout((ViewGroup) findViewById(R.id.root));// 绑定Activity/Fragment的根布局

attachToRootLayout（ViewGroup root）方法可以将这种效果绑定到任何一个指定的容器里（Linearlayout除外）。当然，如果不指定的话会默认绑定到Activity的根布局里（android.R.id.content）。

一个需要注意的地方是，如果目标view加载的图片是网络图片，在绑定目标view时，网络图片可能还没有加载完成，因此需要在网络图片加载完成后再对目标view绑定。

在我最近开发的两个app里，已经使用了这个效果，用下来感觉还不错，绝大部分场景都能完美实现。当然了，和即刻的效果相比，还是有一个特别细小的差别。等我有时间解决的这一细小差别，再来分享心得。

具体的API使用就不详写了，感兴趣的话欢迎去github上指教。源码也很简单，实现这样的效果不到四百行，如果你发现了问题，也欢迎指正。

文章同步发布在知乎专栏：https://zhuanlan.zhihu.com/p/32282647

guthub地址：https://github.com/devilist/SnakeViewMaker