如何为 Vector Drawable 中图标的特定部分设置动画？

Question

我是 Vector Drawable 动画的新手，因为我在 Vector Drawable 中有 Notification Active 图标。

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

<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" />

图标会变成这样

只想使用矢量可绘制动画为外环设置动画。谁能指导我学习 Vector Drawable 动画。

Answer 1

VectorDrawable paths use the same syntax as 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>

不要忘记在需要运行时在可绘制对象上调用 Animatable2#start()。

如何为 Vector Drawable 中图标的特定部分设置动画？

How to animate the Particular Part of the Icon in Vector Drawable?

android

android-animation

android-vectordrawable