矢量动画中的闪烁动画

Question

我一直在尝试使用动画矢量可绘制来实现图标的闪烁动画。我想要的效果类似于这个-

我已经使用了 FaceBook 晃动库 来获得这个效果，虽然它确实满足我的需求，但是我想使用矢量动画来实现，因为只为了这个动画而包含一个库没有太多意义。有人能给我一些提示或起点吗？

我对 Shape Shifter 比较熟悉，但还没有能够实现这种动画。

谢谢！

- Anirudh

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>

- Anirudh