android - AnimatedVectorDrawable 圆到线

Question

我想在Android中实现一个圆变成线的动画。

我看到这可以用 AnimatedVectorDrawable 实现我应该像这样使用 objectanimator 来进行路径转换:

<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 elliptical arc commands ，我认为诀窍是用一些圆弧/圆命令来实现一条线。

有没有办法做到这一点，使直线路径数据可以与圆具有相同的长度和相同的命令？

Answer 1

Iftah 的回答让我走上了正轨，这就是我的做法，它基本上是用两条三次贝塞尔曲线(一条用于上半圆，另一条用于下半)来近似一个圆。可以找到一个小的解释here .

代码方面，这是它的样子:

<?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>

动画效果很好，我只需要改进一些点即可自定义动画外观。