前阵子，有个朋友让我看手机淘宝app 我的淘宝,我的淘宝，那个可以滑动用户名。他们公司要用，他要做ios的可是我看到这个效果第一反应是，这不就是，android5.0的一个控件吗？没错就是coordinatorlayout behavior 各种头部动画，都可以他写，关于，hehavior的帖子很多了。我就不在这里介绍了，大家可以随意百度看解释。
我们先看，最终效果图。有图有真相。
是不是，有点像，我必须说明，我是在源文件基础上修改来的，这贴出来，原作者的git下载地址 ：githup（虽然这个大牛也一定不会理我，但是做人要有道德）
其实如果你去他的githup看了。你就会发现我做的工作其实并不对，没事，真心不多，我就添加了一个toolbar，修来原有代码不超过五行。是不是感觉有了互联网，我这种渣渣也能变成了。过程不重要，思路很重要。下来我们来看看具体我都修改了那些地方。
//我添加的一个toolbar 其实就是再贴，修改了一下
//这里修改的是一个高度，就是这是这里，，，设置最终的高度，
//注意看，我隐藏掉了 toolbar，但是并没有gone他，因为还是要让他，占位置，让我的小头像跟随
其实就是一个道理，真亦假时假亦真，看到的不一定是真实的。都是虚幻，哈哈。也是之前看到，另一个大牛，写爆炸android特效经常用的，贯彻他的思路，我才能想到这个偷懒的方法。讲讲我的思路:
我们利用原有的toolbar作为，小头像的移动依靠，当小头像移动到我们自己添加toolbar的位置的时候，将我们我们的toolbar显示出来。
有人会提问，这尼玛在逗我吗？你这样隐藏显示的，有什么意义？
原因是这样的：因为布局的原因。android5.0的toolbar 一定必须是顶层的吧。你的所有内容都应该是在他下面的吧。按照这个思路，我们就知道，其实，为什么没有隐藏小头像的原因，那就是，我们把自己toolbar显示出来就是，为了压盖这原有的小头像。为了达到和淘宝的效果一样，一瞬间掩藏。你会感觉，小头像是流畅的跑到了toolbar上的其实不然，你松手就会被在AppBarLayout下的toolbar覆盖掉。这就是为什么要要这个时候把原本准备好的小头像显示出来的原因，如果我解释的不太清楚，可以看看，我的图片，我用绿色边勾勒的是小头像是我提前准备好的那张头像。
好了其实这些都不是我想说的重点，重点是，大神写的这个流畅的，Behavior
好了我需要在粘贴两个重点的代码。
private void maybeInitProperties(CircleImageView child, View dependency) {
if (mStartYPosition == 0)
mStartYPosition = (int) (dependency.getY());
if (mFinalYPosition == 0)
mFinalYPosition = (dependency.getHeight() /2);
if (mStartHeight == 0)
mStartHeight = child.getHeight();
if (mStartXPosition == 0)
mStartXPosition = (int) (child.getX() + (child.getWidth() / 2));
if (mFinalXPosition == 0)
mFinalXPosition = ((int) dependency.getWidth() / 2);
if (mStartToolbarPosition == 0)
mStartToolbarPosition = dependency.getY();
if (mChangeBehaviorPoint == 0) {
mChangeBehaviorPoint = (child.getHeight() - mCustomFinalHeight) / (2f * (mStartYPosition - mFinalYPosition));
}
}
看这个代码的时候我准备了一张图片，虽然有点糙，但是凑合看吧
这就是大概一个，逻辑图片，说明了。大概要用的几个属性值是什么意思，这里最重点的是这句话
mChangeBehaviorPoint = (child.getHeight() - mCustomFinalHeight) / (2f * (mStartYPosition - mFinalYPosition));
一看就知道，他们要比例什么了，
简单解释一下，一个两个圆的差值 比矩形的差值还✖️2 这是要做什么，我看完整个代码才懂，他是为了。一个位置上做缩放动画，让缩放动画更加紧凑的一个过程，✖️2的意思其实就是增加除数值，让这个动画相应位置更加向上一点。必须说，我原本以为是一个，数学表达式，结果好像不是的，是一个动画设计思路。
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
maybeInitProperties(child, dependency);
final int maxScrollDistance = (int) (mStartToolbarPosition);
float expandedPercentageFactor = dependency.getY() / maxScrollDistance;
if (expandedPercentageFactor < mChangeBehaviorPoint) {
float heightFactor = (mChangeBehaviorPoint - expandedPercentageFactor) / mChangeBehaviorPoint;
float distanceXToSubtract = ((mStartXPosition - mFinalXPosition)
* heightFactor) + (child.getHeight()/2);
float distanceYToSubtract = ((mStartYPosition - mFinalYPosition)
* (1f - expandedPercentageFactor)) + (child.getHeight()/2);
child.setX(mStartXPosition - distanceXToSubtract);
child.setY(mStartYPosition - distanceYToSubtract);
float heightToSubtract = ((mStartHeight - mCustomFinalHeight) * heightFactor);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
lp.width = (int) (mStartHeight - heightToSubtract);
lp.height = (int) (mStartHeight - heightToSubtract);
child.setLayoutParams(lp);
} else {
float distanceYToSubtract = ((mStartYPosition - mFinalYPosition)
* (1f - expandedPercentageFactor)) + (mStartHeight/2);
child.setX(mStartXPosition - child.getWidth()/2);
child.setY(mStartYPosition - distanceYToSubtract);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
lp.width = (int) (mStartHeight);
lp.height = (int) (mStartHeight);
child.setLayoutParams(lp);
}
return true;
}
重点代码
if (expandedPercentageFactor < mChangeBehaviorPoint)
一个if搞定了全世界，if后面的是小头像缩放功能的已经X、Y轴的移动。else是处理，还原大小和位置移动的仅仅是Y轴的。
就这样，所有的工作都做完了。我不知道第一次的表达，是不是够清楚，其实源码没有修改什么，如果需要我可以，上传，重点是，是原作者的思路。
我修改后的源码
马上准备 ios的类似源码分析，努力做到，ios和android一起跑着玩的节奏。希望能带节奏。