AVDとは何ですか?

Android Lollipop 5.0 API 21以降、このクラスとその下位互換性のあるクラスの導入により、AnimatedVectorDrawableXML を使用して Android エコシステムでアニメーションを定義する新しい強力な方法がもたらされました。これらのコンポーネントは 1 つのファイルで定義することも、公式ドキュメント.xmlに従って 3 つの異なるファイルで定義することもできます。

Android Nougat 7.1 API 25の直後に、Android はこれらのアニメーションをメイン スレッドの外で実行できるようにすることで、この機能をさらに強力にし、代わりにレンダリング スレッドで実行できるようにしました。これにより、UI スレッドはアプリケーションのメイン UI コンポーネントにしっかりと集中し、アニメーションに時間を費やすことがなくなります。

この記事では、 のクラスをAnimatedVectorDrawableさらに詳しく調べ、アニメーション アイコンを簡単に統合するために、Android アプリケーション内でこの強力なクラスのインスタンスを作成および使用する方法を説明します。

シェイプシフターアプリ

Shape Shifter Web アプリケーションは、Alex Lockwoodによって作成されたプロジェクトで、Android、iOS、Web 用のアニメーション アイコンの作成を支援します。Shape Shifter アプリは、同じ著者によるこの記事で確立されたアイコン アニメーション技術を使用しています。

このツールを利用すると、Android 開発者は、ツールから XML 形式で Android プロジェクトに直接エクスポートできる、滑らかなアニメーションのアイコンを作成できますAnimatedVectorDrawable。

AVD の作成

先に進む前に、Shape Shifter を使用して単純なアニメーション アイコン XML を作成する方法の例を見てみましょう。この XML は、次のセクションで Android プロジェクト内で使用します。

まず、アプリにインポートする SVG アイコン アセットを選択します。この例では、左向きの二重矢印を使用してアニメーション化します。

pathファイルがアプリにインポートされるとすぐに、左下のパネル内のさまざまな の右側にあるストップウォッチ ボタンをクリックし、適用するアニメーションの種類を選択することで、アニメーションの追加を開始できます。次に、パスの継続時間バーをドラッグ アンド ドロップすることで、アニメーションの継続時間を編集できます。

いくつかのアニメーションを追加した後、中央の大きな再生ボタンで [PLAY] をクリックすると、アニメーション アイコンの現在のフローが表示されます。

作成した合成アニメーションに満足したら、最終作品を Shape Shifter から AVD ファイルにエクスポートするのは非常に簡単です。左下隅にある[エクスポート]ボタンをクリックし、その後[アニメーション ベクトル ドローアブル]をクリックして続行します。

このプロセスでは、Android プロジェクトに直接インポートできるファイルがダウンロードされ、これはまたはオブジェクト.xmlとして使用できます。これについては次のセクションで詳しく説明します。AnimatedVectorDrawableAnimatedVectorDrawableCompat

AVD の使用方法

前のセクションの XML ファイルから始めて、そのファイルをフォルダーに追加することで、そのファイルをプロジェクトに取り込むことができますres/drawable。これは、ドラッグ アンド ドロップを使用するか、IDE のメニューを通じて実行できます。

XML ファイルが Android プロジェクトにアップロードされたら、IDE でファイルを開くと、新しく追加されたアニメーション アイコンの対話可能なプレビューが表示されます。アニメーションをトリガーするには、プレビュー パネルの下部にある [再生] ボタンをクリックするだけです。

アニメーション化されたアイコンを実際に使用する準備ができたら、通常の画像アセットの場合と同じ方法で、アイコンsrcを の値として設定するだけです。これはベクター ドローアブルであるため、 & を任意の値にImageView設定でき、多くの制約なしにアセット自体のサイズを変更できるはずであることに注意してください。widthheight

AnimatedVectorDrawable最後に、アニメーションを開始するには、 の形のアニメーション アイコンをトリガーする必要があります。これを行うには、.start()必要に応じてドローアブル インスタンスを呼び出すだけです。

以上です！必ず上記の関数からコードを呼び出して、アニメーション化されたアイコンが動作していることを確認してください。

結果論

全体として、 を使用すると、AnimatedVectorDrawableアプリケーションにフレアをもたらすことができます。私が使用しているアセットをチェックして、お使いのマシンで動作するコード例を確認したい場合は、この記事用に作成したサンプル プロジェクトを確認してください。

さらに、Shape Shifter アプリケーションを使用すると、高価なデザイン ツールを起動するという大掛かりな要件を必要とせずに、アニメーション化されたアイコンを作成する簡単な方法が開発者に提供されます。ベクター アイコンのアニメーション化について詳しく知りたい場合は、Alex がこのトピックについて詳しく説明している記事を参照してください。あるいは、この記事では説明しなかった新機能とまったく新しい可能性の世界を備えたShape Shifter ベータ版をチェックしてください。

リソースと詳細情報

• https://developer.android.com/develop/ui/views/animations/drawable-animation#AnimVector
• https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable
• https:///mobile-app-development-publication/create-your-own-animated-vector-drawable-on-android-app-3f8fa9bb08c3
• https:///techshots/vector-drawable-animation-e553790c8be4
• https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html
• https://www.youtube.com/watch?v=TfiZmzqAMgA&ab_channel=MyHexaville