关闭

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

827人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9984次
    • 积分:264
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类