上文 仿知乎FloatingActionButton浮动按钮动画效果实现(一)介绍了知乎的FloatingActionButton的点击动画效果,以及遮布的实现。
本文主要实现的是随着RecycleView的上下滑动,FloatingActionButton随之消失或出现的动画效果。
效果图如下:
实现过程:
1、引入Google的desin包:
compile 'com.android.support:design:23.0.0'
2、布局配置:
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.widget.SwipeRefreshLayoutandroid:id="@+id/spfresh_recommend"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerViewandroid:id="@+id/rv_recommend"android:background="#f2f2f2"android:scrollbars="vertical"android:layout_width="match_parent"android:layout_height="match_parent" /></android.support.v4.widget.SwipeRefreshLayout><android.support.design.widget.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@android:drawable/presence_video_online"app:backgroundTint="#04d17f"app:rippleColor="#5504d17f"app:fabSize="normal"android:clickable="true"app:layout_anchor="@id/rv_recommend"app:layout_anchorGravity="bottom|center_horizontal"android:layout_marginBottom="24dp"app:layout_behavior="com.jzn.hdlive.view.widget.ScrollAwareFABBehavior"/></android.support.design.widget.CoordinatorLayout>
这里要注意:
app:layout_anchor="@id/rv_recommend"
很关键,通过这行代码将floatingActionButton和RecycleView的动作监听关联起来。
app:layout_behavior="com.jzn.hdlive.view.widget.ScrollAwareFABBehavior"
通过设置behavior让floatingActionButton获得自定义的动画效果行为。
3、ScrollAwareFABBehavior类
/*** Created by jiangzn on 16/10/2.*/public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();private boolean mIsAnimatingOut = false;public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {super();}@Overridepublic boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,final View directTargetChild, final View target, final int nestedScrollAxes) {// Ensure we react to vertical scrollingreturn nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL|| super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);}@Overridepublic void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,final View target, final int dxConsumed, final int dyConsumed,final int dxUnconsumed, final int dyUnconsumed) {super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {// User scrolled down and the FAB is currently visible -> hide the FABanimateOut(child);} else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {// User scrolled up and the FAB is currently not visible -> show the FABanimateIn(child);}}// Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exitsprivate void animateOut(final FloatingActionButton button) {if (Build.VERSION.SDK_INT >= 14) {ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer().setListener(new ViewPropertyAnimatorListener() {public void onAnimationStart(View view) {ScrollAwareFABBehavior.this.mIsAnimatingOut = true;}public void onAnimationCancel(View view) {ScrollAwareFABBehavior.this.mIsAnimatingOut = false;}public void onAnimationEnd(View view) {ScrollAwareFABBehavior.this.mIsAnimatingOut = false;view.setVisibility(View.GONE);}}).start();} else {Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);anim.setInterpolator(INTERPOLATOR);anim.setDuration(200L);anim.setAnimationListener(new Animation.AnimationListener() {public void onAnimationStart(Animation animation) {ScrollAwareFABBehavior.this.mIsAnimatingOut = true;}public void onAnimationEnd(Animation animation) {ScrollAwareFABBehavior.this.mIsAnimatingOut = false;button.setVisibility(View.GONE);}@Overridepublic void onAnimationRepeat(final Animation animation) {}});button.startAnimation(anim);}}// Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout entersprivate void animateIn(FloatingActionButton button) {button.setVisibility(View.VISIBLE);if (Build.VERSION.SDK_INT >= 14) {ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F).setInterpolator(INTERPOLATOR).withLayer().setListener(null).start();} else {Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);anim.setDuration(200L);anim.setInterpolator(INTERPOLATOR);button.startAnimation(anim);}}}
该类的实现也比较简单,在onNestedScroll中判断动作是上滑还是下滑,然后执行相应的动画方法。
4、动画资源xml:R.anim.fab_out 和 R.anim.fab_in
fab_in:
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"android:interpolator="@android:anim/decelerate_interpolator"android:zAdjustment="top"><scale android:fromXScale="1.0" android:toXScale=".5"android:fromYScale="1.0" android:toYScale=".5"android:pivotX="50%p" android:pivotY="50%p"android:duration="@android:integer/config_mediumAnimTime" /><alpha android:fromAlpha="1.0" android:toAlpha="0"android:duration="@android:integer/config_mediumAnimTime"/></set>
fab_out:
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"android:interpolator="@android:anim/decelerate_interpolator"><scale android:fromXScale="2.0" android:toXScale="1.0"android:fromYScale="2.0" android:toYScale="1.0"android:pivotX="50%p" android:pivotY="50%p"android:duration="@android:integer/config_mediumAnimTime" /></set>
这里我实现的是缩放消失动画,设置其他的动画直接在anim这两个xml文件里修改就可以了。
********************************************************************************************************************************
国庆节还是在一直努力写代码啊QAQ虽然有点累的,
但是
现在还远没有到可以清闲的时候,要加油,不断地加油~