棚の上のAndroidのアニメーション（パート1.基本アニメーション）

みなさんこんにちは！



今日は、Androidのアニメーションについて少しお話したいと思います。 誰にとっても明らかな事実は、アニメーションがアプリケーションを装飾できるということです。 しかし、私は彼らがもっともっとできると信じています。 まず、優れたアニメーションは、控えめなグラフィックでも、アプリケーションをまったく新しいレベルに引き上げることができます。 2つ目は、ユーザーと通信するための追加のツールです。これにより、注意を集中したり、アプリケーションの仕組みを提案したりできます。しかし、これは別の大きなトピックです。



今日は、アニメーションを作成するためのツールについて説明します。 残念ながら、Androidには何かをアニメートする方法がたくさんあり、最初は混乱するのが非常に簡単です。 最も一般的な分類を提供し、ドキュメントへのリンクのみを残すようにします。 チュートリアルはたくさんあります。 この記事が私の頭の中の棚にすべてを置き、必要に応じてアニメーションを作成し、最も適切な方法を選択するのに役立つことを願っています。



パート1.基本的なアニメーション

パート2.複雑なアニメーション

パート3.「低レベル」アニメーション

パート4.遷移アニメーション

パート5.アニメーションを操作するためのライブラリ

パート1.基本的なアニメーション

1.フレームごと

世界で最初のアニメーションがそのように作成されたと思いますが、この機能はまだAndroidで利用できます。



必要なのは、各フレームへのリンクを含むxmlを作成することだけです。

<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:drawable="@drawable/explosion_1" android:duration="15" /> <item android:drawable="@drawable/explosion_2" android:duration="15" /> <item android:drawable="@drawable/explosion_3" android:duration="15" /> ... </animation-list>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アニメーションを開始します（以下、すべての例はKotlinで提供されます）。

 val animation = image.drawable as AnimationDrawable animation.start()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

•アプリケーション：



複雑なアニメーショングラフィックス。サイズは小さく、外部エディターで準備されています。



•利点：



複雑なエフェクトを実現する機能



•欠点：



高いリソース消費。その結果、OutOfMemoryを取得する機能を備えたアプリケーションへの非常に高価なインポート。 何らかの理由で多数のフレームを表示する必要がある場合、メモリに画像を徐々にロードして実装を作成する必要があります。 しかし、そうしなければならない場合、おそらくビデオに頼る方が簡単でしょうか？

2.オブジェクトのプロパティのアニメーション（別名プロパティアニメーター）

数ピクセルを横に移動するか、透明度を変更して互いに非常に類似した100万フレームを生成する必要がない場合、Animatorが助けになります。 実際、これを使用すると、オブジェクトのプロパティをアニメーション化できます。



基本抽象クラスはアニメーターと呼ばれ、いくつかの子孫があります。これは私たちにとって重要です。



ValueAnimator-任意のプロパティをアニメーション化できます

ObjectAnimator-ValueAnimatorを継承し、Viewプロパティをアニメーション化するためのシンプルなインターフェイスを備えています。

ViewPropertyAnimator-ビューをアニメーション化するための別の便利なインターフェイスを提供します。 Animatorから継承されず、View :: animate（）メソッドで使用されます



上記のアニメーションは、コードのように記述できます。

 val animationX = ObjectAnimator.ofFloat(card, "scaleX", 1F) val animationY = ObjectAnimator.ofFloat(card, "scaleY", 1F) val set = AnimatorSet() set.play(animationX) .with(animationY) set.duration = DURATION set.interpolator = DecelerateInterpolator() set.start()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

XMLで（ animator/open_animator.xml



