使用AnimatedVectorDrawable让Android机器人挥手

Question

我正在尝试创建一个挥动 Android 机器人徽标的简单动画。我的VectorDrawable 和AnimatedVectorDrawable 定义如下：

VectorDrawable (drawable/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 (drawable/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>

这里是 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>

我之前尝试过一些不同的事情，例如将“leftArm”路径包装在<group> 中并尝试为随机属性设置动画。我能够获得一些随机动作，但与我想要的完全不同，所以我放弃了该代码并回到开头。

顺便说一句，这是它目前的样子：

http://prntscr.com/bk5e53

那么我怎样才能让手臂向我挥动呢？

Answer 1

好吧，如果你对 Android 挥手，也许它只会向你挥手……

但是，如果这不起作用，以下是解决方法。

首先，拥有official documentation handy for reference 总是有用的。从这里我们可以看到android:rotation 是<group> 标签的一个属性，所以当您将左臂包裹在<group> 标签中时，您正在走正确的道路，您将需要这样做。

需要注意的其他属性是pivotX 和pivotY。我再次可以看到pivotX 出现在您的问题中，但不是应该在哪里！组的轴心点决定了图形的哪个部分是旋转的中心。因此，例如，如果您考虑一个正方形。如果枢轴点在中心，想象在中间插入一个大头针并围绕它旋转正方形。如果轴心点是左上角，想象一下在那个角落插一个大头针，然后让整个正方形围绕固定的角落摆动。

在您的情况下，您可能想要计算出肩部中间的坐标并将其设置为您的枢轴。您的枢轴点保持在原处；旋转发生变化。

所以你的 VectorDrawable 部分看起来像这样：

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

您的动画矢量现在需要以leftArmGroup 而不是leftArm 为目标，并且您的objectAnimator 将为android:propertyName="rotation" 属性设置动画（以度为单位，例如0 到360 将是一个完整的旋转）。我在上面的 sn-p 中包含的 'rotation=0' 部分在技术上不需要存在（默认为零），但它很方便，因此您可以快速尝试不同的数字并查看它的外观预览窗口。

如果您想了解更多详情，请告诉我。