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. 添加多密度矢量图形
相关推荐
鸟儿不吃草33 分钟前
安卓实现左右布局聊天界面
android·开发语言·python
xxjj998a2 小时前
Laravel 1.x：PHP框架的原始魅力
android·php·laravel
formula100002 小时前
在iOS/安卓上远程连接任何 Agent！Claude、Codex、Copilot、Gemini、OpenCode 等
android·copilot
该用户可能存在2 小时前
Blbl-android 更新至 v0.1.24，体验更流畅、更稳定
android·哔哩哔哩·电视app·androidtv·bbll·blbl·bilibilitv
lKWO OMET3 小时前
mysql之字符串函数
android·数据库·mysql
liang_jy13 小时前
Android SparseArray
android·源码
liang_jy14 小时前
Activity 启动流程扩展篇（一）—— startActivityInner 任务决策全解析
android·源码
NPE~15 小时前
[App逆向]脱壳实战
android·教程·逆向·android逆向·逆向分析
木易 士心15 小时前
别再只会用 drawCircle 了！一文搞懂 Android Canvas 底层机制
android
AtOR CUES16 小时前
MySQL——表操作及查询
android·mysql·adb
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05Codex 接入 DeepSeek API 完整配置文档062026年AI前瞻：量子AI、具身智能与科学发现的新纪元07零基础教你claude code 接入 deepseek V408在Windows 11上安装Docker的踩坑记录09实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲102026年4月AI大事件深度解读：大模型竞争进入“深水区“