使用 AnimatedVectorDrawable 制作 Android robo wave

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将是一个完整的旋转）。我在上面的代码片段中包含的 'rotation=0' 部分在技术上不需要存在（默认为零），但它很方便，因此您可以快速尝试不同的数字并在预览中查看它的外观window.

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

使用 AnimatedVectorDrawable 制作 Android robo wave

Using AnimatedVectorDrawables to make the Android robo wave

android

android-animation

android-drawable

android-vectordrawable