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. 添加多密度矢量图形
相关推荐
赏金术士31 分钟前
第六章：UI组件与Material3主题
android·ui·kotlin·compose
TechMerger2 小时前
Android 17 重磅重构！服役 20 年的 MessageQueue 迎来无锁改造，卡顿大幅优化！
android·性能优化
yuhuofei20214 小时前
【Python入门】Python中字符串相关拓展
android·java·python
dalancon5 小时前
Android Input Spy Window
android
dalancon6 小时前
InputDispatcher派发事件，查找目标窗口
android
我命由我123456 小时前
Android Framework P3 - MediaServer 进程、认识 ServiceManager 进程
android·c语言·开发语言·c++·visualstudio·visual studio·android runtime
天才少年曾牛7 小时前
Android14 新增系统服务后，应用调用出现 “hidden api” 警告的原因与解决方案
android·frameworks
赏金术士7 小时前
Jetpack Compose 底部导航实战教程（完整版）
android·kotlin·compose
随遇丿而安8 小时前
第5周：XML 资源、样式和主题，真正解决的是“页面以后还改不改得动”
android
zh_xuan8 小时前
Android 获取系统内存页大小：sysconf(_SC_PAGESIZE) 与 JNI 实现
android·jni·ndk·内存页大小
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05CC-Switch & Claude 基于 Linux 服务器安装使用指南06【AI】2026 年具身智能模型和世界模型总结07几个好用的ip纯净度检测网站08codex app每次打开重连5次Reconnecting问题解决09装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？10CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）