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"/>

また、ドキュメントから、パスを別のパスにモーフィングしたい場合、パスはモーフィングに対応している必要があります。より詳細には、パスはコマンドの長さと正確に同じ長さを持ち、各コマンドのパラメータの長さは正確に同じでなければなりません。

私はこれを読み始めました：SVG elliptical arc commands、トリックは、いくつかの円弧/円コマンドで線を実現することだと思います。

これを行う方法はありますか?ライン パス データは円と同じ長さと同じコマンドを持つことができますか?

4

2 に答える 2

3

Iftah's answer は私を良い軌道に乗せました。これが私がやった方法です。基本的には、2 つの 3 次ベジエ曲線 (上半分の円と下半分の円) で円を近似しています。簡単な説明はこちらにあります。

コード側、これがどのように見えるかです：

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

私はそれを試したことはありませんが、うまくいくかもしれない単純な「ハック」は、円を中心が遠く離れた非常に大きな半径を持つ円に変換することだと思います。クリップ領域に表示されている巨大な円の小さな部分は、直線のように見えます。

すなわち。半径 70 の中心 (300,70) から半径 10000 の中心 (300,10070) に円を変換できます。

それでもうまくいかない場合は、スプラインから円を作成してから、スプラインを直線に変更してみてください。このWeb サイトでは、スプラインから作成された 1/4 円が表示されます。

機能する可能性のある別のオプション - 形状の scaleY を 1 から 0 にアニメーション化すると、形状が水平線に平らになります。ベクトル アニメーションほどスムーズではありませんが、実装は非常に簡単です。アニメーションが完成したら、形状を水平線に置き換えることができます。

于 2015-03-05T11:59:53.730 に答える