Android：将SVG形状动画转换为原生Android形状动画

问题：我有一个简单的SVG动画，我真的很喜欢。我想在我的Android应用程序中使用它。我们都知道，如果没有第三方库，Android和SVG就不能很好地协同工作。即使这样，库也不支持动画。解决这个问题的一种方法是使用WebView。WebView可以做SVG，而且做得很好。但是那样做动画感觉有点不舒服

所有这些都假定我想要使用SVG。事实上我没有。理想情况下，我想使用Android的原生XML可绘制/动画来定义这个东西。我确信这在代码中是一件非常简单的事情，但理想情况下，它可以在没有代码的情况下完成。而且它不必是完美的1:1转换

让我们从SVG开始：

<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd" stroke-width="2">
    <circle cx="22" cy="22" r="1">
        <animate attributeName="r"
            begin="0s" dur="1.8s"
            values="1; 20"
            calcMode="spline"
            keyTimes="0; 1"
            keySplines="0.165, 0.84, 0.44, 1"
            repeatCount="indefinite" />
        <animate attributeName="stroke-opacity"
            begin="0s" dur="1.8s"
            values="1; 0"
            calcMode="spline"
            keyTimes="0; 1"
            keySplines="0.3, 0.61, 0.355, 1"
            repeatCount="indefinite" />
    </circle>
    <circle cx="22" cy="22" r="1">
        <animate attributeName="r"
            begin="-0.9s" dur="1.8s"
            values="1; 20"
            calcMode="spline"
            keyTimes="0; 1"
            keySplines="0.165, 0.84, 0.44, 1"
            repeatCount="indefinite" />
        <animate attributeName="stroke-opacity"
            begin="-0.9s" dur="1.8s"
            values="1; 0"
            calcMode="spline"
            keyTimes="0; 1"
            keySplines="0.3, 0.61, 0.355, 1"
            repeatCount="indefinite" />
    </circle>
</g>

据我所知，所有这些基本上只定义了两个圆。每个圆动画持续1.8秒，第二个圆在第一个圆完成动画前900毫秒开始。两个圆都以非线性方式运动——我称之为加速/减速插值器。最后一部分我可能错了

总之，定义形状和动画的XML非常简单：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="oval">

        <solid
            android:color="@android:color/transparent" />

        <stroke
            android:width="1dp"
            android:color="@android:color/white" />

    </shape>
</item>

或者：

<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="1800"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
 android:shareInterpolator="true">

<set>
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"

        android:repeatCount="infinite"
        android:repeatMode="restart"/>

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="4"
        android:toYScale="4"
        android:pivotX="50%"
        android:pivotY="50%"

        android:repeatCount="infinite"
        android:repeatMode="restart"/>

</set>

或者这个：

<set>

    <objectAnimator
        android:propertyName="scaleX"
        android:duration="1800"
        android:repeatCount="1000"
        android:repeatMode="restart"
        android:valueFrom="1"
        android:valueTo="4"/>

    <objectAnimator
        android:propertyName="scaleY"
        android:duration="1800"
        android:repeatCount="1000"
        android:repeatMode="restart"
        android:valueFrom="1"
        android:valueTo="4"/>
</set>

<objectAnimator
    android:propertyName="alpha"
    android:duration="1800"
    android:repeatCount="1000"
    android:repeatMode="restart"
    android:valueFrom="1f"
    android:valueTo="0f" />

还和我在一起吗？我不明白的是，为什么我会在这里，开始第二个动画。我尝试将两个ImageView层叠在一起，并将它们设置为相隔900毫秒的动画。这几乎把我带到了那里。但不完全如此

所以我的问题是：

• 我们能否以不完全连续的方式开始两个动画？意思是，我们可以在第一个动画结束前900毫秒开始动画吗

• 我们能在不放大的情况下扩大圆吗？SVG不会更改笔划图像的大小。缩放一个可绘制的对象。这并不重要，但我想我会问的

• 我错过这里的船了吗？有更好的方法吗

谢谢你抽出时间