2017-02-05 4 views
1

J'ai besoin d'une explication très simple de la façon dont je peux animer cette 'ajouter au panier' FloatingActionButton chaque fois que vous cliquez dessus. Tout ce que je veux, c'est une animation de mouvement lisse «gauche-droite» ou «down-up».Simple animation pour le bouton d'action flottante dans Android?

S'il vous plaît regarder 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!

+0

Pour plus d'explications, que tentez-vous d'accomplir? – rafsanahmad007

+0

Donc, je veux juste que mon bouton d'action flottant fasse trembler de haut en bas ou d'animation gauche et droite quand on clique dessus. –

Répondre

6

Essayez la bibliothèque AndroidViewAnimations. Cette bibliothèque fournit un moyen facile d'animer vos vues. Il y a beaucoup d'effets. Par exemple

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

Merci beaucoup. C'est parfait! –

+0

Pas du tout))))) –

+0

@Irtaza Safi il me semble que vous pouvez ajouter votre fab dans la mise en page (par exemple la disposition linéaire) et aussi les mettre vue que vous souhaitez afficher là. Ensuite, vous pouvez configurer Android: layout_gravity = "bas | droite" à cette mise en page –

3

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

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

ou

shake.xml> res/Anim/shake.xml (pas de bibliothèque supplémentaire besoin, 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); 
    } 
}); 

enter image description here

+1

Merci!Cela semble une solution plus simple –

+1

@Irtaza Safi Je n'aime pas utiliser les bibliothèques 2 pour une chose simple comme celle-ci, mais les réponses avec les bibliothèques sont acceptées rapidement: | , de toute façon mon est simple si vous aimez n'hésitez pas à l'utiliser^_^bonne chance –

+1

Je suis d'accord. C'est juste que lorsque vous êtes un noob dans une région, les réponses de la bibliothèque semblent plus simples. Votre réponse m'aide vraiment à comprendre comment cela fonctionne en arrière-plan. –

1

Jetez un oeil à ceci:

https://github.com/Scalified/fab

Il a une gauche à droite ou de haut en bas mouvement animation

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