AnimatedVectorDrawable矢量图动画的使用和修改
文章目录
- 一、前言
- 二、一个矢量图文件
- 三、参考链接
一、前言
矢量可绘制对象可以提供比较复杂的动画效果，只是绘制比较复杂，这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候，导出的矢量图里面没有改内容，所以需要开发自己添加，这里记录下添加的方式。
二、一个矢量图文件
以下是一个矢量图的内容。主要由两部分效果(位移和缩放)组成，这里需要设置为无限循环播放模式，需要在里面的属性动画里面添加以下代码
android:repeatMode="reverse"
android:repeatMode="restart"
android:repeatCount="infinite"
在以下代码中需要注意的是，不仅要在位移和缩放上添加播放次数的代码，路径动画也要添加播放次数，例如。
这个路径指的是缩放的路径，两者的次数和重复方式需要保持一致，在具体文件中可以通过android:duration="767"来进行区分，路径和缩放或者位移的时间一定是一致的。
<target android:name="_R_G_L_0_C_0">
<aapt:attr name="android:animation">
<set android:ordering="together">
<objectAnimator
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="767"
android:propertyName="pathData"
android:startOffset="0"
android:valueFrom="M-369.91 -24.69 C-369.91,-24.69 -463.36,-24.69 -463.36,-24.69 C-475.43,-24.56 -485.78,-14.75 -485.78,-3.15 C-485.78,8.45 -477.56,18.69 -464.13,19.1 C-464.13,19.1 -369.91,18.85 -369.91,18.85 C-357.95,18.85 -348.25,9.1 -348.25,-2.92 C-348.25,-14.94 -357.95,-24.69 -369.91,-24.69c "
android:valueTo="M-355.5 -25.15 C-355.5,-25.15 -446.45,-25.15 -446.45,-25.15 C-458.41,-25.15 -468.95,-15.44 -468.95,-3.3 C-468.95,8.84 -459.61,19.02 -446.45,18.82 C-446.45,18.82 -354.32,18.82 -354.32,18.82 C-341.62,18.82 -331.22,9.88 -331.47,-4.22 C-331.7,-17.37 -343.92,-25.15 -355.5,-25.15c "
android:valueType="pathType">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
set>
aapt:attr>
target>
完整的文件
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:width="140dp"
android:height="48dp"
android:viewportWidth="140"
android:viewportHeight="48">
<group android:name="_R_G">
<group
android:name="_R_G_L_1_G"
android:scaleX="1"
android:scaleY="1"
android:translateX="70"
android:translateY="24">
<path
android:name="_R_G_L_1_G_D_0_P_0"
android:fillAlpha="1"
android:fillColor="#007a17"
android:fillType="nonZero"
android:pathData=" M68.62 0.4 C68.62,0.4 68.62,0.4 68.62,0.4 C68.62,13.09 58.31,23.4 45.62,23.4 C45.62,23.4 -46.38,23.4 -46.38,23.4 C-59.07,23.4 -69.38,13.09 -69.38,0.4 C-69.38,0.4 -69.38,0.4 -69.38,0.4 C-69.38,-12.3 -59.07,-22.6 -46.38,-22.6 C-46.38,-22.6 45.62,-22.6 45.62,-22.6 C58.31,-22.6 68.62,-12.3 68.62,0.4c " />
<path
android:name="_R_G_L_1_G_D_1_P_0"
android:fillAlpha="1"
android:fillColor="#6df627"
android:fillType="nonZero"
android:pathData=" M69.08 -0.84 C69.08,-0.84 69.08,-0.84 69.08,-0.84 C69.08,11.57 58.77,21.65 46.08,21.65 C46.08,21.65 -45.92,21.65 -45.92,21.65 C-58.61,21.65 -68.92,11.57 -68.92,-0.84 C-68.92,-0.84 -68.92,-0.84 -68.92,-0.84 C-68.92,-13.25 -58.61,-23.32 -45.92,-23.32 C-45.92,-23.32 46.08,-23.32 46.08,-23.32 C58.77,-23.32 69.08,-13.25 69.08,-0.84c " />
<path
android:name="_R_G_L_1_G_D_2_P_0"
android:pathData=" M69.08 -0.84 C69.08,-0.84 69.08,-0.84 69.08,-0.84 C69.08,11.57 58.77,21.65 46.08,21.65 C46.08,21.65 -45.92,21.65 -45.92,21.65 C-58.61,21.65 -68.92,11.57 -68.92,-0.84 C-68.92,-0.84 -68.92,-0.84 -68.92,-0.84 C-68.92,-13.25 -58.61,-23.32 -45.92,-23.32 C-45.92,-23.32 46.08,-23.32 46.08,-23.32 C58.77,-23.32 69.08,-13.25 69.08,-0.84c "
android:strokeWidth="1"
android:strokeAlpha="1"
android:strokeColor="#007a17"
android:strokeLineCap="round"
android:strokeLineJoin="round" />
group>
<group
android:name="_R_G_L_0_G"
android:pivotX="-566.558"
android:pivotY="1.938"
android:scaleX="1"
android:scaleY="1"
android:translateX="486.808"
android:translateY="25.812">
<group android:name="_R_G_L_0_C_0_G">
<clip-path
android:name="_R_G_L_0_C_0"
android:pathData=" M-369.91 -24.69 C-369.91,-24.69 -463.36,-24.69 -463.36,-24.69 C-475.43,-24.56 -485.78,-14.75 -485.78,-3.15 C-485.78,8.45 -477.56,18.69 -464.13,19.1 C-464.13,19.1 -369.91,18.85 -369.91,18.85 C-357.95,18.85 -348.25,9.1 -348.25,-2.92 C-348.25,-14.94 -357.95,-24.69 -369.91,-24.69c " />
<group android:name="_R_G_L_0_C_0_G_G">
<group
android:name="_R_G_L_0_G_G_0_D_0_P_0_G_0_T_0"
android:translateX="0"
android:translateY="0">
<path
android:name="_R_G_L_0_G_G_0_D_0_P_0"
android:fillAlpha="0.6"
android:fillColor="#ffffff"
android:fillType="nonZero"
android:pathData=" M-535.42 -32.81 C-535.42,-32.81 -554.92,28.06 -554.92,28.06 C-554.92,28.06 -563.79,28.19 -563.79,28.19 C-563.79,28.19 -544.29,-32.31 -544.29,-32.31 C-544.29,-32.31 -535.42,-32.81 -535.42,-32.81c " />
group>
<group
android:name="_R_G_L_0_G_G_0_D_0_P_1_G_0_T_0"
android:translateX="0"
android:translateY="0">
<path
android:name="_R_G_L_0_G_G_0_D_0_P_1"
android:fillAlpha="0.6"
android:fillColor="#ffffff"
android:fillType="nonZero"
android:pathData=" M-494.67 -32.69 C-494.67,-32.69 -514.17,28.19 -514.17,28.19 C-514.17,28.19 -542.79,28.44 -542.79,28.44 C-542.79,28.44 -523.29,-32.06 -523.29,-32.06 C-523.29,-32.06 -494.67,-32.69 -494.67,-32.69c " />
group>
group>
group>
group>
group>
<group android:name="time_group" />
vector>
aapt:attr>
<target android:name="_R_G_L_1_G">
<aapt:attr name="android:animation">
<set android:ordering="together">
<objectAnimator
android:duration="767"
android:propertyName="scaleX"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:startOffset="0"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
<objectAnimator
android:duration="767"
android:propertyName="scaleY"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:startOffset="0"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
set>
aapt:attr>
target>
<target android:name="_R_G_L_0_C_0">
<aapt:attr name="android:animation">
<set android:ordering="together">
<objectAnimator
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="767"
android:propertyName="pathData"
android:startOffset="0"
android:valueFrom="M-369.91 -24.69 C-369.91,-24.69 -463.36,-24.69 -463.36,-24.69 C-475.43,-24.56 -485.78,-14.75 -485.78,-3.15 C-485.78,8.45 -477.56,18.69 -464.13,19.1 C-464.13,19.1 -369.91,18.85 -369.91,18.85 C-357.95,18.85 -348.25,9.1 -348.25,-2.92 C-348.25,-14.94 -357.95,-24.69 -369.91,-24.69c "
android:valueTo="M-355.5 -25.15 C-355.5,-25.15 -446.45,-25.15 -446.45,-25.15 C-458.41,-25.15 -468.95,-15.44 -468.95,-3.3 C-468.95,8.84 -459.61,19.02 -446.45,18.82 C-446.45,18.82 -354.32,18.82 -354.32,18.82 C-341.62,18.82 -331.22,9.88 -331.47,-4.22 C-331.7,-17.37 -343.92,-25.15 -355.5,-25.15c "
android:valueType="pathType">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
set>
aapt:attr>
target>
<target android:name="_R_G_L_0_G_G_0_D_0_P_0_G_0_T_0">
<aapt:attr name="android:animation">
<set android:ordering="together">
<objectAnimator
android:duration="1533"
android:pathData="M 0,0C 40.012,0 200.06,0 240.072,0"
android:propertyName="translateXY"
android:propertyXName="translateX"
android:propertyYName="translateY"
android:repeatCount="infinite"
android:repeatMode="restart"
android:startOffset="0">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
set>
aapt:attr>
target>
<target android:name="_R_G_L_0_G_G_0_D_0_P_1_G_0_T_0">
<aapt:attr name="android:animation">
<set android:ordering="together">
<objectAnimator
android:duration="1533"
android:pathData="M 0,0C 40.012,0 200.06,0 240.072,0"
android:propertyName="translateXY"
android:propertyXName="translateX"
android:propertyYName="translateY"
android:repeatCount="infinite"
android:repeatMode="restart"
android:startOffset="0">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
set>
aapt:attr>
target>
<target android:name="_R_G_L_0_G">
<aapt:attr name="android:animation">
<set android:ordering="together">
<objectAnimator
android:duration="767"
android:propertyName="scaleX"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:startOffset="0"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
<objectAnimator
android:duration="767"
android:propertyName="scaleY"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:startOffset="0"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType">
<aapt:attr name="android:interpolator">
<pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
aapt:attr>
objectAnimator>
set>
aapt:attr>
target>
<target android:name="time_group">
<aapt:attr name="android:animation">
<set android:ordering="together">
<objectAnimator
android:duration="1533"
android:propertyName="translateX"
android:repeatMode="restart"
android:repeatCount="infinite"
android:startOffset="0"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
set>
aapt:attr>
target>
animated-vector>
三、参考链接
- 矢量可绘制对象概览
- 添加多密度矢量图形