）：

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together"> <objectAnimator android:duration="250" android:propertyName="scaleX" android:valueTo="1" android:valueType="floatType" android:interpolator="@android:anim/decelerate_interpolator"/> <objectAnimator android:duration="250" android:propertyName="scaleY" android:valueTo="1" android:valueType="floatType" android:interpolator="@android:anim/decelerate_interpolator"/> </set>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 val set = AnimatorInflater.loadAnimator(context, R.animator.open_animator) as AnimatorSet set.setTarget(card) set.start()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビューステート間の遷移のアニメーションを記述することもできます。これにより、任意のビューのステート間のアニメーション化された遷移を簡単に作成できます。 ビューステートが変更されると、XMLで記述されたアニメーションが自動的に開始されます。

animator/state_animator.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true"> <set android:ordering="together"> <objectAnimator android:duration="250" android:interpolator="@android:anim/decelerate_interpolator" android:propertyName="scaleX" android:valueTo="1" android:valueType="floatType"/> <objectAnimator android:duration="250" android:interpolator="@android:anim/decelerate_interpolator" android:propertyName="scaleY" android:valueTo="1" android:valueType="floatType"/> </set> </item> <item android:state_enabled="false"> <set android:ordering="together"> <objectAnimator android:duration="250" android:interpolator="@android:anim/accelerate_interpolator" android:propertyName="scaleX" android:valueTo="0" android:valueType="floatType"/> <objectAnimator android:duration="250" android:interpolator="@android:anim/accelerate_interpolator" android:propertyName="scaleY" android:valueTo="0" android:valueType="floatType"/> </set> </item> </selector>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <View ... android:stateListAnimator="@animator/state_animator"> </View>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

•アプリケーション：



Viewオブジェクトとそのパラメーターのアニメーション

その他のパラメーターのアニメーション



•利点：



絶対に普遍的



•欠点：



ある程度リソースを消費します。

3.ビューアニメーション（別名ビューアニメーション）

Animatorの前は、Androidにはアニメーションしかありませんでした。 主な欠点は、ビューのビューのみをアニメーション化し、実際にそのプロパティを変更しなかったことです。 したがって、要素の動きをアニメーション化する場合は、アニメーションの最後に、そのプロパティも変更する必要があります。 多少複雑なアニメーションが必要な場合や、アニメーション時にクリックをキャッチする必要がある場合、何らかの方法でこのアプローチはあまり便利ではありません。



アニメーションはコードのように実行できます：

 val anim = ScaleAnimation(0F, 1F, 0F, 1F, 0F, card.measuredHeight.toFloat()) anim.duration = DURATION anim.interpolator = DecelerateInterpolator() anim.fillAfter = true card.startAnimation(anim)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

XMLと同様（構文はAnimatorのxmlとは異なることに注意してください）：

anim/open_animation.xml

 <?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="250" android:fillAfter="true" android:fromXScale="0" android:fromYScale="0" android:interpolator="@android:anim/decelerate_interpolator" android:pivotX="0" android:pivotY="100%" android:toXScale="1" android:toYScale="1"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 val animation = AnimationUtils.loadAnimation(context, R.anim.open_animation) card.startAnimation(animation)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

•アプリケーション：



APIがAnimatorの使用を許可しない場合。



•利点：



利用できません



•欠点：



廃止されたAPI。ビューのみを変更します。

4.ベクトルリソースのアニメーション（別名AnimatedVectorDrawable）

私の意見では、Androidアニメーションで最も興味深い部分です。 比較的小さな力で複雑で興味深い効果を実現できます。 Androidのアイコン変換はそのようにして行われます。



VectorDrawableは、Path要素とGroup要素で構成されます。 アニメーションの作成は、これらの要素への動きを登録することになります。 上の写真のAndroidのコードは次のようになります。





XMLを手動で記述しないようにするには、 オンラインツールを使用できます 。



API 25から、ベクトルアニメーションはRenderThreadでレンダリングされるため、UIスレッドに何かを読み込んだとしても（そうしないのですか？）、アニメーションは引き続きスムーズに再生されます。



•アプリケーション：



アイコン

アニメーション効果



•利点：



性能



•欠点：



アニメーションの時点を手動で制御する方法はありません（つまり、実際にはsetCurrentTimeのようなメソッドはありません）



ここですべての例を見て勉強できます 。