Androidのアクティビティ間のカスタム遷移アニメーション

こんにちは この記事では、ObjectAnimatorとAnimatorSetを使用して、Androidのアクティビティ間の遷移のカスタムアニメーションを作成するプロセスを見ていきます。 興味のある方-猫へようこそ。



PS：この記事は主に初心者の開発者向けに書かれています。



githubで利用可能なすべてのソースコード



2種類の移行アニメーションを検討します。

• 新しいアクティビティを背景に古いアクティビティをアニメーション化する
• 古いアクティビティを背景に新しいアクティビティをアニメーション化する

デモでは、2種類のアニメーションが選択されました。複数のオブジェクトの同時アニメーション（ドアリーフ）と複数のオブジェクトの連続アニメーション（紙の折り畳み）

古いアクティビティのアニメーション

したがって、3つのアクティビティを作成します：FirstActivity、SecondActivityおよびThirdActivity。



FirstActivityコード：



first.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/click_layout" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00ff00" > <TextView android:layout_gravity="center" android:gravity="center" android:layout_width="wrap_content" android:layout_height="fill_parent" android:textColor="#FFFFFF" android:textSize="40sp" android:text="First" /> </LinearLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

FirstActivity.java：

 public class FirstActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.first); LinearLayout click = (LinearLayout) findViewById(R.id.click_layout); click.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Bitmap bmp = getBitmap(); ByteArrayOutputStream stream = new ByteArrayOutputStream(); bmp.compress(Bitmap.CompressFormat.PNG, 100, stream); byte[] byteArray = stream.toByteArray(); Intent intent = new Intent(FirstActivity.this, SecondActivity.class); intent.putExtra("picture", byteArray); startActivity(intent); overridePendingTransition(0,0); } }); } private Bitmap getBitmap(){ View root = getWindow().getDecorView().findViewById(android.R.id.content); root.setDrawingCacheEnabled(true); return root.getDrawingCache(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

getBitmap関数は、現在のウィンドウのビットマップを返します。 アクティビティのメイン要素をクリックすると、新しいインテントを作成し、エクストラとしてビットマップを設定し、バイト配列に変換します。 次に、SecondActivityを起動します。



SecondActivityコード：



second.xml：

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/click_layout" android:background="#ff0000" > <TextView android:layout_gravity="center" android:gravity="center" android:layout_width="wrap_content" android:layout_height="fill_parent" android:textColor="#FFFFFF" android:textSize="40sp" android:text="Second" /> <LinearLayout android:orientation="horizontal" android:weightSum="100" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:layout_weight="50" android:layout_width="0dip" android:layout_height="fill_parent" android:id="@+id/left_image"/> <ImageView android:layout_weight="50" android:layout_width="0dip" android:layout_height="fill_parent" android:id="@+id/right_image"/> </LinearLayout> </FrameLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アクティビティのメイン要素として、2つのLinearLayoutを含むFrameLayoutを設定します。 最初のものには、必要なすべてのコンテンツが含まれています（この例では、TextViewです）。 2つ目は、画面を半分に分割する2つのImageViewです。 アニメーションに必要です。



アニメーションの場合、次の手順を実行する必要があります。

1. 最初のアクティビティから渡されたバイト配列からビットマップを作成します
2. ビットマップを2つの部分に分割し、対応するImageViewにロードします
3. AnimatorSetを使用して、両方のImageViewの回転アニメーションを同時に再生します

 public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.second); Bundle extras = getIntent().getExtras(); byte[] byteArray = extras.getByteArray("picture"); Bitmap bmp = BitmapFactory.decodeByteArray(byteArray, 0, byteArray.length); left = (ImageView) findViewById(R.id.left_image); right = (ImageView) findViewById(R.id.right_image); int centerWidth = bmp.getWidth()/2; Bitmap bmpLeft,bmpRight; bmpLeft = Bitmap.createBitmap(bmp,0,0,centerWidth,bmp.getHeight()); bmpRight = Bitmap.createBitmap(bmp,centerWidth,0,bmp.getWidth() - centerWidth,bmp.getHeight()); left.setImageBitmap(bmpLeft); right.setImageBitmap(bmpRight); ViewTreeObserver observer = left.getViewTreeObserver(); observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { left.getViewTreeObserver().removeOnPreDrawListener(this); startEnterAnimation(); return true; //To change body of implemented methods use File | Settings | File Templates. } }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onCreate関数では、エクストラからビットマップを取得し、Bitmap.createBitmap（）を使用して2つのビットマップに分割し、ImageViewで結果の画像を設定します。 その後、onDraw ImageViewイベントを監視し、オブジェクトの最初のレンダリングの前に1回だけ呼び出されるObserverを登録します。 その中で、開始アクティビティのアニメーションを開始します。

 private void startEnterAnimation() { left.setPivotY(left.getHeight()/2); left.setPivotX(0); right.setPivotY(left.getHeight()/2); right.setPivotX(right.getWidth()); Animator leftAnim = ObjectAnimator.ofFloat(left, "rotationY", 0, 90); Animator rightAnim = ObjectAnimator.ofFloat(right, "rotationY", 0, -90); AnimatorSet set = new AnimatorSet(); set.setDuration(500); set.playTogether(leftAnim, rightAnim); set.start(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アニメーション自体は、startEnterAnimation（）関数で説明されています。 setPivotX（）およびsetPivotY（）関数を使用して、画像が回転する点を設定します。 次に、ObjectAnimatorオブジェクトを使用して、自分で回転アニメーションを定義します。

ObjectAnimatorは、Android 3.0で導入されたシステムコンポーネントです。 オブジェクトのプロパティをアニメーション化するのに役立ちます。 この場合、左のオブジェクトのfloat型のrotationXプロパティをアニメーション化します。

次に、アニメーションのAnimatorSetセットを作成し、アニメーション期間を500ミリ秒に設定して、2つのアニメーションを同時に再生することを伝えます。

アクティビティの終了アニメーションも同様に設定されます。 それを開始するために、Activity onBackPressed（）関数を再定義します。 その中で、finish（）関数を使用してリスナーを追加することを忘れずに、クロージングアニメーションを開始します。

新しいアクティビティのアニメーション

古いアクティビティを背景に新しいアクティビティをアニメーション化するために、新しいアクティビティに何も転送する必要はありません。 ACtivityの背景を透明にするだけです。 これを行うには、AndroidManifestファイルでThirdActivityテーマをTransparentに変更し、このテーマをstyles.xmlに追加します

 <style name="Transparent"> <item name="android:windowNoTitle">true</item> <item name="android:windowIsTranslucent">true</item> <item name="android:windowBackground">@android:color/transparent</item> </style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アニメーションプロセス自体は次のようになります。

• OnPreDrawListenerオブザーバーとgetBitmap関数を使用して、レイアウトのビットマップを取得します。その後、非表示にし、開いているアクティビティのアニメーションを開始します
• 結果のビットマップを4つの部分に分割し、各部分を対応するビットマップに設定してから、最初の画像を除くすべての画像を非表示にします
• オープニングアニメーションは前のアニメーションに似ていますが、画像の各部分のアニメーションを終了した後、次の画像の部分を表示する必要がある点が異なります。
• さて、アニメーション全体の最後に、このアクティビティのコンテンツからレイアウトを表示し、画像を非表示にします

すべてのアニメーションは、同じAnimatorSetを使用して起動されますが、playSequentially関数を使用して設定されるのはそれらだけです。 これは、すべてのアニメーションが順番に実行されることを意味します。



アクティビティのアニメーションの終了は、逆の順序でのみ同じ方法で行われます。

おわりに

アクティビティ間に一時的なアニメーションを作成する2つの方法を検討しました。 この記事のすべてのコードは3.0よりも高いシステムバージョンに適合していますが、有名なJake WhartonのNineOldAndroidsライブラリを使用して、1.6以降の以前のバージョンに簡単に適合させることができます。 焦点を当てたいのは、回転と拡大の相対ポイントを設定することだけです。 このライブラリでは、AnimatorProxyオブジェクトを使用してインストールされます。



この記事が気に入ったら、それだけです。AndroidOSでアニメーションを作成するトピックについては、引き続き公開します。