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>

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

我之前尝试过一些不同的东西，例如在<group>中包装“leftArm”路径并尝试设置动画随机属性。我能够得到一些随机的动作，但没有像我想要的那样，所以我废弃了那些代码并回到了开头。

顺便说一下，这是一个目前看起来像什么的屏幕：

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'部分在技术上并不需要在那里（零是默认值），但它很方便，因此您可以快速尝试不同的数字，并在预览中查看它的外观窗口。

如果您想了解更多详细信息，请与我们联系。

使用AnimatedVectorDrawables制作Android机器人波

1 个答案: