在安卓系统中实现浮动操作按钮的简单动画？

Question

我需要一个非常简单的解释，说明我如何在单击“添加到购物车”FloatingActionButton时对其进行动画处理。我只想要一个平滑的“左右”或“上下”运动动画。

请查看以下代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="1"
    android:background="@color/cardview_light_background">    

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:layout_width="54dp"
            android:layout_height="54dp"
            android:layout_gravity="bottom|right"
            android:src="@mipmap/ic_add_shopping_cart_black_24dp"
            android:layout_marginBottom="40dp"
            android:layout_marginRight="30dp"
            app:backgroundTint="@android:color/holo_blue_light" />

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

提前感谢您！

- Muhammad Safi

---

增加更多的解释。你想要实现什么？ - rafsanahmad007

我只想让我的浮动操作按钮在被单击时执行一个上下或左右抖动的动画。 - Muhammad Safi

Answer 1

尝试使用AndroidViewAnimations库。该库提供了一种简单的方法来为您的视图添加动画效果。有很多效果可供选择。例如

YoYo.with(Techniques.Tada)
.duration(700)
.playOn(findViewById(R.id.edit_area));

- Ruslan altukhov

---

@Irtaza Safi 看起来你可以将你的 fab 添加到布局中（例如线性布局），并将它们与你想要显示的视图放在一起。然后，你可以将 android:layout_gravity="bottom|right" 设置为此布局。 - Ruslan altukhov

API看起来很酷。当我使用库进行动画处理时，引用了一个View，即android.support.design.widget.FloatingActionButton - 使用数据绑定YoYo.with(Techniques.Pulse).duration(700).playOn(mBinding.floatingActionButton); - 其中的xml设置（如alpha，scaleX等）会丢失。解决此问题的一种方法是通过Java将xml更新回其定义的设置，例如new Handler().postDelayed(new Runnable() { .. }, 700);..其中延迟允许持续时间完成..但是，对于像scaleX这样的东西，它们被重置..“动画平滑度”正在丢失。 - Gene Bo

Answer 2

floatingActionButton.animate().xBy(10).yBy(10);

在其onClick事件中，可以根据需要给出坐标！

或者

shake.xml > res/anim/shake.xml （您不需要额外的库，可以自定义此xml文件）

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="150"
        android:fromXDelta="-10%"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:toXDelta="10%"/>
</set>

..

final FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Animation anim = android.view.animation.AnimationUtils.loadAnimation(floatingActionButton.getContext(),  R.anim.shake);
        anim.setDuration(200L);
        floatingActionButton.startAnimation(anim);
    }
});

- Charuක

---

谢谢！这似乎是一个更直接的解决方案。 - Muhammad Safi

@Irtaza Safi 我不喜欢为像这样简单的事情使用库，但是使用库的答案很快就被接受了 :| ，无论如何，我的方法很简单，如果你喜欢可以随意使用 ^_^ 祝你好运 - Charuක

我同意。只是当你在某个领域是新手时，库的答案似乎更加直接明了。你的回答确实帮助我理解了它在后台是如何工作的。 - Muhammad Safi

Answer 3

Take a look at this:

https://github.com/Scalified/fab

它有一个从左到右或从上到下的移动动画。

在您的gradle中：

    dependencies {
    compile 'com.scalified:fab:1.1.3'
}

在布局中：

    <RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <com.scalified.fab.ActionButton 
            android:id="@+id/action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" 
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            />
</RelativeLayout>

现在用于移动：

 // And then find it within the content view:
ActionButton actionButton = (ActionButton) findViewById(R.id.action_button);
// Initialize the moving distance
int distance = 100.0f // in density-independent pixels

// Move ActionButton left
actionButton.moveLeft(distance);

// Move ActionButton up
actionButton.moveUp(distance);

// Move ActionButton right
actionButton.moveRight(distance);

// Move ActionButton down
actionButton.moveDown(distance);

- rafsanahmad007