Icona di trasformazione Android in un'altra

Question

come è possibile ottenere l'animazione di un'icona trasformata in un'altra, come l'hamburger nella freccia (cassetto di navigazione) o la matita nella croce (casella di posta)? Come posso ottenere questa animazione?

Answer 1

L'animazione icona può essere raggiunto utilizzando animated-vector

prima definire le icone come drawable vettoriali. Ad esempio, prendiamo un segno di spunta per attraversare l'animazione come trovata here. Animeremo lo ic_tick in ic_cross.

ic_cross.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
     android:width="120dp" 
     android:height="120dp" 
     android:viewportWidth="@integer/viewport_width" 
     android:viewportHeight="@integer/viewport_height"> 

    <group 
     android:name="@string/groupTickCross" 
     android:pivotX="@integer/viewport_center_x" 
     android:pivotY="@integer/viewport_center_y"> 

     <path 
      android:name="@string/cross" 
      android:pathData="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" 
      android:strokeWidth="@integer/stroke_width" 
      android:strokeLineCap="square" 
      android:strokeColor="@color/stroke_color"/> 

    </group> 

</vector> 

ic_tick.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
     android:width="120dp" 
     android:height="120dp" 
     android:viewportWidth="@integer/viewport_width" 
     android:viewportHeight="@integer/viewport_height"> 

    <group 
     android:name="@string/groupTickCross" 
     android:pivotX="@integer/viewport_center_x" 
     android:pivotY="@integer/viewport_center_y"> 

     <path 
      android:name="@string/tick" 
      android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" 
      android:strokeWidth="@integer/stroke_width" 
      android:strokeLineCap="square" 
      android:strokeColor="@color/stroke_color"/> 

    </group> 

</vector> 

Poi creiamo animatori per ciascuna delle fasi. valueFrom indica il punto di partenza dell'animazione e valueTo è il prodotto finale dell'animazione. interpolator è il tipo di interpolazione e puoi trovare molto di più nei documenti Android. duration specifica la durata dell'animazione.

tick_to_cross.xml

<objectAnimator 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:propertyName="pathData" 
    android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" 
    android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" 
    android:duration="@integer/duration" 
    android:interpolator="@android:interpolator/fast_out_slow_in" 
    android:valueType="pathType"/> 

Ora, usando animato-vettore, animiamo il vettore. Qui <target android:name specifica il target su cui deve essere eseguita l'animazione e android:animation indica l'animazione da eseguire.

avd_tick_to_cross.xml

<animated-vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/ic_tick"> 

    <target 
     android:name="@string/tick" 
     android:animation="@animator/tick_to_cross" /> 

</animated-vector> 

Ci sono alcune limitazioni su come animare tra vettori disegnabili, ma possono essere manipolati in un modo o nell'altro, se si dispone di un quadro chiaro quello di animare a ciò, e come l'animazione dovrebbe andare.