6

Shared Elements を動画で実現したいと思っています。

makeSceneTransitionAnimation の様に動的に View を共有して Activity の遷移を行いたいのですが、API level 21 未満の場合はどのように実現すればいいでしょうか。

実装方法として Service 等のライフサイクルを横断するストアに View のインスタンスを保持しておき、そのインスタンスを遷移先の View をすげ替える事で実現できるのではないかと思っていますが、どなたかご存じないでしょうか?

よろしくお願いします。

2 件の回答 2

7

英語ですが、DevBytes に実装の仕方を説明した動画があります。

https://www.youtube.com/watch?v=CPxkoe2MraA&list=PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0&index=75

基本的な考え方は、標準の遷移アニメーションを無効化した上で遷移先のアニメーション側で 独自のアニメーションを頑張る形になります。

遷移先でアニメーションさせるための情報として、遷移元の画像の位置と大きさを Intent の extra にいれて startActivity します。 動画の中では以下の様なコードを呼び出し側に記述しています。

        int[] screenLocation = new int[2];
        v.getLocationOnScreen(screenLocation);
        PictureData info = mPicturesData.get(v);
        Intent subActivity = new Intent(ActivityAnimations.this,
                PictureDetailsActivity.class);
        int orientation = getResources().getConfiguration().orientation;
        subActivity.
                putExtra(PACKAGE + ".orientation", orientation).
                putExtra(PACKAGE + ".resourceId", info.resourceId).
                putExtra(PACKAGE + ".left", screenLocation[0]).
                putExtra(PACKAGE + ".top", screenLocation[1]).
                putExtra(PACKAGE + ".width", v.getWidth()).
                putExtra(PACKAGE + ".height", v.getHeight()).
                putExtra(PACKAGE + ".description", info.description);
        startActivity(subActivity);

        // Windowアニメーションを無効化
        overridePendingTransition(0, 0);

呼び出される側では、onCreate で extra を取り出してアニメーションを行うのですが、 ひとつポイントがあります。 onCreate の段階ではレイアウトが完了していないので、 ViewTreeObserver を使用して描画の直前に処理を挿入してあげるとうまくいきます。

    if (savedInstanceState == null) {
        ViewTreeObserver observer = mImageView.getViewTreeObserver();
        observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {

            @Override
            public boolean onPreDraw() {
                mImageView.getViewTreeObserver().removeOnPreDrawListener(this);

                // ここにアニメーションの処理を記述

                return true;
            }
        });
    }

動画の中で解説しているコードはこちらからダウンロードできます。

http://developer.android.com/shareables/devbytes/ActivityAnimations.zip

コードだけでも参考になるのではないかと思います。

1
  • 具体的なパラメーターの受け渡しやアニメーションの実装方法も記述いただきとても参考になりました!
    – eccyan
    Commented 2014年12月5日 17:58
3

推測されている通り、Androidのフレームワークでも一旦Viewを保存しておき、アニメーションを実行しています。

基本的にはActivityOptionsクラスのmakeSceneTransitionAnimationをまねるかたちになりそうです。動画の方は、バッファリングなどもあるので難易度が高そうですが...

462         ArrayList<String> names = new ArrayList<String>();
463         ArrayList<View> views = new ArrayList<View>();
464 
465         if (sharedElements != null) {
466             for (int i = 0; i < sharedElements.length; i++) {
                    // このfor文でsharedElementsからViewを取得
467                 Pair<View, String> sharedElement = sharedElements[i];
468                 String sharedElementName = sharedElement.second;
469                 if (sharedElementName == null) {
470                     throw new IllegalArgumentException("Shared element name must not be null");
471                 }
472                 names.add(sharedElementName);
473                 View view = sharedElement.first;
474                 if (view == null) {
475                     throw new IllegalArgumentException("Shared element must not be null");
476                 }
477                 views.add(sharedElement.first);
478             }
479         }
480         // アクティビティ終了時のアニメーション準備
481         ExitTransitionCoordinator exit = new ExitTransitionCoordinator(activity, names, names,
482                 views, false);

あわせてサポートライブラリを調査してみましたが、 ActivityOptionsCompat v21での実装では、API Level.21以下でのアニメーションは諦めているようで参考にはなりませんでした。

131     public static ActivityOptionsCompat makeSceneTransitionAnimation(Activity activity,
132             View sharedElement, String sharedElementName) {
133         if (Build.VERSION.SDK_INT >= 21) { // 諦めの境地
134             return new ActivityOptionsCompat.ActivityOptionsImpl21(
135                     ActivityOptionsCompat21.makeSceneTransitionAnimation(activity,
136                             sharedElement, sharedElementName));
137         }
138         return new ActivityOptionsCompat();
139     }
1
  • 実現可能そうなので、makeSceneTransitionAnimation を真似る方法で実装を行い動作確認行ってみます。 ご回答ありがとうございました!
    – eccyan
    Commented 2014年12月3日 10:20

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。