100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 仿知乎FloatingActionButton浮动按钮动画效果实现(二)

仿知乎FloatingActionButton浮动按钮动画效果实现(二)

时间:2019-09-26 21:12:30

相关推荐

仿知乎FloatingActionButton浮动按钮动画效果实现(二)

上文 仿知乎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虽然有点累的,

但是

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。