Animation simple pour un bouton d'action flottant dans Android ?

Question

J'ai besoin d'une explication très simple sur la façon dont je peux animer cet "ajout au panier FloatingActionButton chaque fois que l'on clique dessus. Tout ce que je veux, c'est une animation de mouvement fluide "gauche-droite" ou "bas-haut".

Veuillez consulter le code ci-dessous

<?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>

Merci d'avance !

Answer 1

Essayer AndroidViewAnimations bibliothèque. Cette bibliothèque permet d'animer facilement les vues. Il y a beaucoup d'effets. Par exemple

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

Answer 2

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

Sur son onClick ! donnez les coordonnées que vous voulez !

ou

shake.xml > res/anim/shake.xml ( aucune bibliothèque supplémentaire n'est nécessaire vous pouvez personnaliser ce 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);
    }
});

Answer 3

Jetez un coup d'œil à ceci :

https://github.com/Scalified/fab

Il peut être animé de gauche à droite ou de haut en bas.

Dans votre gradle :

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

dans la mise en page :

    <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>

Maintenant, pour l'utilisation mobile :

 // 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);