Androidのアクティビティ間の遷移アニメーションを作成する

Android 4.4から、アニメーションを作成するための追加ツールであるTransitions Frameworkが開発者の武器に登場しました。 最初は、複数のビューを操作して、アプリケーションの状態を変更するアニメーションを作成することを目的としていました。 Android 5.0のリリースにより、使用可能なアニメーションの範囲は、その後提示されたマテリアルデザインコンセプトに合わせて拡張されました。



Transitions Frameworkを使用すると、さまざまなアニメーションをすばやく簡単に作成できます。 そのため、iFunnyの開発プロセスでは、このツールキットを通過することは不可能でした。 読者には、トランジションAPIを使用する特別なケースが提供されます-シームレスな効果でアクティビティ間のトランジションのアニメーションを作成します。









視覚的な観点から、トランジションフレームワークに表示されるアクティビティ間のトランジションのアニメーションは、通常のアニメーションと共通要素を持つアニメーションの2つのタイプに分類できます。 一般的な要素を使用したアニメーションの概念は、 developer.android.comから正直に盗まれた写真に示されています 1.共通の要素の役割では、アバターと連絡先の名前があります。









図 1.アクティビティと共通要素間の遷移のアニメーション



しかし、長い紹介が好きな人はいないので、このタイプのアニメーションがiFunnyアプリケーションでどのように作成されたかという話に移りましょう。 最初の例として、図に示すアニメーションを考えます。 2.使用するには、Androidバージョン5.0以降が必要です。









図 2.ユーザー認証画面でのアクティビティ間の遷移のアニメーション



ユーザーの観点から見ると、ここでは珍しいことは何もありません。1つの画面、単純なアニメーションです。 ただし、ご想像のとおり、「内部」は、1つの共通要素を持つ2つの画面間の移行です。



このようなトランジションを作成する最初のステップは、奇妙なことに、この要素自体を選択し、両方のアクティビティのレイアウトでその位置を決定することです。 その後、選択したアイテムを表示する各ビューの説明で、android：transitionName属性を追加し、android：idが存在しない場合はそれらを割り当てる必要があります。



私たちの場合、これらは次の形式の通常のImageViewです。

<ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center" android:transitionName="@string/email_auth_transition" app:srcCompat="@drawable/ic_ifunny_logo" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで2つの重要な点に注意してください。 まず、両方のImageViewで、同じtransitionNameを設定する必要があります。これは論理的です。 第二に、ImageViewを使用しているため、2つの異なるリソースを使用すると予期せぬ結果が生じる可能性があるため（少なくともアニメーションの開始と終了でアニメーションビューを点滅させるため）、コンテンツは同じでなければなりません。



2番目のステップでは、起動された（2番目の）アクティビティのオプションを追加して、開始時にアニメーションを開始する必要があることを通知する必要があります。



ご注意 「2番目」とは、実行される必要のある遷移であるトリガーされたアクティビティを意味し、「最初」とは開始アクティビティを意味します。



