AnimatedVectorDrawable矢量图动画的使用和修改

Mr_Tony2023-08-02 10:46

文章目录

一、前言

矢量可绘制对象可以提供比较复杂的动画效果，只是绘制比较复杂，这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候，导出的矢量图里面没有改内容，所以需要开发自己添加，这里记录下添加的方式。

二、一个矢量图文件

以下是一个矢量图的内容。主要由两部分效果(位移和缩放)组成，这里需要设置为无限循环播放模式，需要在里面的属性动画里面添加以下代码

xml 复制代码 
  <!--翻转-->
  android:repeatMode="reverse"
   <!--从头开始-->
  android:repeatMode="restart"
  <!--播放次数，这里是无限，可以为具体值-->
  android:repeatCount="infinite"

在以下代码中需要注意的是，不仅要在位移和缩放上添加播放次数的代码，路径动画也要添加播放次数，例如。

这个路径指的是缩放的路径，两者的次数和重复方式需要保持一致，在具体文件中可以通过android:duration="767"来进行区分，路径和缩放或者位移的时间一定是一致的。

xml 复制代码 
<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>

完整的文件

xml 复制代码 
<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>

三、参考链接

  1. 矢量可绘制对象概览
  2. 添加多密度矢量图形
相关推荐
robotx22 分钟前
安卓线程相关
android
消失的旧时光-194343 分钟前
Android 面试高频：JSON 文件、大数据存储与断电安全（从原理到工程实践）
android·面试·json
dalancon2 小时前
VSYNC 信号流程分析 (Android 14)
android
dalancon2 小时前
VSYNC 信号完整流程2
android
dalancon2 小时前
SurfaceFlinger 上帧后 releaseBuffer 完整流程分析
android
用户69371750013843 小时前
不卷AI速度，我卷自己的从容——北京程序员手记
android·前端·人工智能
程序员Android3 小时前
Android 刷新一帧流程trace拆解
android
墨狂之逸才4 小时前
解决 Android/Gradle 编译报错：Comparison method violates its general contract!
android
阿明的小蝴蝶5 小时前
记一次Gradle环境的编译问题与解决
android·前端·gradle
汪海游龙5 小时前
开源项目 Trending AI 招募 Google Play 内测人员（12 名）
android·github
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06OpenClaw 使用和管理 MCP 完全指南07AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南08UV安装并设置国内源09OpenClaw Control UI安全上下文访问配置10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）