仿知乎FloatingActionButton浮动按钮动画效果实现（二）

来源：互联网发布：java float 0 编辑：程序博客网时间：2024/05/02 04:55

上文仿知乎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="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.widget.SwipeRefreshLayout        android:id="@+id/spfresh_recommend"        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v7.widget.RecyclerView            android: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.FloatingActionButton        android: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();    }    @Override    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,                                       final View directTargetChild, final View target, final int nestedScrollAxes) {        // Ensure we react to vertical scrolling        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);    }    @Override    public 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 FAB            animateOut(child);        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {            // User scrolled up and the FAB is currently not visible -> show the FAB            animateIn(child);        }    }    // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits    private 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);                }                @Override                public void onAnimationRepeat(final Animation animation) {                }            });            button.startAnimation(anim);        }    }    // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters    private 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="http://schemas.android.com/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="http://schemas.android.com/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虽然有点累的，

但是

现在还远没有到可以清闲的时候，要加油，不断地加油~

3 0