これは次のように行われます。

 Bundle bundle = null; if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) { View v = activity.findViewById(R.id.auth_logo); if (v != null) { ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(activity, v, activity.getString(R.string.email_auth_transition)); bundle = options.toBundle(); } } Intent intent = new Intent(activity, SecondActivity.class); if (bundle == null) { activity.startActivity(intent); } else { activity.startActivity(intent, bundle); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のリスト：

• R.id.auth_logo-アニメーションで使用される最初のアクティビティのImageView。
• アクティビティ-最初のアクティビティ。
• R.string.email_auth_transition-両方のImageViewのレイアウトに以前残っていたラベル。
• SecondActivity.class-2番目のアクティビティ。

そして今、注意深い読者は困惑しているかもしれません：序論はAPIレベル19、APIレベル21の例の使用を扱っており、上記のリストにはAPIレベル22の制限があります。残念ながら、コードを書くとき、遷移アニメーションは共通の要素でAPIレベル21の携帯電話では正しく動作しない可能性があります。これは、一般的なアニメーションのスローダウンと、特にアニメーション化されたビューのアーティファクトの形で現れます。 既にトピックに精通している場合は、この動作の理由および/または説明されている問題を解決する方法を知っている-コメントでそれを教えてください。



3番目のステップでは、遷移アニメーションを記述する必要があります。 アニメーションビューが続くパスと、ビュー自体の変換を指定します。 これを行うには、次の内容の別個のファイルprojectName / src / main / res / transitions / email_auth_transition.xmlを作成します。

 <?xml version="1.0" encoding="utf-8"?> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:transitionOrdering="together"> <changeBounds/> <changeImageTransform/> </transitionSet>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ちょっとした理論。 transitionSetタグは、アニメーション化されたビューに一度に適用される複数の変換を記述することを目的としています。 transitionOrderingパラメーターは、これらの変換が適用される順序を担当します。 私たちの場合、それらは同時に使用されます。 Transitions Frameworkには、いくつかの種類の既製の変換が提示されています。 完全なリストはこのページにあります 。 changeBoundsとchangeImageTransformの2つの特定のものに焦点を当てます。



1つ目は、ビューサイズの変換用です。 2番目はImageViewでのみ動作し、1番目と組み合わせて使用​​することで、サイズだけでなくImageViewの形状も変更できます。 変換データを使用して、図に示す画像サイズ変更アニメーションの出力を取得します。 2.アニメーション化されたビューのモーションのタイプを指定しない場合、最短のパスに沿って移動します。 2番目の例では、より興味深い交通手段を検討します。



アニメーションを作成する最後のステップは、両方のアクティビティのテーマで宣言することです。 これを行うには、次の方法で説明を編集します（または、projectName / src / main / res / values-v22 / theme.xmlフォルダーに新しい説明を作成します）。

 <style name="Theme.FirstActivity" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowActivityTransitions">true</item> </style> <style name="Theme.SecondActivity" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowActivityTransitions">true</item> <item name="android:windowSharedElementEnterTransition"> @transition/email_auth_transition </item> <item name="android:windowSharedElementExitTransition"> @transition/email_auth_transition </item> </style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここに：

• android：windowActivityTransitionsは遷移アニメーションを有効にします。
• android：windowSharedElementEnterTransitionは、最初のアクティビティから2番目のアクティビティへの遷移のアニメーションの説明を含むファイルを指します。
• android：windowSharedElementExitTransitionは、2番目のアクティビティから最初のアクティビティに戻るときに、遷移アニメーションの説明を含むファイルを指します。

OSバージョンが5.1よりも低い場合、アプリケーションのクラッシュという形で予想される結果を避けるために、同じスタイルのテーマを作成する必要があることに注意してください。 例えば、それらをファイルprojectName / src / main / res / values / theme.xmlに入れます：

 <style name="Theme.FirstActivity" parent="Theme.NoActionBar.Translucent"/> <style name="Theme.SecondActivity" parent="Theme.TransparentActionBar"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、アクティビティからアクティビティへの遷移のアニメーションを作成するには、次のものが必要です。

1. アニメーションを記述します（この場合、xmlファイルで）。
2. これらのアニメーションをアクティビティテーマのxml記述に追加します。
3. マークアップでアニメーション化された共通要素（ビュー）をマークします。
4. 2番目のアクティビティを開始するときに、起動アニメーションでトランジションアニメーションを使用する必要があることを指定します。

ご覧のとおり、このようなアニメーションの作成は、最初の例で述べたいくつかの制限を除いて、まったく難しくありません。 次に、2番目のより複雑な例を考えてみましょう。 ここでは、コメントセクションからユーザープロファイルに移動することに興味があります（図3）。









図 3.ユーザープロファイルのコメントからアニメーションを移行する



上記のトランジションを作成するためのすべてのステップは、このアニメーションにも適しています。 しかし、共通要素の変換は少し異なって実装されます。 次のリストは、一般的な「arc」要素のサイズ変更とともに移動する方法を示しています。

 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds> <arcMotion android:maximumAngle="90" android:minimumHorizontalAngle="90" android:minimumVerticalAngle="0" /> </changeBounds> </transitionSet>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の例の複雑さは何ですか？ 最初のケースでは、アプリケーション自体のリソースからのイメージが使用されました。ここでは、イメージはネットワークからダウンロードされます。 さらに、コメントの場合、ユーザーのアバターの画像はプロファイルの解像度よりも低い解像度で撮影されます。 そのため、2番目のアクティビティに最初の画像で使用されている画像へのアクセスを許可するだけでなく、アニメーションの最後に必要な画像をより高品質で読み込む必要があります。 したがって、2つの問題が判明します。



最初の問題を解決するには、個人的にイメージをディスクにキャッシュするか、2番目のアクティビティのパラメーターでそのアドレスを転送します。 ただし、この問題の解決策は、アプリケーションで使用される画像のダウンロードに使用されるライブラリ-Glideに転送されました。 イメージをロードするときに、diskCacheStrategyパラメーター（DiskCacheStrategy.SOURCE）を追加するだけで、ライブラリ自体によってキャッシュされます（Glideバージョン3.xに関連）。 したがって、2番目のアクティビティからこのリソースに再度アクセスする場合、キャッシュされたファイルが使用されます。これにより、アニメーション化されたImageViewの点滅を回避できます。



2番目の問題も非常に簡単に解決されます。 トランジションがアニメーション化されている間、ユーザープロファイルと高解像度のアバターがネットワークからダウンロードされ、その完了を待ちます。 両方の条件（アニメーションの完了とダウンロードの完了）が満たされるとすぐに、ユーザーのアバターが更新されます。 アニメーションのステータスが変化したときに呼び出されるコールバックを実装する特別なリスナーを使用すると、この動作を実現できます。 これを行うには、2番目のアクティビティに属するフラグメントで、このリスナーを設定します。

 @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) { getActivity().getWindow().getSharedElementEnterTransition() .addListener(mEnterTransitionListener); } setAvatar(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで次のことが起こります。

1. getSharedElementEnterTransition（）を使用するAddListener（）は、アクティビティの外観をアニメーション化するようにリスナーを設定します。
2. setAvatar（）メソッドは、アバター（既にキャッシュにある）のダウンロードとインストールを試みます。

リスナーの実装方法を正確に検討してください。

 private Transition.TransitionListener mEnterTransitionListener = new Transition.TransitionListener() { @Override public void onTransitionStart(Transition transition) { } @Override public void onTransitionEnd(Transition transition) { onProfileUpdated(); } @Override public void onTransitionCancel(Transition transition) { } @Override public void onTransitionPause(Transition transition) { } @Override public void onTransitionResume(Transition transition) { } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onProfileUpdated（）メソッドで、プロファイルのコンテンツを更新します。 とアバター。



共通の要素が画面を超えた場合を個別に言及する価値があります。 その特徴は、ロジックとは反対に（またはロジックに従って）トランジションアニメーションが実行され、非常に面白いように見えるという事実にあります（図4）。









図 4.コメント内のプロファイルからの戻りのアニメーション



この動作を回避するには、一般的な要素が画面を離れるときに、View.VISIBLEとは異なる可視性を設定するだけで十分です。



一般的に、トランジションフレームワークは、アニメーションを作成するためのシンプルで強力なツールであると言えます。 アクティビティ間の遷移のアニメーションのみに限定されるものではありません-この記事では、その使用の特別なケースのみを検討しました。 また、提供された変換に加えて、独自の変換を作成することもできますが、これは別の投稿に値する完全に異なるストーリーです。



PSそして、iFunnyのアニメーションがどのように考えられたかについては、 こちらをご覧ください 。