Android5.0の要素共有とCircleReveal効果

まず効果図を見る
この効果は要素共有とCircleRevealを通じて共同で完成して、もちろん前後の順序があって、先に要素共有効果を実行して、要素共有移行効果は実行して、CirclerRevealアニメーションを実行して以下に実現方法を紹介して、コードは少なくて、文章の最後にプロジェクトのダウンロードがあります.

共有要素要素共有はactivityまたはfragment切り替え時の遷移効果です.前のインタフェースAの要素aと後のインタフェースBの要素bの2つの要素が共有されている場合、要素共有効果を使用してインタフェースAからインタフェースBに切り替えると、aがbに移動し、移動中にbの外観と大きさになる.インタフェースBを閉じてインタフェースAに戻ると、同様に逆の遷移効果が見られる.したがって、共有要素のアニメーション効果は、2つの共有要素の位置と外観に依存します.共有要素の実装は、コントロール要素の変位とサイズの外観の変化を実際に実装したのではなく、アニメーション効果にすぎません.

1、共有要素を使用するには条件を満たさなければならない:(1)テーマの必要性はThemeである.AppCompatの下のテーマで、共有要素の効果を見ることができます.(2)共有要素がAndroid 5であるため.0が導入するのでandroid 5に必要です.0(LOLLIPOP)以上のシステムの下で運行して、低いバージョンの運行は間違いを報告して、プラスしなければなりません

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){

}

2、共有要素の設定:コードに設定:view.setTransitionName( getString(R.string.transition_name)); xmlファイルでの設定:android:transitionName='@string/transition_name"は、要素の共有効果を実現する前後の2つのインタフェースの要素共有名TransitionNameが同じでなければならないので、任意の文字列を設定すればよい.3、インタフェースAをB要素共有呼び出し方法に切り替える:Activity Optionsを作成し、toBundle()方法でActivity OptionsをBundleに変換し、startActivityでbundleを渡す.Activity OptionsはmakeSceneTransitionAnimation法により2つのactivity間で遷移効果を生じる.makeSceneTransitionAnimationのソースコードは次のとおりです.

public static ActivityOptions makeSceneTransitionAnimation(
    Activity activity,View sharedElement, String sharedElementName) {
        return makeSceneTransitionAnimation(
            activity, Pair.create(sharedElement, sharedElementName));
    }

ソースコードを見るとよくわかりますが、パラメータ1は現在共有要素を使用しているactivityであり、パラメータ2は共有のviewであり、パラメータ3は共有名であり、この値はnullではありません.コード実装、

ActivityOptions options = ActivityOptions
    .makeSceneTransitionAnimation(MainActivity.this,
    view, view.getTransitionName());
startActivityForResult(intent, 1, options.toBundle());

これにより、アニメーションを共有することができます.

CircleReveal CircleRevealは円形のスケーリング効果を実現し、ある部分を強調表示することができます.android 5です0で導入された効果は、共有要素と同様に低バージョンで実行するとエラーが発生します.実装方法:ViewAnimationUtilsの下のcreateCircularRevealメソッドを呼び出し、メソッドはAnimatorオブジェクトを返します.このAnimatorはアニメーション応答プロパティを設定し、startメソッドを呼び出してアニメーションの再生を開始します.CircularRevealはプロパティアニメーションであり、アニメーションは同じプロパティアニメーションを設定すればよいことがわかります.次はcreateCircularRevealメソッドのソースコードです.

/* @param view The View will be clipped to the animating circle.
* @param centerX The x coordinate of the center of the animating circle, relative to
*                view.
* @param centerY The y coordinate of the center of the animating circle, relative to
*                view.
* @param startRadius The starting radius of the animating circle.
* @param endRadius The ending radius of the animating circle.
*/
public static Animator createCircularReveal(View view,
            int centerX,  int centerY, float startRadius, float endRadius) {
        return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
    }

ソースコードから分かるように、パラメータ1はアニメーションを実行するコントロールであり、このコントロールは私たちが強調表示したいコントロールではなく、円形展開やスケール効果を実行したいコントロールやレイアウトであり、パラメータ2、3はアニメーション円形の円心を実行し始めるx座標とy座標であり、パラメータ4は開始半径であり、パラメータ5は終了半径である.伝達パラメータについては、コード部分を見てみましょう.headerは円形スケールの中心コントロールであり、rlはRelativeLayoutであり、アニメーションを実行するレイアウトであり、headerはレイアウトrlにあります.コード実装部

Animator anim = ViewAnimationUtils.createCircularReveal(
                    rl,
                    (header.getLeft() + header.getRight()) / 2,
                    (header.getTop() + header.getBottom()) / 2,
                    (float) header.getWidth() / 2,
                    finalRadius);
anim.setDuration(1000);
anim.setInterpolator(new AccelerateDecelerateInterpolator());
            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    super.onAnimationStart(animation);
                    Log.e("---", "start anim");
                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    Log.e("---", "end anim");
                    //show views
                }
            });
anim.start();

finalRadiusは円形がrl全体を覆う最小値、すなわちrlという矩形の斜角線長をとる.

final float finalRadius = (float) Math.hypot(rl.getWidth(), rl.getHeight());

これでCircleRevealアニメーションが実現します.
2つのアニメーションをスムーズに接続するためには、activity切り替えの共有メタ要素遷移効果を先に実行し、CircleReveal円形展開効果を作成するために、要素共有効果遷移効果のリスニングが必要です.Activity Bで

Transition transition = getWindow().getSharedElementEnterTransition();

Transitionオブジェクトを取得し、transitionにリスニングを追加し、トランジションアニメーションの終了までリスニングできます.

transition.addListener(new Transition.TransitionListener() {
                @Override
                public void onTransitionStart(Transition transition) {

                }

                @Override//    
                public void onTransitionEnd(Transition transition) {
                    performCircleReveal();//  CircleReveal  
                }

                @Override
                public void onTransitionCancel(Transition transition) {

                }

                @Override
                public void onTransitionPause(Transition transition) {

                }

                @Override
                public void onTransitionResume(Transition transition) {

                }
            });

onTransitionEndメソッドでCircleRevealアニメーションを実行します.
これでこの切り替えActivityの効果は完成し、fragmentの切り替えも要素共有効果を実現でき、みんなで自分で実現することができます.
添付:ソースアドレス:http://download.csdn.net/detail/tm1989tm/9478015