Android 属性动画拓展（二）

前言

通过上一篇Android 属性动画拓展（一）,我们已经对知道，通过改变View的属性值，可以实现动画效果；当然，上一篇的ViewPager比较特殊，通过他的setPageTransformer方法可以很方便的为他添加动画效果。那么对于普通的View，我们如何结合用户的操作（主要是滑动）实现一些动画呢？下面我们就来看看。

标题栏渐变效果

标题栏颜色渐变的效果，想必大家都不陌生。

head_alpha.gif

上面这样一个效果实现，主要思路还是通过计算上下滑动的比例，动态的修改顶部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发现页面，头部也是一个由透明色变化为白色的标题栏，标题栏内部的搜索框也会动态扩展，结合上面的例子可以考虑一下如何实现；首先看一下效果。

jianshu_head.gif

结合上面的例子，实现顶部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。