闲着无聊，撸个微信导航栏的动画吧！

/   今日科技快讯   /

9月10日，按照去年的约定，马云正式辞去阿里巴巴董事局主席，由现任集团CEO张勇（逍遥子）接任，马云将退休。这不是马云的第一次“退休”。

实际上马云的第一次退休可以追溯到2006年11月，在引入职业经理人后，他把公司总裁的位置让给卫哲，第二年，在卫哲的努力下，阿里巴巴B2B在香港成功上市，发行价为13.5港元。

马云的第二次退休在2013年5月，马云辞任阿里巴巴集团CEO，由陆兆禧接任。48岁的马云在杭州黄龙体育场单膝跪地，向员工宣布：48岁以前，工作就是我的生活；48岁以后，生活就是我的工作，以后就拜托大家了。

而马云的第三次退休就是今天，马云辞去阿里巴巴董事局主席，阿里换帅。

/   作者简介   /

本篇文章来自不惜留恋_的投稿，分享了他对微信导航栏动画的实现，相信会对大家有所帮助！同时也感谢作者贡献的精彩文章。

不惜留恋_的博客地址：

https://juejin.im/user/577e6c37165abd00554b2245

/   开始   /

微信自发布以来，底部导航栏的动画一直让开发者津津乐道，而且伴随着版本更新，底部导航栏的动画也一直在改进。我最近在闲暇之余，看了下微信的底部导航栏动画，于是思考了下这个动画的原理，感觉非常有意思，于是写下这篇文章。

下图就是我实现的效果，大家可以对比下微信的效果，几乎可以以假乱真。

/   动画过程   /

关于这个动画的过程，我刚开始了是瞅了老半天了，因为如果我们不了解动画的过程也是无从去实现了，所以动画过程很重要，这个动画其实有两个过程。

1. 首先是默认图片的轮廓变色。
2. 轮廓变色到一定程度后，整个图片出现了绿色的填充效果，也就是整个图片开始变绿，直到整个图片完全变为了绿色。其实这是两个图片的透明度变换的达成的效果。

/ 动画实现原理  /

首先我们从整体上看，滑动的页面可以用ViewPager实现，在滑动的过程中，通过监听ViewPager的滑动事件，可以获取一个滑动的比例值。

底部的导航栏的4个Tab可以用自定义一个View来实现，我把这个自定义的View叫做TabView。那么，在滑动的过程中，当前页面的TabView执行褪色动画，后一个页面执行变色动画。动画到底执行到哪一步，肯定就是由ViewPager的滑动比例值决定的。因此TabView需要一个接收动画进度比例值的方法来控制动画的程度。

/   代码实现   /

俗话说得好，Talk is cheap, show me the code!。那我们就通过代码来实现我们之前的猜想吧，这肯定是一段非常激情的旅程！

由于不想篇幅过大，因此我省略了ViewPager的一些样板代码，因为这些属于基本功。如果不会用ViewPager，在网上随便搜索就是一大堆的文章，很轻松就掌握了。那么本文主要就是解决如何自定义这个TabView。

自定义View有很多方式，我相信很多人比我还懂。而我选择的是组合系统控件的方式来实现这个自定义View。那么可能有人问我，如果为了更好的绘制性能，能不能完全的自定义一个View来实现呢？这当然是可以的，学完本文你就可以做这个牛逼的操作。然而，这点绘制性能的提升，其实在现在的高配置的手机上是可以忽略的。那么为了开发效率，组合系统控件应该是首选。

/   实现组合控件的布局   /

TabView需要的组合控件的布局如下。

// tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/tab_image"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />

        <ImageView
            android:id="@+id/tab_image_top"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
    </FrameLayout>

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp" />
</LinearLayout>

布局的TextView肯定是用来显示标题的，然而还有两个ImageView，为何这样设计呢？这与我们动画的实现有关。

@+id/tab_image的ImageView在底部，它是用来显示一个默认的图片的，我称它为轮廓图，例如第一个页面的TabView的轮廓图如下。

