前言
通过上一篇Android 属性动画拓展（一）,我们已经对知道，通过改变View的属性值，可以实现动画效果；当然，上一篇的ViewPager比较特殊，通过他的setPageTransformer方法可以很方便的为他添加动画效果。那么对于普通的View，我们如何结合用户的操作（主要是滑动）实现一些动画呢？下面我们就来看看。
标题栏渐变效果
标题栏颜色渐变的效果，想必大家都不陌生。
上面这样一个效果实现，主要思路还是通过计算上下滑动的比例，动态的修改顶部View的背景色。
//定义动画初始颜色和最终颜色值
mColorAnimator = new ColorAnimator(Color.TRANSPARENT, getResources().getColor(R.color.colorPrimaryDark));
mNestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, final int scrollY, int oldScrollX, int oldScrollY) {
float fraction = (float) scrollY / (mViewPager.getHeight());
int color = mColorAnimator.getFractionColor(fraction);
if (color != lastColor) {
lastColor = color;
head.setBackgroundColor(color);
StatusBarUtil.setColor(IModeActivity.this, color, 0);
}
if (fraction < 1) {
title.setVisibility(View.INVISIBLE);
search.setVisibility(View.INVISIBLE);
} else {
title.setVisibility(View.VISIBLE);
search.setVisibility(View.VISIBLE);
}
}
});
这里使用NestedScrollView，可以直接监听滑动的距离。
在代码中，我们用当前滑动的距离/顶部ViewPager的高度，得出一个比例fraction，当我们滑动的距离大于等于ViewPager高度时，fraction=1，此时整个head 将会完全显示为最终的颜色。
同时使用StatusBarUtil动态修改状态栏的背景色，保持整个视图的一致。
看到fraction这个参数你应该不陌生，之前学习属性动画实现机制的时候我们知道了。
public class PointSinEvaluator implements TypeEvaluator {
@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
Point startPoint = (Point) startValue;
Point endPoint = (Point) endValue;
float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
float y = (float) (Math.sin(x * Math.PI / 180) * 100) + endPoint.getY() / 2;
Point point = new Point(x, y);
return point;
}
}
我们知道TypeEvaluator 决定了动画的执行的变化过程，这里的fraction参数值是由动画的Interpolator决定的。因此，在之前的属性动画中，系统会根据我们的代码，自动计算fraction值，自动的完成整个动画。而这里，我们的工作就是根据UI交互的效果，手动的去算整个值，主动的决定了动画变化的过程。也就是这里标题栏背景色变化的过程。
ColorAnimator其实就是一个颜色变化的差值器，其内部实现了随着参数的变化，起始颜色的渐变过渡效果，这样可以保证颜色过渡有层次感，而不是在两种不同的颜色之前很突兀的切换。
仿简书头部效果
简书APP发现页面，头部也是一个由透明色变化为白色的标题栏，标题栏内部的搜索框也会动态扩展，结合上面的例子可以考虑一下如何实现；首先看一下效果。
结合上面的例子，实现顶部search框背景由透明变为白色，是很容易的实现的。搜索框 伸缩变化也是很简单，整个view的宽度动态变化即可。
final ColorAnimator mColorAnimator = new ColorAnimator(Color.TRANSPARENT, Color.WHITE);
mNestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
float fraction = (float) 2 * scrollY / (mImage.getHeight());
int color = mColorAnimator.getFractionColor(fraction);
if (color != lastColor) {
lastColor = color;
mHead.setBackgroundColor(color);
// StatusBarUtil.setColor(JianShuHeadActivity.this, color, 0);
}
Log.e(TAG, "onScrollChange: fraction=" + fraction);
if (fraction >= 0.7f) {
mSearchTv.setText("搜索简书的内容和朋友");
ViewGroup.LayoutParams mParams = mSearchShell.getLayoutParams();
mParams.width = RecyclerView.LayoutParams.MATCH_PARENT;
mSearchShell.setLayoutParams(mParams);
TransitionManager.beginDelayedTransition(mSearchShell);
}
if (fraction <= 0.3f) {
mSearchTv.setText("搜索");
ViewGroup.LayoutParams mParams = mSearchShell.getLayoutParams();
mParams.width = RecyclerView.LayoutParams.WRAP_CONTENT;
mSearchShell.setLayoutParams(mParams);
TransitionManager.beginDelayedTransition(mSearchShell);
}
}
});
代码内容很容易理解，由于在布局文件中已经为mSearchShell在左右两边保留了相等且足够的外边距值，因此随着滑动系数简单的修改一下其宽度即可，最后在加一个transaction的动画可以使变化显得比较柔和。
按照上面的内容，其实和简书实际的效果是有一些差距的，可以看到我们注释掉了修改状态栏背景色的代码；原因很明显，Android系统默认的状态栏字体是白色的，因此当我们把状态栏背景色变成白色时，整个视图效果将会非常难看。
在部分小米手机上，可以通过反射的方式将字体改为黑色，但是大部分手机状态栏的字体好像还不能动态修改。因此，我们会发现，有时候最不起眼的内容，反而是最难实现的。
小结
这篇主要就上下滑动时的效果，结合时下开发中常用到的一个点做了简单的分析，下一篇我们结合左右滑动的效果看看，利用属性动画我们能玩出什么花样。
最后，差点忘了，文中所有源码地址AndroidAnimationExercise。有兴趣的同学欢迎star & fork。
