矢量绘图中的微光动画

Question

我一直在尝试使用可绘制动画矢量为图标实现微光动画。我正在寻找的效果与此类似-

我已经使用 FaceBook shimmer library 来获得这种效果，尽管这正是我所需要的，但我想使用矢量动画来获得它，因为包含它没有意义一个专门用于这个动画的库。谁能给我任何关于如何做到这一点的提示或起点。

我对Shape Shifter相当满意，但我还没有实现这个动画

谢谢！

Answer 1

我终于找到了解决办法！诀窍是在顶部有一个剪切路径，在底部有一个可绘制的实际路径。我在下面包含了对动画可绘制对象的 XML 引用。动画看起来有点粗制滥造，但这总是可以改进的。多亏了 Shape Shifter，我才做到了这一点。

<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:name="vector"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <clip-path
                android:name="heart"
                android:pathData="M 7 3 C 5.465 3 3.922 3.5 2.75 4.7 C 0.407 7.1 0.471 10.8 2.75 13.2 L 12 23 L 21.25 13.2 C 23.529 10.8 23.593 7.1 21.25 4.7 C 18.907 2.4 15.093 2.4 12.75 4.7 L 12 5.5 L 11.25 4.7 C 10.078 3.5 8.536 3 7 3 Z"/>
            <path
                android:name="path"
                android:pathData="M 7 3 C 5.465 3 3.922 3.5 2.75 4.7 C 0.407 7.1 0.471 10.8 2.75 13.2 L 12 23 L 21.25 13.2 C 23.529 10.8 23.593 7.1 21.25 4.7 C 18.907 2.4 15.093 2.4 12.75 4.7 L 12 5.5 L 11.25 4.7 C 10.078 3.5 8.536 3 7 3 Z"
                android:fillColor="#ff0000"/>
            <group android:name="group">
                <path
                    android:name="shimmer"
                    android:pathData="M 4 0 L 24 19 L 22 22 L 0 3 Z">
                    <aapt:attr name="android:fillColor">
                        <gradient
                            android:endColor="#FFC500"
                            android:endX="24"
                            android:endY="24"
                            android:startColor="#ED613A"
                            android:startX="0"
                            android:startY="0"
                            android:type="linear" />
                    </aapt:attr>
                </path>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="translateX"
                    android:duration="700"
                    android:valueFrom="10"
                    android:valueTo="-10"
                    android:valueType="floatType"
                    android:interpolator="@android:anim/linear_interpolator"/>
                <objectAnimator
                    android:propertyName="translateY"
                    android:duration="700"
                    android:valueFrom="-10"
                    android:valueTo="10"
                    android:valueType="floatType"
                    android:interpolator="@android:anim/linear_interpolator"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

矢量绘图中的微光动画

Shimmer animation in vector drawable

animation

android

vector

drawable

shimmer