web-dev-qa-db-ja.com

AnimatedVectorDrawableを作成するためのツール

私はAndroidに追加されたAnimatedVectorDrawable機能が本当に好きです。そのようなアニメーションを作成するための素晴らしいツールはありますか？

例えば。アニメーションを作成するためのツール ここで説明されているように ： enter image description here

編集：

これまでのところ、私はこれらのツールを見つけました（少し役立ちます）：

androidandroid-animationmaterial-designandroid-vectordrawable
18
Entreco

2つの素晴らしいサイトが見つかりました。 AndroidIconAnimator、これはAnimatedVectorDrawablesを作成するためのWebベースのツールです。また、Shapeshifterは、パスをモーフィングする方法を適切に制御します。

2017年7月9日更新

両方のツールが1つの非常に優れたソリューションに統合されました。使い方を理解するのに少し時間がかかりましたが、一度見たらとても有能なツールです

Shapeshifter.design

2 RomanNurikとAlexLockwoodに感謝します。

22
Entreco

この質問は古いです。私の答えは将来の読者を助けるかもしれません。

質問者が示すようなアニメーションを作成するのは非常に簡単です。私たち自身が、示されているようなアニメーションを作成できます。まず、VectorDrawableを作成します。以下の例：

my_Vector_drawable.xml

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:width="800dp"
        Android:height="800dp"
        Android:viewportWidth="800.0"
        Android:viewportHeight="800.0">

    <path
        Android:name="a_circle"
        Android:pathData="M  250   200
        q   -86     02    -140     57.5
        t   -57    135.5
        q   -03     93      67    156
        q    59     52     135     50
        q    71    -02     132    -54
        q    66    -56      66   -146
        q    00    -80     -45   -129
        q   -68    -72    -158    -70   "

        Android:strokeLineCap="round"
        Android:strokeColor="#f00f"
        Android:fillColor="#00000000"
        Android:trimPathEnd="0"
        Android:strokeWidth="32"/>



</vector>

my_animated_vector_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:aapt="http://schemas.Android.com/aapt"
    Android:drawable="@drawable/my_vector_drawable">

    <target
        Android:name="a_circle"
        Android:animation="@animator/my_animation"/>

</animated-vector>



my_animation.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set
        xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <objectAnimator
            Android:propertyName="trimPathEnd"
            Android:duration="1000"
            Android:valueFrom="0"
            Android:valueTo="1"
            Android:repeatCount="0"
            Android:repeatMode="restart"/>
    </set>

最初のファイルには画像データが含まれています。 3番目のファイルにはアニメーションデータが含まれています。 2番目のファイルは、最初のファイルと2番目のファイルをリンクします。

3つの空のファイルを作成できます。上記の内容をコピーしてファイルに貼り付けます。

最初の2つのファイルをドローアブルフォルダーに配置します。 「アニメーター」フォルダーに配置する3番目。これらのフォルダーは両方とも、resフォルダー内の場所を見つけます。

ImageViewを含むレイアウトファイルを作成できます。 AnimatedVectorDrawableファイルをドローアブルとして指定できます（Android：src = "my_animated_vector_drawable"）。

アクティビティで、コンテンツビューをレイアウトに設定します。また、ImageViewを膨らませます。

(myImage=((ImageView)findViewById(R.id.yourimageview name);
myImage.getDrawable.start():

次に、楽しみを見てください。 AnimatedVectorDrawableファイルには複数のターゲットを含めることができます。セットの下のアニメーションファイルに複数のObjectAnimatorsを含めることができます...

あなたの質問に示されているアニメーションはパスモーフィングです。パスモーフィングの例でさえ、ドキュメントには簡単です。実験はあなたにお任せします。

1
Vempati Satya Suryanarayana