如何使用Jetpack Compose创建带渐变和多色的VectorDrawable？

这是一个分享知识的问答内容，灵感源自Stack Exchange上的相关问题，我们为VectorDrawable新增了渐变、填充/清空动画以及闪光效果，最终实现的效果如下：

第一个Drawable #

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="#EC407A"
      android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

时钟Drawable #

<vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="24dp"
  android:height="24dp"
  android:tint="?attr/colorControlNormal"
  android:viewportHeight="24"
  android:viewportWidth="24">
  <group
    android:name="button"
    android:translateX="12"
    android:translateY="12">
    <group
      android:name="button_pivot"
      android:translateX="-12"
      android:translateY="-12">
      <group
        android:name="right_button"
        android:translateX="19.0722"
        android:translateY="4.5758">
        <path
          android:name="path_1"
          android:fillAlpha="1"
          android:fillColor="@android:color/white"
          android:pathData="M 2.9409942627,1.16249084473 c 0,0 -4.59599304199,-3.85699462891 -4.59599304199,-3.85699462891 c 0,0 -1.2859954834,1.53300476074 -1.2859954834,1.53300476074 c 0,0 4.59599304199,3.85600280762 4.59599304199,3.85600280762 c 0,0 1.2859954834,-1.53201293945 1.2859954834,-1.53201293945 Z"/>
      </group>
      <group
        android:name="left_button"
        android:translateX="4.9262"
        android:translateY="4.5729">
        <path
          android:name="left_button_path"
          android:fillAlpha="1"
          android:fillColor="@android:color/white"
          android:pathData="M 2.9409942627,-1.16250610352 c 0,0 -1.2859954834,-1.53199768066 -1.2859954834,-1.53199768066 c 0,0 -4.59599304199,3.85600280762 -4.59599304199,3.85600280762 c 0,0 1.2859954834,1.53300476074 1.2859954834,1.53300476074 c 0,0 4.59599304199,-3.8570098877 4.59599304199,-3.8570098877 Z"/>
      </group>
    </group>
  </group>
  <group
    android:name="alarm"
    android:translateX="12"
    android:translateY="12">
    <group
      android:name="alarm_pivot"
      android:translateX="-12"
      android:translateY="-12">
      <group
        android:name="alarm_hands"
        android:translateX="13.75"
        android:translateY="12.4473">
        <path
          android:name="alarm_hands_path"
          android:fillAlpha="1"
          android:fillColor="@android:color/white"
          android:pathData="M -1.25,-4.42700195312 c 0,0 -1.5,0 -1.5,0 c 0,0 0,6.0 0,6.0 c 0,0 4.74699401855,2.85400390625 4.74699401855,2.85400390625 c 0,0 0.753005981445,-1.23199462891 0.753005981445,-1.23199462891 c 0,0 -4.0,-2.37200927734 -4.0,-2.37200927734 c 0,0 0,-5.25 0,-5.25 Z"/>
      </group>
      <group
        android:name="alarm_body"
        android:translateX="12"
        android:translateY="13.0203">
        <path
          android:name="alarm_outline_path"
          android:fillAlpha="1"
          android:fillColor="@android:color/white"
          android:pathData="M -0.0050048828125,-9 c -4.97399902344,0 -8.99499511719,4.0299987793 -8.99499511719,9 c 0,4.9700012207 4.02099609375,9 8.99499511719,9 c 4.97399902344,0 9.00500488281,-4.0299987793 9.00500488281,-9 c 0,-4.9700012207 -4.03100585938,-9 -9.00500488281,-9 Z M 0,7 c -3.86700439453,0 -7,-3.13400268555 -7,-7 c 0,-3.86599731445 3.13299560547,-7 7,-7 c 3.86700439453,0 7,3.13400268555 7,7 c 0,3.86599731445 -3.13299560547,7 -7,7 Z"/>
      </group>
    </group>
  </group>
</vector>

内容的提问来源于stack exchange，提问作者Thracian