前言
看到簡(jiǎn)書App搜索頁(yè)面的效果锣笨，感覺不錯(cuò)箭启。主要實(shí)現(xiàn)還是靠安卓提供的ObjectAnimator和系統(tǒng)為我們提供的Transition框架。效果如下
1.使用ObjectAnimator實(shí)現(xiàn)
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("搜索簡(jiǎn)書的內(nèi)容和朋友");
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
objectAnimator.setDuration(100);
objectAnimator.start();
}
這個(gè)方法主要是執(zhí)行動(dòng)畫之后監(jiān)聽改變文字狀態(tài)，這里需要注意的是ObjectAnimator本身沒有給我們提供改
變View的寬高屬性變化的屬性
以下是屬性動(dòng)畫常用屬性值：
translationX和translationY：作為一種增量來(lái)控制View對(duì)象從他容器的左上角坐標(biāo)偏移的位置
rotation rotationX和rotationY：控制View圍繞支點(diǎn)進(jìn)行2D和3D的旋轉(zhuǎn)
scaleX和scaleY：控制View圍繞他的支點(diǎn)進(jìn)行2D旋轉(zhuǎn)
pivotX和pivotY：控制View對(duì)象的支點(diǎn)位置慨畸，圍繞這個(gè)支點(diǎn)進(jìn)行旋轉(zhuǎn)和縮放的處理倒谷，默認(rèn)情況下支點(diǎn)位置為對(duì)象的中心點(diǎn)
如果一個(gè)屬性沒有g(shù)et和set方法可以通過包裹類來(lái)實(shí)現(xiàn)蛛蒙。
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;
}
}
這里是實(shí)現(xiàn)改變寬度的方法，應(yīng)用在scrollview監(jiān)聽里面如下
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();//靠系統(tǒng)提供的Transition實(shí)現(xiàn)view寬度改變
isExpand = true;
ObjectAnimator objectAnimator = ObjectAnimator.ofInt(new ViewWrapper(getBinding().layoutTitle), "width", ScreenWidth);//這是靠動(dòng)畫來(lái)改變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)是固定寬度牵祟，這些可以自己按需求定制。這里引入一個(gè)isExpand是為了防止動(dòng)畫重復(fù)執(zhí)行抖格，這點(diǎn)在做其他動(dòng)畫效果同樣適用诺苹，需要注意咕晋。此方法是借鑒本篇文章而來(lái)http://www.reibang.com/p/4419f6448d88，這里沒有指明自定義set方法實(shí)現(xiàn)改變view寬度收奔，所以做個(gè)補(bǔ)充掌呜。
2.利用系統(tǒng)為我們提供的Transition框架
private void exPand() {
getBinding().tvTitle.setText("搜索簡(jiǎn)書的內(nèi)容和朋友");
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);
//開始動(dòng)畫
beginDelayedTransition(getBinding().layoutTitle);
}
private void beginDelayedTransition(ViewGroup view) {
transitionSet = new AutoTransition();
transitionSet.setDuration(200);
TransitionManager.beginDelayedTransition(view, transitionSet);
}
利用系統(tǒng)提供的AutoTransition創(chuàng)建一個(gè)缺省轉(zhuǎn)換,淡入/淡出,在一個(gè)場(chǎng)景中移動(dòng)和調(diào)整大小，當(dāng)view改變時(shí)坪哄。
第二種方法需要引入design包兼容
compile 'com.android.support:design:27.0.2'
關(guān)于toolbar的漸變可以看文末的源碼實(shí)現(xiàn)质蕉，需要注意的是一定要給toolbar設(shè)置一個(gè)初始背景色，不然會(huì)包沒有背景引用空指針異常翩肌。
注意
需要給文字設(shè)置單行顯示模暗，不然會(huì)有一個(gè)閃動(dòng)，利用Transition時(shí)候需要給文字設(shè)置寬高自適應(yīng)摧阅，這里我也不太明白為什么設(shè)置高度全充滿會(huì)閃爍一下汰蓉。
最后附上源碼
https://github.com/NullRoutine/databindinglibrary
直接查看AnimatorActivity即可。
