2

我想在 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"/>

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

我已经开始阅读：SVG 椭圆弧命令，我认为诀窍是用一些弧/圆命令实现一条线。

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

4

2 回答 2

3

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

代码方面，它的外观如下：

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

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

于 2015-03-08T15:07:22.050 回答
1

我从来没有尝试过，但我想一个简单的“hack”可能会起作用，就是将圆转换成一个半径很大的圆，中心距离很远。在剪辑区域中可见的大圆圈的一小部分似乎是一条直线。

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

如果失败，您可以尝试从样条线构建一个圆，然后将样条线更改为直线。该网站显示了由样条线制成的四分之一圆。

另一个可能有效的选项 - 将形状的 scaleY 从 1 设置为 0，这会将形状展平为水平线。它不像矢量动画那么流畅，但实现起来非常简单。动画完成后，您可以用水平线替换形状。

于 2015-03-05T11:59:53.730 回答