使用 AnimatedVectorDrawable 制作 Android robo wave
Using AnimatedVectorDrawables to make the Android robo wave
我正在尝试创建 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>
中并尝试对随机属性进行动画处理。我能够进行一些随机移动,但与我想要的完全不同,所以我放弃了该代码并回到了开头。
顺便说一句,这是目前的截图:
那么我怎样才能让手臂向我挥手呢?
好吧,如果你向 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.
如果您想了解更多详情,请告诉我。
我正在尝试创建 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>
中并尝试对随机属性进行动画处理。我能够进行一些随机移动,但与我想要的完全不同,所以我放弃了该代码并回到了开头。
顺便说一句,这是目前的截图:
那么我怎样才能让手臂向我挥手呢?
好吧,如果你向 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.
如果您想了解更多详情,请告诉我。