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