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

原创 2017年01月03日 17:12:33

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




相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android这交互炸了:饿了么是怎么让Image变成详情页的

晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了。 不过还是有槽点。我是无意中才发现可以左右滑动的。这。。。你不告诉我,我怎么知道左右可以滑。...

安卓仿饿了么、美团外卖、百度外卖下单界面,头布局可收缩

最近在看一些外卖App的时候,觉得商家下单界面效果还挺不错的,想着了解一下这种功能是怎么实现的。第一想到的就是度娘,不过在百度这个功能的时候好像度娘不够给力,应该是我的搜索方式不对。几经搜寻,找到了一...

android仿饿了么点餐动画

先上代码 xml代码: xml version="1.0" encoding="utf-8"?> RelativeLayout xmlns:android="http://schema...
  • hunanqi
  • hunanqi
  • 2016年09月22日 18:00
  • 1707

Android实现直播聊天区域顶部渐变效果

背景4月份开发直播时,有一个需求,需要实现一个RecylerView顶部渐变的效果实际效果解决思路图层重叠处理(本质是alpha叠加出来的效果)实现流程保存一个图层,然后画渐变,最后再和原来的图层进行...

Android ScrollView顶部搜索栏或者标题栏渐变效果

最近发现一个很流行的一个效果  随着界面的滑动  顶部标题栏会出现渐变效果  要是现实这样的效果  可以通过ScrollView 滑动达到效果 直接贴代码  public cl...

仿Android端饿了么外卖的效果

仿Android端饿了么外卖的效果,实现的功能包括: 1、点餐按钮点击动画 2、利用二次贝塞尔曲线做成下单特效gitlab:https://github.com/chenzongwen...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【凯子哥带你学Android】Android专用Log开源项目——KLog

在Android开发和调试的过程中,Log的使用是非常频繁的,一个好的Log工具可以帮你节省很多时间,所以凯子哥抽空写了个这个开源项目KLog,希望可以帮助大家提高开发效率,本开源库的灵感来自于Log...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android如何实现饿了么搜索渐变效果
举报原因:
原因补充:

(最多只允许输入30个字)