Android: Detail Animation in Floating Action Button

Question

Ich versuche, mit den neuen Designrichtlinien von Android Lollipop vertraut zu machen. Also insbesondere für Animationen, versuche ich etwas wie diese detaillierten Animationen für Icons oder Buttons zu erreichen: http://www.google.com/design/spec/animation/delightful-details.html

Ich habe mich gefragt, wie sie das gemacht haben?

In meinem speziellen Fall habe ich eine schwimmende Aktionstaste, mit der man einen Artikel in einen Einkaufswagen legen kann. Nachdem der Benutzer die Schaltfläche gedrückt hat, möchte ich das Symbol, das innerhalb dieser Schaltfläche gezeichnet werden kann, animieren. Die Animation soll einen Gleiteffekt haben, bei dem der Wagen an den unteren Rand der Schaltfläche bewegt wird und das Häkchen vom oberen Rand der Schaltfläche eingezogen wird.

fand ich eine ViewFlipper (http://www.inter-fuser.com/2009/07/android-transistions-slide-in-and-slide.html), aber ich den Knopf an seinem Platz halten will und nur das Symbol in der Schaltfläche animieren.

Auf der anderen Seite habe ich AnimationDrawables (http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html) gefunden, aber dort muss ich jeden Rahmen von Hand erstellen, was auch seltsam ist.

Was ist der beste Weg, um das zu erreichen?

Answer 1

Ich frage mich, ob fab Unterstützung, die Sie jetzt jedoch können Sie immer Ihre eigenen erstellen.

Erstellen Sie ein benutzerdefiniertes lineares Layout mit Bildansicht. Machen Sie es round wie Fab. Sie können dann diese Animation betrachten examples

Ich hoffe, es hilft. Glückliche Kodierungen.

Answer 2

Sie könnten eine Rahmenanimation verwenden: Sie erstellen 15-20 Frames für die Animation, die Sie machen möchten. Sie erstellen eine Animationsliste ziehbar, zum Beispiel animation_list.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
android:oneshot="true"> 
<item 
    android:duration="50" 
    android:drawable="@drawable/frame_01"/> 
<item 
    android:duration="50" 
    android:drawable="@drawable/frame_02"/> 
<item 
    android:duration="50" 
    android:drawable="@drawable/frame_03"/> 
<item 
    android:duration="50" 
    android:drawable="@drawable/frame_04"/> 
<item 
    android:duration="50" 
    android:drawable="@drawable/frame_05"/> 
<item 
    android:duration="50" 
    android:drawable="@drawable/frame_06"/></animation-list> 

Dann legen Sie diese ziehbar als src in Ihrem benutzerdefinierten FAB. Nun können Sie den Frame für Frame Animation starten (wenn der FAB-Animation beendet):

ImageView mImageViewFilling = (ImageView) findViewById(R.id.animated_imageview); 
((AnimationDrawable) mImageViewFilling.getBackground()).start();