美文网首页
类似知乎FloatingActionButton的滚动消失动画

类似知乎FloatingActionButton的滚动消失动画

作者: 铝小亮 | 来源:发表于2016-10-08 10:39 被阅读2103次

本文主要实现的是随着RecycleView的上下滑动,FloatingActionButton随之消失或出现的动画效果。

实现过程

1、引入recyclerview、design包等等

compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:recyclerview-v7:24.2.1'
compile 'com.android.support:support-v4:24.2.1'
compile 'com.android.support:cardview-v7:24.2.1'
compile 'com.android.support:design:24.2.1'

2、编写xml布局文件

<android.support.design.widget.CoordinatorLayot
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipToPadding="false"
                android:padding="3dp"
                android:scrollbarStyle="outsideOverlay"
                android:scrollbars="vertical" />


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_btn_main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:layout_marginBottom="24dp"
            android:src="@drawable/ic_thumb_up_24dp"
            app:backgroundTint="?attr/colorPrimary"
            app:fabSize="normal"
            app:layout_anchor="@id/recycler_main"
            app:layout_anchorGravity="bottom|end"
           app:layout_behavior="com.lv.rxdemo.widget.ScrollAwareBehavior"/>

    </android.support.design.widget.CoordinatorLayout>

关键在于:
app:layout_anchor="@id/recycler_main"
通过这行代码将floatingActionButton和RecycleView的动作监听关联起来
app:layout_behavior="com.lv.rxdemo.widget.ScrollAwareBehavior"
通过设置behavior让floatingActionButton获得自定义的动画效果行为

3、编写动画资源xml:fab_outfab_in
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> 

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>  

4、遍写ScrollAwareBehavior类
该类的实现也比较简单,在onNestedScroll中判断动作是上滑还是下滑,然后执行相应的动画方法。

至此,类似知乎FloatingActionButton的滚动消失动画也大功告成了

效果

video_1.gif

PS:

代码片段取自我的github上的demo:

相关文章

网友评论

      本文标题:类似知乎FloatingActionButton的滚动消失动画

      本文链接:https://www.haomeiwen.com/subject/hcduyttx.html