アニメーションを操作します。 AnimatedVectorDrawableCompat

この記事では、AnimatedVectorDrawableCompat（カスタムボタン、ImageView、FloatingActionButtonなど）を使用してAndroidアプリケーションでアニメーションを実行する方法を実際に紹介します。







現在までに、この主題に関する情報はネットワーク内にあまりないか、まったく存在していません。 私が見つけたのは、提示された最近のGoogleのイノベーションだけでした。



Androidデベロッパーブログの記事

Google I / O 2016のビデオ

Androidリファレンス



これは基本的に、AnimatedVectorDrawableCompatを実行する方法を理解するには十分ではありません。



それでは、アプリケーションに直接進みましょう。



最初の段階では、フレームワークがアイコンを.pngに変えるという事実を取り除く必要があります。 バージョン23.3.0以降では、.xmlを使用できます。このためには、Gradleアプリレベルで次のフラグを追加する必要があります。

android { ... defaultConfig { ... vectorDrawables.useSupportLibrary = true } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、AppComaptの最新バージョンを依存関係に追加します。

 dependencies { ... compile 'com.android.support:appcompat-v7:23.4.0' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、この例では、四角（青）を使用します。この四角は、角をわずかに丸（赤）で覆います。

出口では、2つのオブジェクトを使用して、それぞれX（正方形）軸とY（円）軸に沿って連続的に移動させる必要があります。



手順：



1）



Drawable Resource Fileを作成し、ファイルにicon.xmlという名前を付けて、Drawableフォルダーに配置します。

 <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="circle" android:scaleX=".7" android:scaleY=".7" android:pivotX="12" android:pivotY="12"> <path android:fillColor="#ff0000 " android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/> </group> <group android:name="square" android:scaleX="1" android:scaleY="1" android:pivotX="12" android:pivotY="12"> <path android:fillColor="#FF0000ff" android:pathData="M6,6h12v12H6z"/> </group> </vector>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2）



プロジェクトにアニメーションを保存するために、アニメーターフォルダー-res / animatorを作成します。

その中に2つのオブジェクトを配置し、それに応じて名前を付けます。



a）circle.xml：

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:propertyName="translateX" android:valueType="floatType" android:valueFrom="0" android:valueTo="5" android:repeatMode="reverse" android:repeatCount="infinite" android:duration="250" /> </set>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

b）square.xml

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:propertyName="translateY" android:valueType="floatType" android:valueFrom="0" android:valueTo="5" android:repeatMode="reverse" android:repeatCount="infinite" android:duration="250" /> </set>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、オブジェクトがX軸とY軸に沿って移動し、移動の開始点から無限に移動することも示しました。



アニメーション化する必要のある名前付きグループがさらにある場合、このディレクトリにそれらを作成する必要があります。それに応じて、メインファイル-icon.xmlにより多くのグループがあります。



3）



アニメーションファイルを直接作成します。レイアウトまたはコードで参照します-res / drawable / anim_icon：

 <?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/icon"> <target android:name="square" android:animation="@animator/square" /> <target android:name="circle" android:animation="@animator/circle" /> </animated-vector>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：Android Studioはアニメーション化されたベクトルに赤で下線を引きます（プロジェクトのmin.versionが21未満の場合）が、最初に示したようにフラグを接続した場合、すべてが機能します。



4）



これで、xmlのアニメーション化されたベクターにアクセスできます。 可能性があります-ImageView、ImageButton、FloatingActinonButton：

 <LinearLayout ... xmlns:app="http://schemas.android.com/apk/res-auto"/> <ImageView app:srcCompat="@drawable/anim_icon" ... /> </LinearLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5）



ベクトルからコードに変わります。 ここでも、OnClickListenerをハングさせ、フリップ中に状態を保存しました。

 static final String STATE_ANIM = "isAnim"; boolean mIsAnim; AnimatedVectorDrawableCompat avd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView imageView = (ImageView) findViewById(R.id.imageView); if (imageView != null) { Drawable drawable = imageView.getDrawable(); avd = (AnimatedVectorDrawableCompat) drawable; if (savedInstanceState != null) { mIsAnim = savedInstanceState.getBoolean(STATE_ANIM); if (mIsAnim) { avd.start(); } } imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (avd.isRunning()) { avd.stop(); mIsAnim = false; } avd.start(); mIsAnim = true; } }); } } @Override public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putBoolean(STATE_ANIM, mIsAnim); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：依存関係を強化することを忘れないでください：

 import android.support.graphics.drawable.AnimatedVectorDrawableCompat;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行われた作業の結果：







PS



最近、ファイルmy_vector.xmlとanim_vectorを1つのanim_vectorに結合することが可能になりました（現在、個別のres / drawable / my_vector.xmlファイルは必要ありません）。また、ここにアニメーション全体（objectAnimator）を追加して、アニメーション全体の1つのファイルを取得します。



I / OでGoogleに紹介しましたが、残念ながら機能しません。 それについて話している14分からのビデオ 。