如何创建Android动画矢量Drawable

Question

我有 https://lottiefiles.com/share/gordjiyb Lottie 文件，我想为其创建 Android 动画矢量绘图， 我们使用了 Fresco 库，将 Lottie 文件转换为 GIF 放在可绘制文件夹中，该文件夹占用 600 kb 空间。 我确信 Animated Vector Drawable 的空间会更充足。

Answer 1

你可以做下一步

1. 创建一个html文件

2. 导入assets文件夹中的文件
3. 在视图中添加webview组件

4. 在组件中加载文件

   包 com.example.myapplication

   导入 androidx.appcompat.app.AppCompatActivity 导入 android.os.Bundle 导入 android.webkit.WebView

   MainActivity 类：AppCompatActivity() { 覆盖 fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val webview = findViewById(R.id.webview) webview.loadUrl("文件:///android_asset/index.html")

   }
   

   }

Answer 2

在 res/animator 资源文件夹中创建一个动画（如果不存在则创建它），然后我们将其命名为

expand1

，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="scaleX"
            android:duration="1000"
            android:valueTo="0.5"
            android:interpolator="@android:anim/linear_interpolator"/>
        <objectAnimator
            android:propertyName="scaleY"
            android:duration="1000"
            android:valueTo="0.5"
            android:interpolator="@android:anim/linear_interpolator"/>
    </set>
    <set>
        <objectAnimator
            android:propertyName="scaleX"
            android:duration="1000"
            android:valueTo="1.5"
            android:interpolator="@android:anim/linear_interpolator"/>
        <objectAnimator
            android:propertyName="scaleY"
            android:duration="1000"
            android:valueTo="1.5"
            android:interpolator="@android:anim/linear_interpolator"/>
    </set>
</set>

这将创建一个对象动画师，该动画师将依次放大和缩小图标

然后再创建 3 个

expand2

expand3

expand4

根据你的圆圈的最小和最大尺寸，将每一个的scaleX和scaleY从0.5更改为1.5，0.7到1.3等

然后创建矢量绘图（ic_sound.xml），如下所示：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <group
        android:name="icon">
        <path
            android:fillColor="@android:color/white"
            android:pathData=" draw the microphone icon here "/>
    </group>
    <group
        android:name="circle1">
        <path
            android:fillColor="@android:color/holo_green_light"
            android:fillAlpha="0.2"
            android:pathData=" draw the darkest circle here "/>
    </group>

     repeat three more times for circle2, circle3 and circle4 with different fillAlphas
</vector>

最终创建一个矢量绘图，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_sound">
    <target
        android:name="circle1"
        android:animation="@animator/expand1" />
    <target
        android:name="circle2"
        android:animation="@animator/expand2" />
    <target
        android:name="circle3"
        android:animation="@animator/expand3" />
    <target
        android:name="circle4"
        android:animation="@animator/expand4" />
</animated-vector>

它的作用是告诉 ic_sound 向量，为每个组应用一个动画器，因此，circle1 将从 0.5 扩展到 1.5，circle 2 将从 0.7 扩展到 1.3，依此类推

您可以设置时间（如果您希望动画持续更长时间）播放多长时间，插值器（添加加速或减速效果）以使其看起来如您所愿

Answer 3

不必自己创建动画矢量绘图，而是使用 ShapeShifter。 您可以创建和修改动画矢量绘图的属性。

在下面的文章中，我详细描述了如何使用 Shapeshifter 创建动画矢量绘图。 https://medium.com/@duaaawan/how-to-create-animated-vector-drawable-for-android-apps-df100c09c0cf