2015-06-30 34 views
6

nasıl bir simge animasyon çapraz (gelen kutusu) içine ok (navigasyon çekmece) içine hamburger ya da kalem gibi, başka biri ile transforme edilen arşivleme mı? Bu animasyonu nasıl arşivleyebilirim?bir tane

cevap

10

simge animasyonu animated-vector

İlk vektör drawables olarak simgeleri tanımlamak kullanılarak elde edilebilir. Örneğin, animasyonu çapraz olarak here olarak işaretleyelim. ic_tick'u ic_cross'a hareketlendireceğiz.

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

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/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_cross.xml

Sonra adımların her biri için animatörler oluşturun. valueFrom, animasyonun başlangıç ​​noktasını belirtir ve valueTo, animasyonun son ürünüdür. interpolator, enterpolasyon türüdür ve Android dokümanlarında daha fazlasını bulabilirsiniz. duration, animasyonun süresini belirtir.
<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"/> 

tick_to_cross.xml

Şimdi, animasyonlu-vektörü kullanarak, biz vektör animasyon. Burada <target android:name, animasyonun yapılması gereken hedefi belirtir ve android:animation, animasyonun yapılmasını söyler.

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> 

Orada çekilebilir vektörler arasında animasyon için nasıl bir kaç sınırlamalar, ancak net bir resim varsa ne ne animasyon ve nasıl, bir şekilde ya da başka saldırdığını edilebilir animasyon gitmeli.

+0

mükemmel Seni çok işleri teşekkür :) – qwertz

+0

otomatik bir görüntü dosyasından simge vektör xml dosyası (ic_cross.xml veya ic_tick.xml) almak için herhangi bir yolu var mı? – Caketray

+1

@Caketray png'yi svg'ye (vektör xml) dönüştürmek için birkaç araç vardır, sadece bir Google araması yapın. – kushpf

İlgili konular