我们需要对这个轮廓进行变色处理，大家可以观察一下动画的过程，第一个过程很显然是轮廓的变色。

@+id/tab_image_top的ImageView在上面，它是用来显示一个页面被选中后的图片，也是动画最终要显示的图片，例如第一个页面的TabView的选中图片如下。

现在来说明下如何用这个布局来实现动画。

1. 首先所有的TabView都显示轮廓图，选中图都进行隐藏。如何隐藏呢，我选择使用透明度来隐藏选中图，因为整个动画过程有透明度的变换。
2. 当滑动ViewPager的时候，TabView获取滑动的进度值，我们就让轮廓图的轮廓开始变色。那么怎么变色呢，有一个很方便的方法，就是Drawable.setTint()方法。这个方法的原理就是PorterDuff.Mode.DST_IN混合模式。如果大家有兴趣，可以去研究下原理。
3. 当ViewPager滑动到一定距离的时候，如果松开手指，页面会自动滑动到下一个页面，这个比例值到底是多少呢？我暂时还没有考究，我假定是0.5吧。当滑动的比较超过0.5的时候，就要让轮廓图的透明度逐渐变是0，也就是慢慢地的看不见了，同时，选中图的透明度逐渐变为255，也是慢慢的清晰了。如此一来，就会出现轮廓图的整体颜色填充效果。

怎么样，实现思路是不是有点意思，那么我们来根据这个思路来实现这个自定义ViewTabView吧。

/   实现TabView   /

加载布局

既然有了布局，那么首先用在TabView的构造函数中来加载这个布局。

public TabView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        // 加载布局
        inflate(context, R.layout.tab_layout, this);
}

自定义属性与解析

为了更好的在XML布局中使用TabView，我为TabView抽取的自定义属性。

// res/values/tabview_attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TabView">
        <attr name="tabColor" format="color|integer" />
        <attr name="tabImage" format="reference" />
        <attr name="tabSelectedImage" format="reference" />
        <attr name="tabTitle" format="string|reference" />
    </declare-styleable>
</resources>

• tabColor代表变色最终显示的颜色，这个颜色可以从选中图中用取色器获取。
• tabImage代表默认显示的轮廓图。
• tabSelectedImage代表选中后的图。
• tabTitle代表要显示的标题。

有了这些自定义属性，那么在TabView中必须要解析这些自定义属性。

public TabView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        // 加载布局
        inflate(context, R.layout.tab_layout, this);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TabView);
        for (int i = 0; i < a.getIndexCount(); i++) {
            int attr = a.getIndex(i);
            switch (attr) {

                case R.styleable.TabView_tabColor:
                    // 获取标题和轮廓最终的着色
                    mTargetColor = a.getColor(attr, DEFAULT_TAB_TARGET_COLOR);
                    break;

                case R.styleable.TabView_tabImage:
                    // 获取轮廓图
                    mNormalDrawable = a.getDrawable(attr);
                    break;

                case R.styleable.TabView_tabSelectedImage:
                    // 获取选中图
                    mSelectedDrawable = a.getDrawable(attr);
                    break;

                case R.styleable.TabView_tabTitle:
                    // 获取标题
                    mTitle = a.getString(attr);
                    break;
            }

        }
        a.recycle();
    }

自定义属性解析完毕后，就需要给用这些属性值给控件进行初始化。View的onFinishInflate()方法代表布局加载完成，因此在这里获取控件，并进行初始化。

  @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        // 1.设置标题，默认着色为黑色
        mTitleView = findViewById(R.id.tab_title);
        mTitleView.setTextColor(DEFAULT_TAB_COLOR);
        mTitleView.setText(mTitle);

        // 2.设置轮廓图片，不透明，默认着色为黑色
        mNormalImageView = findViewById(R.id.tab_image);
        mNormalDrawable.setTint(DEFAULT_TAB_COLOR);
        mNormalDrawable.setAlpha(255);
        mNormalImageView.setImageDrawable(mNormalDrawable);

        // 3.设置选中图片，透明，默认着色为黑色
        mSelectedImageView = findViewById(R.id.tab_selected_image);
        mSelectedDrawable.setAlpha(0);
        mSelectedImageView.setImageDrawable(mSelectedDrawable);
    }

