FAB 翻译动画不起作用

Question

我试图隐藏一个浮动动作按钮，当 RecyclerView 滚动时，动画使得 FAB 必须从其实际位置向下移动，并带有平移动画。在显示 FAB 时，我以同样的方式显示动画，使其从底部显示到其实际位置。 FAB 从底部到实际位置的显示工作正常。但是隐藏 FAB 是行不通的。我还在动画中使用 alpha 来实现“淡入”和“淡出”效果。

// fab_show.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!--Move-->
    <translate
        android:duration="1000"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXDelta="0%"
        android:toYDelta="200%"/>

    <!--Fade In-->
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="0.0"/>

</set>

//fab_hide.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!--Move-->
    <translate
        android:duration="1000"
        android:fromXDelta="0%"
        android:fromYDelta="200%"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXDelta="0%"
        android:toYDelta="0%"/>

    <!--Fade Out-->
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0"/>

</set>

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    Animation show_fab;
    Animation hide_fab;
    private List<Movie> movieList = new ArrayList<>();
    MyAdapter mAdapter;
    RecyclerView recycler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fab = (FloatingActionButton) findViewById(R.id.fab);
        show_fab = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_show);
        hide_fab = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_hide);

        recycler = (RecyclerView)findViewById(R.id.recycler);
        recycler.setLayoutManager(new LinearLayoutManager(MainActivity.this, LinearLayoutManager.VERTICAL, false));
        recycler.setHasFixedSize(true);

        mAdapter = new MyAdapter(movieList);
        recycler.setAdapter(mAdapter);

        prepareMovieData();

        recycler.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (dy > 0 && (fab.getVisibility() == View.VISIBLE)){
                    //fab.hide();
                    fab.startAnimation(hide_fab);
                }
                else if (dy < 0 && (fab.getVisibility() != View.VISIBLE)){
                    //fab.show();
                    fab.startAnimation(show_fab);
                }
            }
        });
    }

    private void prepareMovieData() {
        Movie movie = new Movie("Mad Max: Fury Road", "Action & Adventure", "2015");
        movieList.add(movie);

        movie = new Movie("Inside Out", "Animation, Kids & Family", "2015");
        movieList.add(movie);

        movie = new Movie("Star Wars: Episode VII - The Force Awakens", "Action", "2015");
        movieList.add(movie);

        movie = new Movie("Shaun the Sheep", "Animation", "2015");
        movieList.add(movie);

        movie = new Movie("The Martian", "Science Fiction & Fantasy", "2015");
        movieList.add(movie);

        movie = new Movie("Mission: Impossible Rogue Nation", "Action", "2015");
        movieList.add(movie);

        movie = new Movie("Up", "Animation", "2009");
        movieList.add(movie);

        movie = new Movie("Star Trek", "Science Fiction", "2009");
        movieList.add(movie);

        movie = new Movie("The LEGO Movie", "Animation", "2014");
        movieList.add(movie);

        movie = new Movie("Iron Man", "Action & Adventure", "2008");
        movieList.add(movie);

        movie = new Movie("Aliens", "Science Fiction", "1986");
        movieList.add(movie);

        movie = new Movie("Chicken Run", "Animation", "2000");
        movieList.add(movie);

        movie = new Movie("Back to the Future", "Science Fiction", "1985");
        movieList.add(movie);

        movie = new Movie("Raiders of the Lost Ark", "Action & Adventure", "1981");
        movieList.add(movie);

        movie = new Movie("Goldfinger", "Action & Adventure", "1965");
        movieList.add(movie);

        movie = new Movie("Guardians of the Galaxy", "Science Fiction & Fantasy", "2014");
        movieList.add(movie);

        mAdapter.notifyDataSetChanged();
    }

    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

        private List<Movie> moviesList;

        public MyAdapter(List<Movie> moviesList) {
            this.moviesList = moviesList;
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.movie_list_row, parent, false);

            return new MyViewHolder(itemView);
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            Movie movie = moviesList.get(position);
            holder.title.setText(movie.getTitle());
            holder.genre.setText(movie.getGenre());
            holder.year.setText(movie.getYear());
        }

        @Override
        public int getItemCount() {
            return moviesList.size();
        }

        public class MyViewHolder extends RecyclerView.ViewHolder {
            public TextView title, year, genre;

            public MyViewHolder(View view) {
                super(view);
                title = (TextView) view.findViewById(R.id.title);
                genre = (TextView) view.findViewById(R.id.genre);
                year = (TextView) view.findViewById(R.id.year);
            }
        }
    }


}

Answer 1

我使用了这个link，它工作得很好。

recycler.addOnScrollListener(new RecyclerView.OnScrollListener()
        {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy)
            {
                if (dy > 0 ||dy<0 && fab.isShown())
                {
                    hideFab();
                }
            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState)
            {
                if (newState == RecyclerView.SCROLL_STATE_IDLE)
                {
                    showFab();
                }

                super.onScrollStateChanged(recyclerView, newState);
            }
        });

