如何动画矢量绘图中图标的特定部分？

Question

上传到Vector Drawable Animation，我有Notification Active Vector Drawable中的图标。

通知图标矢量路径代码： -

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
android:width="140dp" 
android:height="140dp" 
android:viewportHeight="24.0" 
android:viewportWidth="24.0"> 
<path 
    android:fillColor="@color/dark_grey" 
    android:pathData="M7.58,4.08L6.15,2.65C3.75,4.48 2.17,7.3 2.03,10.5h2c0.15,-2.65 1.51,-4.97 3.55,-6.42zM19.97,10.5h2c-0.15,-3.2 -1.73,-6.02 -4.12,-7.85l-1.42,1.43c2.02,1.45 3.39,3.77 3.54,6.42zM18,11c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2v-5zM12,22c0.14,0 0.27,-0.01 0.4,-0.04 0.65,-0.14 1.18,-0.58 1.44,-1.18 0.1,-0.24 0.15,-0.5 0.15,-0.78h-4c0.01,1.1 0.9,2 2.01,2z" /> 

的图标会是这样

想动画外环线仅使用矢量绘制动画。可以引导我学习矢量绘制动画。

Answer 1

VectorDrawable路径使用与SVG paths相同的语法。按照这些说明，您可以看到路径首先跟踪左侧和右侧环部分，然后是身体和底部位。

为了使振铃器与人体分开制作，将其分成自己的路径。

<!-- The ringer --> 
<path 
    android:fillColor="@color/dark_grey" 
    android:pathData="M7.58,4.08L6.15,2.65C3.75,4.48 2.17,7.3 2.03,10.5h2c0.15,-2.65 1.51,-4.97 3.55,-6.42zM19.97,10.5h2c-0.15,-3.2 -1.73,-6.02 -4.12,-7.85l-1.42,1.43c2.02,1.45 3.39,3.77 3.54,6.42z" /> 
<!-- The body --> 
<path 
    android:fillColor="@color/dark_grey" 
    android:pathData="M18,11c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2v-5zM12,22c0.14,0 0.27,-0.01 0.4,-0.04 0.65,-0.14 1.18,-0.58 1.44,-1.18 0.1,-0.24 0.15,-0.5 0.15,-0.78h-4c0.01,1.1 0.9,2 2.01,2z" /> 

然后，我们需要给那个角色名称，以便动画师可以连接到它，如果你想制作动画的位置或旋转它包装在一个<group>。我用眼睛看着旋转的枢轴点。

<group android:name="ringer" android:pivotX="12" android:pivotY="10.5"> 
    <path 
     android:fillColor="@color/dark_grey" 
     android:pathData="M7.58,4.08L6.15,2.65C3.75,4.48 2.17,7.3 2.03,10.5h2c0.15,-2.65 1.51,-4.97 3.55,-6.42zM19.97,10.5h2c-0.15,-3.2 -1.73,-6.02 -4.12,-7.85l-1.42,1.43c2.02,1.45 3.39,3.77 3.54,6.42z" /> 
</group> 

现在您可以将它嵌入到AnimatedVectorDrawable中，并为该组附加动画。

<?xml version="1.0" encoding="utf-8"?> 
<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="140dp" 
      android:viewportWidth="24.0" android:viewportHeight="24.0"> 
      <group android:name="ringer" android:pivotX="12" android:pivotY="10.5"> 
       <path 
        android:fillColor="@color/dark_grey" 
        android:pathData="M7.58,4.08L6.15,2.65C3.75,4.48 2.17,7.3 2.03,10.5h2c0.15,-2.65 1.51,-4.97 3.55,-6.42zM19.97,10.5h2c-0.15,-3.2 -1.73,-6.02 -4.12,-7.85l-1.42,1.43c2.02,1.45 3.39,3.77 3.54,6.42z" /> 
      </group> 
      <path 
       android:fillColor="@color/dark_grey" 
       android:pathData="M18,11c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2v-5zM12,22c0.14,0 0.27,-0.01 0.4,-0.04 0.65,-0.14 1.18,-0.58 1.44,-1.18 0.1,-0.24 0.15,-0.5 0.15,-0.78h-4c0.01,1.1 0.9,2 2.01,2z" /> 
     </vector> 
    </aapt:attr> 
    <target android:name="ringer"> 
     <aapt:attr name="android:animation"> 
      <objectAnimator 
       android:duration="50" 
       android:propertyName="rotation" 
       android:valueFrom="-15" 
       android:valueTo="15" 
       android:repeatCount="infinite" 
       android:repeatMode="reverse"/> 
     </aapt:attr> 
    </target> 
</animated-vector> 

不要忘了在您要运行时在drawable上调用Animatable2#start()。