Android如何实现饿了么搜索渐变效果

来源：互联网发布：专业书籍网络图书馆编辑：程序博客网时间：2024/05/17 06:00

1。饿了么的首页进入搜索的动画效果相信很多人都见过，今天跟大家分享一下实现效果，废话不多说，先上图

要说实现原理，其实很简单，虽然看起来是一个Activity，其实是两个，首页Activity负责跳转至搜索页的Activity，而搜索页Activity负责整个动画的渐变过程，搜索页的Activity其实拥有首页Activity的相同的导航栏，当点击进入搜索页的时候，传入当前Edittext的坐标，

tvSearchRlt.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent intent = new Intent(MainActivity.this,SearchActivity.class);                int location[] = new int[2];                tvSearchRlt.getLocationOnScreen(location);                intent.putExtra("x",location[0]);                intent.putExtra("y",location[1]);                startActivity(intent);                overridePendingTransition(0,0);            }        });

然后把搜索页的搜索框的位置移动到首页搜索框对应的位置

 float originY = getIntent().getIntExtra("y", 0);        int location[] = new int[2];        mSearchBGRlt.getLocationOnScreen(location);        final float translateY = originY - (float) location[1];        frameBgHeight = frameBg.getHeight();        //放到前一个页面的位置        mSearchBGRlt.setY(mSearchBGRlt.getY() + translateY);

当然了不光是搜索框的位置，其他控件的位置也需要移动到相应的位置，这样才能实现整体向上平移

mHintTxt.setY(mSearchBGRlt.getY() + (mSearchBGRlt.getHeight() - mHintTxt.getHeight()) / 2);        mbackIv.setY(mSearchBGRlt.getY() + (mSearchBGRlt.getHeight() - mbackIv.getHeight()) / 2);        mSearchTxt.setY(mSearchBGRlt.getY() + (mSearchBGRlt.getHeight() - mSearchTxt.getHeight()) / 2);

对于组件移动位置的操作其实在我的代码里面是可以不用的，原因之前说了，搜索页的导航栏几乎和首页的导航栏的布局是一样的，也就是原本他们的位置就重叠，这里添上是防止两者的组件位置不一致的情况。

好了，接下来就是重点了，通过valueAnimator实现渐变的效果

   final ValueAnimator translateVa = ValueAnimator.ofFloat(mSearchBGRlt.getY(), mSearchBGRlt.getY() - 100);        translateVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mSearchBGRlt.setY((Float) valueAnimator.getAnimatedValue());                ViewGroup.LayoutParams linearParams = frameBg.getLayoutParams(); //取控件textView当前的布局参数                linearParams.height = (int) (frameBgHeight-(searchBgHeight-(Float) valueAnimator.getAnimatedValue())*2);                 frameBg.setLayoutParams(linearParams);                mbackIv.setY(mSearchBGRlt.getY() + (mSearchBGRlt.getHeight() - mbackIv.getHeight()) / 2);                mHintTxt.setY(mSearchBGRlt.getY() + (mSearchBGRlt.getHeight() - mHintTxt.getHeight()) / 2);                mSearchTxt.setY(mSearchBGRlt.getY() + (mSearchBGRlt.getHeight() - mSearchTxt.getHeight()) / 2);            }        });

这里就是组件高度动态改变的代码

 ViewGroup.LayoutParams linearParams = frameBg.getLayoutParams(); //取控件textView当前的布局参数                linearParams.height = (int) (frameBgHeight-(searchBgHeight-(Float) valueAnimator.getAnimatedValue())*2);                 frameBg.setLayoutParams(linearParams);

这句的目的就是实现导航栏高度的变化

光有这一个动画肯定是不够的

        ValueAnimator scaleVa = ValueAnimator.ofFloat(1, 0.8f);        scaleVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mSearchBGRlt.setScaleX((Float) valueAnimator.getAnimatedValue());            }        });        ValueAnimator alphaVa = ValueAnimator.ofFloat(0, 1f);        alphaVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mContentFrame.setAlpha((Float) valueAnimator.getAnimatedValue());                mSearchTxt.setAlpha((Float) valueAnimator.getAnimatedValue());                mbackIv.setAlpha((Float) valueAnimator.getAnimatedValue());            }        });        ValueAnimator alphaVa2 = ValueAnimator.ofFloat(1f, 0);        alphaVa2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                locationTv.setAlpha((Float) valueAnimator.getAnimatedValue());                recommandTv.setAlpha((Float) valueAnimator.getAnimatedValue());            }        });

这样才显得多姿多彩，

最后给以上动画设置持续时长并启动动画

        alphaVa.setDuration(500);        alphaVa2.setDuration(300);        translateVa.setDuration(500);        scaleVa.setDuration(500);        alphaVa.start();        alphaVa2.start();        translateVa.start();        scaleVa.start();

这样就完成了整个动画的渐变过程。而退出的时候执行反向操作，具体请看代码
github项目源码

0 0