Verwenden von AnimatedVectorDrawables, um die Android-Robo-Welle

Question

Ich versuche, eine einfache Animation des Android-Roboter-Logo winken zu erstellen. Ich habe meinen VectorDrawable und AnimatedVectorDrawable wie folgt definiert:

VectorDrawable (ziehbar/android.xml)

<vector android:height="240dp" android:viewportHeight="345.0" 
    android:viewportWidth="294.0" android:width="240dp" xmlns:android="http://schemas.android.com/apk/res/android"> 
    <path android:fillColor="#a4c639" 
     android:pathData="M206.62,4.72L206.62,4.72A6.5,6.5 57.81,0 1,209.16 13.56L173.77,77.4A6.5,6.5 76.8,0 1,164.93 79.94L164.93,79.94A6.5,6.5 76.8,0 1,162.4 71.1L197.79,7.26A6.5,6.5 57.81,0 1,206.62 4.72z" 
     android:strokeColor="#FFF" android:strokeWidth="1"/> 
    <path android:fillColor="#a4c639" 
     android:pathData="M74.07,7.53L74.07,7.53A6.5,6.5 112,0 1,82.9 10.06L118.29,73.91A6.5,6.5 124.14,0 1,115.76 82.74L115.76,82.74A6.5,6.5 124.14,0 1,106.92 80.21L71.53,16.36A6.5,6.5 112,0 1,74.07 7.53z" 
     android:strokeColor="#FFF" android:strokeWidth="1"/> 

    <path 
     android:name="leftArm" 
     android:fillColor="#ff0000" 
     android:pathData="M28,111L28,111A24,24 0,0 1,52 135L52,220A24,24 0,0 1,28 244L28,244A24,24 0,0 1,4 220L4,135A24,24 0,0 1,28 111z" 
     /> 

    <path android:fillColor="#a4c639" android:pathData="M56,111a91,84 0,1 0,182 0a91,84 0,1 0,-182 0z"/> 
    <path android:fillColor="#a4c639" android:pathData="M78,90L216,90A22,22 0,0 1,238 112L238,250A22,22 0,0 1,216 272L78,272A22,22 0,0 1,56 250L56,112A22,22 0,0 1,78 90z"/> 
    <path 
     android:name="rightArm" 
     android:fillColor="#00f" 
     android:pathData="M264,111L264,111A24,24 0,0 1,288 135L288,220A24,24 0,0 1,264 244L264,244A24,24 0,0 1,240 220L240,135A24,24 0,0 1,264 111z"/> 
    <path android:fillColor="#FFF" android:pathData="m52,114.5h190" 
     android:strokeColor="#FFF" android:strokeWidth="1"/> 
    <path android:fillColor="#FFF" 
     android:pathData="M105,70m-4,0a4,4 0,1 1,8 0a4,4 0,1 1,-8 0" 
     android:strokeColor="#FFF" android:strokeWidth="1"/> 
    <path android:fillColor="#FFF" 
     android:pathData="M189,70m-4,0a4,4 0,1 1,8 0a4,4 0,1 1,-8 0" 
     android:strokeColor="#FFF" android:strokeWidth="1"/> 
</vector> 

AnimatedVectorDrawable (ziehbar/wave.xml)

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/android"> 

    <target 
     android:animation="@animator/waveanim" 
     android:name="leftArm"/> 


</animated-vector> 

und heren Animator/waveanim. xml:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 

    <objectAnimator 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:duration="4000" 
     android:repeatCount="1" 
     android:repeatMode="reverse" 
     android:propertyName="pivotX" 
     android:valueFrom="0.0" 
     android:valueTo="50.0" 
     /> 

</set> 

Ich habe vorher ein paar Diff verschiedene Dinge, wie zum Beispiel den "leftArm" -Pfad in eine <group> Hülle und versuchen, animierte zufällige Eigenschaften zu versuchen. Ich konnte einige zufällige Bewegungen machen, aber nicht so, wie ich es wollte, also habe ich diesen Code verschrottet und bin zurück zum Anfang gegangen.

Btw, here ein screenie von dem, was zur Zeit sieht es so aus:

http://prntscr.com/bk5e53

Wie kann ich mich an die Arm-Welle?

Answer 1

Nun, wenn Sie auf dem Android Welle vielleicht wird es gerade Welle ...

Für den Fall jedoch, dass nicht, hier funktioniert, wie es zu nähern.

Zuerst ist es immer nützlich, die official documentation handy for reference zu haben. Von hier aus können wir sehen, dass android:rotation eine Eigenschaft des Tags <group> ist, so dass Sie den richtigen Pfad hinuntergegangen sind, als Sie den linken Arm in ein <group> Tag eingewickelt haben, müssen Sie das tun müssen. Die anderen zu beachtenden Eigenschaften sind pivotX und pivotY. Wieder kann ich sehen, dass pivotX in Ihrer Frage erscheint, aber nicht wo es sein sollte! Der Drehpunkt einer Gruppe bestimmt, welcher Teil der Grafik der Mittelpunkt der Drehung ist. Also, wenn Sie zum Beispiel ein Quadrat betrachten. Wenn sich der Drehpunkt in der Mitte befindet, stellen Sie sich vor, Sie stecken einen Stift in die Mitte und drehen das Quadrat um ihn herum. Wenn der Drehpunkt oben links war, stellen Sie sich vor, dass Sie einen Stift genau in dieser Ecke stecken und das ganze Quadrat um die gepinnte Ecke schwingen lässt.

In Ihrem Fall möchten Sie wahrscheinlich die Koordinaten für die Mitte der Schulter erarbeiten und diese als Ihren Drehpunkt festlegen. Ihr Drehpunkt bleibt wo er ist; Die Rotation ändert sich.

so dass ein Teil Ihrer VectorDrawable würde wie folgt aussehen:

... 
<group 
    android:name="leftArmGroup" 
    android:pivotX=  //the x and y coordinates of the shoulder 
    android:pivotY=  // 
    android:rotation="0"> 
    <path 
    android:name="leftArm" 
    android:fillColor="#ff0000" 
    android:pathData="M28,111L28,111A24,24 0,0 1,52 135L52,220A24,24 0,0 1,28 244L28,244A24,24 0,0 1,4 220L4,135A24,24 0,0 1,28 111z" 
    /> 
</group> 
... 

Ihr animierten Vektor jetzt leftArmGroup statt leftArm und Ihr objectAnimator benötigt wird android:propertyName="rotation" Eigenschaft seines Animieren (in Grad zum Ziel, zB 0. bis 360 wäre eine volle Rotation). Der 'rotation = 0' Teil, den ich oben in das Snippet eingefügt habe, muss technisch nicht vorhanden sein (Null ist Standard), aber es ist praktisch, so dass Sie schnell verschiedene Zahlen ausprobieren und sehen können, wie es in der Vorschau aussieht Fenster.

Lassen Sie mich wissen, wenn Sie weitere Details zu etwas wünschen.