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

最新推荐文章于 2022-09-09 16:36:57 发布

anye_bbk

最新推荐文章于 2022-09-09 16:36:57 发布

阅读量3.1k

点赞数 1

分类专栏： android

本文链接：https://blog.csdn.net/anye_bbk/article/details/53996151

版权

android 专栏收录该内容

7 篇文章

订阅专栏

本文分享了饿了么App中搜索动画效果的实现方法，包括Activity间的跳转、控件位置调整及使用ValueAnimator实现渐变动画的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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项目源码