标题设置了一个默认颜色DEFAULT_TAB_COLOR，是黑色。同样，也为轮廓图的轮廓设置黑色。轮廓图的透明度初始为255，也就是完全可见，而选中图的透明度设置为0，也就是完全不可见。所有这一切就是动画的初始状态。

控制动画进度

在前面的讲解动画的原理的时候说到一个事情，TabView需要使用ViewPager滑动进度值来控制动画的进度，因此还要为TabView定义一个接收进度值的方法。

   /**
     * 根据进度值进行变色和透明度处理。
     *
     * @param percentage 进度值，取值[0, 1]。
     */
    public void setXPercentage(float percentage) {
        if (percentage < 0 || percentage > 1) {
            return;
        }

        // 1. 颜色变换
        int finalColor = evaluate(percentage, DEFAULT_TAB_COLOR, mTargetColor);
        mTitleView.setTextColor(finalColor);
        mNormalDrawable.setTint(finalColor);

        // 2. 透明度变换
        if (percentage >= 0.5 && percentage <= 1) {
            // 原理如下
            // 进度值: 0.5 ~ 1
            // 透明度: 0 ~ 1
            // 公式: percentage - 1 = (alpha - 1) * 0.5
            int alpha = (int) Math.ceil(255 * ((percentage - 1) * 2 + 1));
            mNormalDrawable.setAlpha(255 - alpha);
            mSelectedDrawable.setAlpha(alpha);
        } else {
            mNormalDrawable.setAlpha(255);
            mSelectedDrawable.setAlpha(0);
        }

        // 3. 更新UI
        invalidateUI();
    }

在这个对外开放的接口中，首先我们要根据进度值来计算轮廓要使用的颜色。起始颜色是黑色，最终颜色是一个绿色，然后我们还有一个进度值，那么如何计算某个进度的对应的颜色值呢？其实在属性动画中有一个类，ArgbEvaluator，它提供了颜色的计算方法，代码如下。

  public Object evaluate(float fraction, Object startValue, Object endValue) {
        int startInt = (Integer) startValue;
        float startA = ((startInt >> 24) & 0xff) / 255.0f;
        float startR = ((startInt >> 16) & 0xff) / 255.0f;
        float startG = ((startInt >>  8) & 0xff) / 255.0f;
        float startB = ( startInt        & 0xff) / 255.0f;

        int endInt = (Integer) endValue;
        float endA = ((endInt >> 24) & 0xff) / 255.0f;
        float endR = ((endInt >> 16) & 0xff) / 255.0f;
        float endG = ((endInt >>  8) & 0xff) / 255.0f;
        float endB = ( endInt        & 0xff) / 255.0f;

        // convert from sRGB to linear
        startR = (float) Math.pow(startR, 2.2);
        startG = (float) Math.pow(startG, 2.2);
        startB = (float) Math.pow(startB, 2.2);

        endR = (float) Math.pow(endR, 2.2);
        endG = (float) Math.pow(endG, 2.2);
        endB = (float) Math.pow(endB, 2.2);

        // compute the interpolated color in linear space
        float a = startA + fraction * (endA - startA);
        float r = startR + fraction * (endR - startR);
        float g = startG + fraction * (endG - startG);
        float b = startB + fraction * (endB - startB);

        // convert back to sRGB in the [0..255] range
        a = a * 255.0f;
        r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
        g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
        b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;

        return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
    }

熟悉属性动画的应该知道，参数float fraction的取值范围为0.f到1.f，所以可以把这个方法拷贝过来使用。

计算出颜色值后，就可以对标题和轮廓图着色了。

第二步，按照之前说的动画原理，当滑动的进度达到0.5后，要对轮廓图和选中图进行透明度的变换。

