AnimatedVectorDrawable圆对线

Question

我想要实现一个动画，把一个圆变成一条线，在Android中。

我看到这在AnimatedVectorDrawable中是可能的，我应该使用像这样的对象模拟器来进行路径转换：

<objectAnimator
     android:duration="3000"
     android:propertyName="pathData"
     android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
     android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
     android:valueType="pathType"/>

从文档中，如果要将一条路径变形为另一条路径，则路径必须与变形兼容。更详细地说，路径应该具有完全相同的命令长度，以及每个命令的完全相同的参数长度。

我已经开始读这个：SVG椭圆弧命令，我认为诀窍是用一些弧形/圆圈命令实现一行。

有办法做到这一点吗?这样，行路径数据就可以具有与圆圈相同的长度和相同的命令？

Answer 1

伊夫塔的回答让我走上了一个很好的轨道，我就是这样做的，它基本上是用两个三次Bézier曲线来逼近一个圆(一个是上半圆，另一个是下半圆)。一个小小的解释可以找到这里。

代码端，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="500dp"
    android:height="500dp"
    android:viewportWidth="500"
    android:viewportHeight="500">

<group>
    <path
        android:name="circle_line"
        android:fillColor="@android:color/black"
        android:strokeColor="@android:color/black"
        android:strokeWidth="5"
        android:pathData="@string/circle_data"/>
</group>

​

路径数据：

<!-- paths -->
<string name="circle_data">M 125 250 C 137.5 83.34 362.5 83.34 375 250 M 125 250 C 137.5 416.66 362.5 416.66 375 250</string>
<string name="line_data">M 50 250 C 125 250 125 250 250 250 M 250 250 C 375 250 375 250 450 250</string>

动画工作的很好，我只需要提炼一些点来定制动画的外观。

Answer 2

我从来没有试过，但我想一个简单的“黑客”，可能是把圆转换成一个半径很大的圆，在很远的地方中心。在剪辑区可见的大圆圈的小部分似乎是一条直线。

即。您可以将圆心(300, 70 )和半径70的中心(300,10070)转换为半径10000的中心(300,10070)。

如果失败，您可以尝试从样条建立一个圆，然后将样条转换成直线。这网站显示了一个由样条组成的四分之一圆。

另一个可以工作的选项-将形状的scaleY从1动画到0，这将把形状平平成一条水平线。它不像矢量动画那么流畅，但它的实现非常简单。动画完成后，可以用水平线替换形状。