前言
看到简书App搜索页面的效果，感觉不错。主要实现还是靠安卓提供的ObjectAnimator和系统为我们提供的Transition框架。效果如下
GIF.gif
1.使用ObjectAnimator实现
private void setAnimator(ObjectAnimator objectAnimator, final int status) {
objectAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
if (status == 0) {
getBinding().tvTitle.setText("搜索");
} else if (status == 1) {
getBinding().tvTitle.setText("搜索简书的内容和朋友");
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
objectAnimator.setDuration(100);
objectAnimator.start();
}
这个方法主要是执行动画之后监听改变文字状态，这里需要注意的是ObjectAnimator本身没有给我们提供改
变View的宽高属性变化的属性
以下是属性动画常用属性值：
translationX和translationY：作为一种增量来控制View对象从他容器的左上角坐标偏移的位置
rotation rotationX和rotationY：控制View围绕支点进行2D和3D的旋转
scaleX和scaleY：控制View围绕他的支点进行2D旋转
pivotX和pivotY：控制View对象的支点位置，围绕这个支点进行旋转和缩放的处理，默认情况下支点位置为对象的中心点
如果一个属性没有get和set方法可以通过包裹类来实现。
public class ViewWrapper {
private View view;
public ViewWrapper(View view) {
this.view = view;
}
//宽度Setter方法
public void setWidth(int width) {
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
layoutParams.width = width;
view.setLayoutParams(layoutParams);
view.invalidate();
}
public int getWidth() {
return view.getLayoutParams().width;
}
}
这里是实现改变宽度的方法，应用在scrollview监听里面如下
getBinding().scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
//改变toolbar的透明度
changeToolbarAlpha();
if (getBinding().scrollView.getScrollY() >= getBinding().img.getHeight() - getBinding().layoutToolbar.getHeight() && !isExpand) {
// exPand();//靠系统提供的Transition实现view宽度改变
isExpand = true;
ObjectAnimator objectAnimator = ObjectAnimator.ofInt(new ViewWrapper(getBinding().layoutTitle), "width", ScreenWidth);//这是靠动画来改变view宽度
setAnimator(objectAnimator, 1);
} else if (getBinding().scrollView.getScrollY() <= 0 && isExpand) {
// reDuce();
isExpand = false;
ObjectAnimator objectAnimator = ObjectAnimator.ofInt(new ViewWrapper(getBinding().layoutTitle), "width", dip2px(70));
setAnimator(objectAnimator, 0);
}
}
});
ScreenWidth是屏幕的宽度，dip2px(70)是固定宽度，这些可以自己按需求定制。这里引入一个isExpand是为了防止动画重复执行，这点在做其他动画效果同样适用，需要注意。此方法是借鉴本篇文章而来https://www.jianshu.com/p/4419f6448d88，这里没有指明自定义set方法实现改变view宽度，所以做个补充。
2.利用系统为我们提供的Transition框架
private void exPand() {
getBinding().tvTitle.setText("搜索简书的内容和朋友");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) getBinding().layoutTitle.getLayoutParams();
LayoutParams.width = RelativeLayout.LayoutParams.MATCH_PARENT;
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
getBinding().layoutTitle.setLayoutParams(LayoutParams);
//开始动画
beginDelayedTransition(getBinding().layoutTitle);
}
private void beginDelayedTransition(ViewGroup view) {
transitionSet = new AutoTransition();
transitionSet.setDuration(200);
TransitionManager.beginDelayedTransition(view, transitionSet);
}
利用系统提供的AutoTransition创建一个缺省转换,淡入/淡出,在一个场景中移动和调整大小，当view改变时。
第二种方法需要引入design包兼容
compile 'com.android.support:design:27.0.2'
关于toolbar的渐变可以看文末的源码实现，需要注意的是一定要给toolbar设置一个初始背景色，不然会包没有背景引用空指针异常。
注意
需要给文字设置单行显示，不然会有一个闪动，利用Transition时候需要给文字设置宽高自适应，这里我也不太明白为什么设置高度全充满会闪烁一下。
最后附上源码
https://github.com/NullRoutine/databindinglibrary
直接查看AnimatorActivity即可。
网友评论