那么首先我们得计算出某个进度对应的透明度。很明显，这是一道数学题，进度的变化范围是从0.5到1.0，透明度的变换取0到1.0(之后于乘以255即可得到实际的透明度)。透明度和进度的比例值是2，那么就可以得出一个公式alpha - 1 = (percentage - 1.0) * 2。有了这个公式，就可以算出任意进度值对应的透明度了。

这一切就绪后，我们就使出杀手锏了，更新UI，让系统进行重绘。

/   与ViewPager联动   /

最重要的自定义View已经准备完毕，是时候来测试效果了。那么我们必须要知道如何获取ViewPager的滑动进度值了，我们可以为ViewPager设置滑动监听器。

     mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
        });

参数float positionOffset就是一个进度值，但是这个进度值使用起来还是需要点小技巧的，我们先从源码中看下解释。

   /**
         * This method will be invoked when the current page is scrolled, either as part
         * of a programmatically initiated smooth scroll or a user initiated touch scroll.
         *
         * @param position Position index of the first page currently being displayed.
         *                 Page position+1 will be visible if positionOffset is nonzero.
         * @param positionOffset Value from [0, 1) indicating the offset from the page at position.
         * @param positionOffsetPixels Value in pixels indicating the offset from position.
         */
        void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

从注释中可以看出，onPageScrolled方法是在滑动的时候调用，参数position代表当前显示的页面，这表解释很容易产生误解，其实无论是从左边往右边滑动，还是从右边往左边滑动，position始终代表左边的页面，因此position + 1始终代表右边的页面。

参数positionOffset代表滑动的进度值，并且还有很重要一点，大部分人都会忽略，如果参数positionOffset为非零值，表示右边的页面可见，也就是说，如果positionOffset的值是零，那么代表右边的页面是不可见的，这一点会在代码中体现出来。既然已经对参数有所了解，那么现在来看看实现。

        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                // 左边View进行动画
                mTabViews.get(position).setXPercentage(1 - positionOffset);
                // 如果positionOffset非0，那么就代表右边的View可见，也就说明需要对右边的View进行动画
                if (positionOffset > 0) {
                    mTabViews.get(position + 1).setXPercentage(positionOffset);
                }
            }

mTabViews是一个ArrayList，它保存了所有的TabView，我们页面中有四个TabView。mTabViews.get(posistion)获取的是滑动时左边的页面，mTabViews.get(position + 1)获取的就是右边的页面。

当从左边向右边滑动的时候，左边页面的positionOffset的值是从0到1的，此时我们需要左边的页面的TabView执行褪色动画。然而在我们设计的TabView中，进度值达到1的时候，执行的是变色动画，而不是褪色动画，因此左边页面的TabView的进度取值要改变下，取1 - positionOffset。那么右边的页面的进度取值自然就是positionOffset了。从右到左的滑动的原理其实与从左到右的滑动的原理是一样的，大家可以从Log中看出端倪。

然而，在为左边的TabView做动画的时候，我们一定要确保有右边的页面存在。我们前面讲解的时候说过，如果positionOffset为0的时候，右边的页面是不可见的，因此我们要做一些排除的动作，这在代码中有体现的。

/   代码优化   /

ViewPager可以自动滑动到下一个页面的进度值临界点是多少？TabView需要这个临界点来控制透明度的变换。

TabView只能通过XML的属性来控制图片的显示，控制最终显色的颜色等等功能，其实这些可以通过代码动态控制，我们可以实现一个对外的接口。

如果大家是个精益求精的人，可以对这两点进行考究和实现。

/   结束   /

本文把动画的原理，以及如何用代码实现这些原理讲解清楚了，这些都是关键部分。然而其它部分的代码我并没有给出。为了方便想查看demo的人，我把代码上传到 github。项目地址为：

https://github.com/buxiliulian/WeChatBottomNavigation

推荐阅读：

总是听到有人说AndroidX，到底什么是AndroidX？

真香系列，开箱即用的自定义Banner

看一看Facebook工程师是怎么评价《第一行代码》的

欢迎关注我的公众号

学习技术或投稿

长按上图，识别图中二维码即可关注

本文地址：https://blog.csdn.net/c10WTiybQ1Ye3/article/details/100773411