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

已于 2023-08-30 16:25:50 修改
阅读量1.3k 收藏
点赞数
分类专栏： Android 文章标签： android
于 2023-08-01 15:19:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Tony/article/details/132042705
版权

文章目录

一、前言

矢量可绘制对象可以提供比较复杂的动画效果，只是绘制比较复杂，这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候，导出的矢量图里面没有改内容，所以需要开发自己添加，这里记录下添加的方式。
需要注意的是：
1、导出的文件如果涉及重复播放的动画时候，该重复效果不可以由UI控制，重复播放方式需要由客户端修改，否则的话导出文件无法播放或者有其它问题
2、重复播放的动画不可以有停顿之后再播放的效果，所有效果时间时间保持一致且有规律

二、一个矢量图文件

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

  <!--翻转-->
  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>

三、参考链接

  1. 矢量可绘制对象概览
  2. 添加多密度矢量图形
  3. VectorDrawable
  4. Android自定义控件开发入门与实战（7）SVG动画，android底层架构
Mr_Tony
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AnimatedVectorDrawable的简单使用
朱玉强的博客
03-18 3130
本篇是关于Drawable的第十四篇博客，也是drawable的最后一篇博客了，虽然还有几个drawable，但是已经不打算继续写下去了。下一个系列将是Android动画方面的内容，希望大家可以关注一下。AnimatedVectorDrawable的使用需要配合动画和VectorDrawable使用，算是几个Drawable中最复杂的一个了，但是可以实现很酷的动画，在这里演示的动画当然很low噢
ym—— Android 5.0学习之AnimatedVectorDrawable
热门推荐
陈宇明
12-02 1万+
前言
使用AnimatedVectorDrawable为按键icon改变添加动画
Gyso的博客
05-11 585
文章目录简介定义步骤总结 简介 AnimatedVectorDrawable（矢量可绘制对象）是一种无需像素化或进行模糊处理即可缩放的可绘制对象。借助AnimatedVectorDrawable类以及用于实现向后兼容的AnimatedVectorDrawableCompat，可以为矢量可绘制对象的属性添加动画效果，例如旋转或更改路径数据以将其变为其他图片。可以与帧动画 AnimationDrawable划为一类，动画可绘制图像。 项目地址：https://gitee.com/guaishoun/animat
android属性动画 郭林,AnimatedVectorDrawable总结 · 瘟疫青年
weixin_35645701的博客
05-29 384
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？在更新Android N之后 会注意到状态栏上的快捷方式有了新的变化 当我们点击的时候，从开启到关闭状态，会有一个顺滑自然的过渡动画，在学习完AnimatinVectorDrawable的api用法之后，你就会知道该怎么实现这些类似的效果了。Vector在开始之前，想先说明一下安卓中的矢量图标文件Vector，我们经常会...
Android SVG使用之AnimatedVectorDrawable
郭霖
06-13 1045
今日科技快讯 近日有统计机构在北京公布：2016届中国大学毕业生在毕业半年后的就业率为91.6%，这些毕业生平均月收入达到3988元。本科专业中，列在“高薪榜”前五位的专业分别是信息安全(5906元)，软件工程(5869元)，网络工程(5600元
VectorDrawable与AnimatedVectorDrawable
L25000的专栏
11-12 1765
public class VectorDrawable                                    Added in API level 21 extends Drawable java.lang.Object    ↳ android.graphics.drawable.Drawable
AnimatedVectorDrawable.
10-31
AnimatedVectorDrawable，资源对应博客：http://blog.csdn.net/bbld_/article/details/40633327.
anim-icons:使用 AnimatedVectorDrawable 实现的动画图标
06-08
AnimatedVectorDrawable是Android提供的一种用于创建和展示矢量图形动画的方法，它允许开发者在不增加应用体积的情况下，实现丰富的动画效果。本文将深入探讨如何利用AnimatedVectorDrawable来创建动画图标，并通过...
AnimationArt:安卓5.0+高级动画开发，矢量图动画、轨迹动画、路径变换
05-10
Android提供了VectorDrawable和AnimatedVectorDrawable类来支持矢量图动画。通过XML文件定义矢量图形及其属性，然后在代码中或XML布局文件中启动动画，可以实现图形的平移、旋转、缩放等多种动态效果。 二、轨迹...
Android SVG动画animated-vector使用Demo
08-23
使用查看http://blog.csdn.net/u011106915/article/details/77502856
Android代码-利用 AnimatedVectorDrawable 实现会动的 emoji。
08-06
Live emojis Animating Google emojis with Android animated vector drawables. All credits to noto-emoji for the original emoji. Can't see your favourite emoji? Find the svg there and play with it. Then submit a PR, I'll be happy to review it! Or just post an issue with your idea. The more the merrier! Contributors romainpiel chiuki sjthn License Copyright 2016 Romain Piel Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the
animated-vector-drawable-28.0.0.zip
04-23
矢量图动画的jar包 1、文件占用空间小，且矢量图形文件与分辨率和图像大小无关，只与图像的复杂程度有关，图像文件所占的存储空间较小。 2、图像放大不失真，.即矢量图可以无级缩放，对图形进行缩放，旋转或变形操作时，图形不会产生锯齿效果。
安卓SVG矢量动画DEMO--vectalign-samples--SVG和VectorDrawable
08-19
本DEMO——"安卓SVG矢量动画DEMO--vectalign-samples--SVG和VectorDrawable"主要展示了如何在Android应用中使用SVG和VectorDrawable进行矢量动画的实现。 SVG是一种基于XML的二维图形语言，它可以描述线条、形状、...
SvGDemo矢量图形案例集合
06-28
5. **优化性能**: 使用SVG可能导致内存占用和绘制性能问题，因此需要合理管理资源，避免在不必要的地方加载大图，或者在运行时动态加载和释放。 6. **图层和组**: SVG允许将多个图形组合成组，这在Android中可以...
Android-与矢量一起使用的RoundImageView
08-13
4. 初始化和使用：在代码中，你可以通过`setImageResource()`方法来设置`RoundImageView`的矢量图形源。 综上所述，`RoundImageView`结合矢量图形提供了一种优雅的方式来创建圆形的UI元素，同时保持了在不同设备上...
Android遗漏的动画-矢量动画AnimatedVectorDrawable(上)
chrislanbo的专栏
08-03 457
Android动画-矢量动画AnimatedVectorDrawable
Android AnimatedVectorDrawable
从零开始的教程世界
07-09 504
In this tutorial, we’ll be discussing AnimatedVectorDrawable and implementing it in various ways in our android application. Having an idea of VectorDrawables would make the below article easier to un...
AnimatedVectorDrawable的一些碎碎念
gitzzp的博客
02-21 2869
关于Vector及AnimatedVectorDrawable的一些基本知识，请参见徐医生的Android Vector曲折的兼容之路 ，写的很全，很棒。读完上文之后，我们对静态的vector和动态的AnimatedVectorDrawable有了一定的了解，并做了一些小的尝试，本文里边主要说的是一些兼容性的问题及解决方案。从AppCompat23.2开始，Google开始支持在低版本上使用Vect
android svg动画
最新发布
05-19
在 Android 中使用 SVG 动画可以通过两种方式实现：通过 AnimatedVectorDrawable 或使用 SVG 库和动画框架。 1. AnimatedVectorDrawable AnimatedVectorDrawable 是 Android 中的矢量图动画库。它允许开发者创建逐帧动画和基于属性的动画，通过 XML 文件定义，可以很容易地在应用程序中使用。 步骤如下： 1）创建一个 SVG 文件，将其放置在 res/drawable 目录下。 2）在 res/drawable 目录下创建一个 XML 文件，用于定义 AnimatedVectorDrawable。 3）为 AnimatedVectorDrawable 创建一个属性动画。 4）在代码中使用 AnimatedVectorDrawable 和属性动画。 2. 使用 SVG 库和动画框架 使用 SVG 库和动画框架可以更加灵活地控制 SVG 动画。这种方法需要使用第三方库，如 AndroidSVG 和 Lottie。 步骤如下： 1）在项目中添加 AndroidSVG 或 Lottie 库。 2）使用 SVG 库或 Lottie 库创建 SVG 动画。 3）在代码中使用 SVG 动画。 这两种方法都可以实现 SVG 动画，具体选择哪一种取决于开发者的需求和技术水平。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值