private void hideFab() {
        if (isFabShowing) {
            isFabShowing = false;
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
                final Point point = new Point();
                getWindow().getWindowManager().getDefaultDisplay().getSize(point);
                final float translation = fab.getY() - point.y;
                fab.animate().translationYBy(-translation).start();
            } else {
                Animation animation = AnimationUtils.makeOutAnimation(MainActivity.this, true);
                animation.setFillAfter(true);

                animation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        fab.setClickable(false);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

                fab.startAnimation(animation);
            }
        }
    }

    private void showFab() {
        if (!isFabShowing) {
            isFabShowing = true;
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
                fab.animate().translationY(0).start();
            } else {
                Animation animation = AnimationUtils.makeInAnimation(MainActivity.this, false);
                animation.setFillAfter(true);

                animation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        fab.setClickable(true);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

                fab.startAnimation(animation);
            }
        }
    }

Answer 2

这样试试 在 XML 中

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/layout_background"
    android:orientation="vertical">

  <com.malinskiy.superrecyclerview.SuperRecyclerView
        android:id="@+id/activity_marketplace_feed"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/dp_56"
        app:layout_empty="@layout/emptyview"
        app:mainLayoutId="@layout/layout_recyclerview_verticalscroll"
        app:recyclerClipToPadding="false"
        app:scrollbarStyle="insideOverlay" />

    <com.github.clans.fab.FloatingActionMenu
            android:id="@+id/menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom|end"
            fab:menu_animationDelayPerItem="50"
            fab:menu_backgroundColor="#3b000000"
            fab:menu_buttonSpacing="0dp"
            fab:menu_colorNormal="@color/colorAccent"
            fab:menu_colorPressed="#FFCA3D3E"
            fab:menu_colorRipple="#99FFFFFF"
            fab:menu_fab_hide_animation="@anim/hide_to_bottom"
            fab:menu_fab_label=""
            fab:menu_fab_show_animation="@anim/show_from_bottom"
            fab:menu_fab_size="normal"
            fab:menu_icon="@drawable/fab_add"
            fab:menu_labels_colorNormal="#333333"
            fab:menu_labels_colorPressed="#444444"
            fab:menu_labels_colorRipple="#66FFFFFF"
            fab:menu_labels_cornerRadius="3dp"
            fab:menu_labels_ellipsize="none"
            fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
            fab:menu_labels_margin="0dp"
            fab:menu_labels_maxLines="-1"
            fab:menu_labels_padding="8dp"
            fab:menu_labels_paddingBottom="4dp"
            fab:menu_labels_paddingLeft="8dp"
            fab:menu_labels_paddingRight="8dp"
            fab:menu_labels_paddingTop="4dp"
            fab:menu_labels_position="left"
            fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
            fab:menu_labels_showShadow="true"
            fab:menu_labels_singleLine="false"
            fab:menu_labels_style="@style/MenuLabelsStyle"
            fab:menu_labels_textColor="#FFFFFF"
            fab:menu_labels_textSize="@dimen/sp_14"
            fab:menu_openDirection="up"
            fab:menu_shadowColor="#66000000"
            fab:menu_shadowRadius="4dp"
            fab:menu_shadowXOffset="1dp"
            fab:menu_shadowYOffset="3dp"
            fab:menu_showShadow="true">

</FrameLayout>

资源文件

hide_to_bottom

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="0"
    android:interpolator="@android:interpolator/accelerate_quint"
    android:toYDelta="30%p" />

show_from_bottom

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromYDelta="30%p"
    android:interpolator="@android:interpolator/accelerate_cubic"
    android:toYDelta="0" />

fab_slide_out_to_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/accelerate_quint">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="150" />
    <translate
        android:fromXDelta="0"
        android:toXDelta="30%p"
        android:duration="200" />
</set>

fab_slide_in_from_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/overshoot">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="300" />
    <translate
        android:fromXDelta="15%p"
        android:toXDelta="0"
        android:duration="200" />
</set>

风格

 <style name="MenuLabelsStyle">
        <item name="android:background">@drawable/fab_label_background</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">14sp</item>
        <item name="android:maxLines">1</item>
        <item name="android:ellipsize">end</item>
    </style>

Oncreate 内部

@BindView(R.id.menu) FloatingActionMenu fab_menu;
fab_menu.setClosedOnTouchOutside(true);

 feedRecyclerView.setOnScrollListener(new RecyclerView.OnScrollListener(){
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy){
                if (dy > 0 ||dy<0 && fab_menu.isShown())
                    fab_menu.hideMenu(true);
            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                if (newState == RecyclerView.SCROLL_STATE_IDLE){
                    fab_menu.showMenu(true);
                }
                super.onScrollStateChanged(recyclerView, newState);
            }
        });