[Android] Reveal Effect でビューをかっこ良く切り替える

| トラックバック(0) |

Android L(API Level 21)のViewAnimationUtils.createCircularRevealメソッドを使用すると、

ビューに対して広がる(/またはその逆の)円状のクリッピングを適用したアニメーション効果を得る事ができます(表現困難...)。

 

サンプル動画

※画面右端中央やや下のMapアイコンをタップしてビューを切り替えています

 

切り替え前後のビュー(参考)

before.png after.png

 

サンプルソースコード

// Revealアニメーションを適用したいビュー
final View animationTarget = findViewById(R.id.information_container);

int cx = (view.getLeft() + view.getRight()) / 2;
int cy = (view.getTop() + view.getBottom()) / 2;
float radius = Math.max(animationTarget.getWidth(), animationTarget.getHeight()) * 2.0f;

if (animationTarget.getVisibility() == View.INVISIBLE) {
    // 切り替えたいビューが非表示の場合(最初は、こっちを通る)

    // これから表示するビューを表示する(アニメーション開始時には円の半径が0なので実質見えない)
    animationTarget.setVisibility(View.VISIBLE);

    // 円状のクリッピングを適用したアニメーションを開始する
    // 円は(数百ミリ秒で)あっという間に大きくなります
    ViewAnimationUtils.createCircularReveal(
            animationTarget, // アニメーション対象のビュー(これから表示したいビュー)
            cx, cy, // アニメーションの原点(=円の中心)
            0,      // アニメーション開始時の円の半径
            radius  // アニメーション終了時の円の半径
    ).start(); // アニメーション開始
} else {
    // 切り替えたいビューが表示済の場合

    // 円状のクリッピングを適用したアニメーションを開始する
    // 円は(数百ミリ秒で)あっという間に小さくなります
    ValueAnimator reveal = ViewAnimationUtils.createCircularReveal(
            animationTarget, // アニメーション対象のビュー(これから表示したいビュー)
            cx, cy, // アニメーションの原点(=円の中心)
            radius, // アニメーション開始時の円の半径
            0       // アニメーション終了時の円の半径
    );
    // アニメーション終了時に呼び出されるリスナを設定
    reveal.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            // アニメーション終了時に対象のビューを非表示にする
            animationTarget.setVisibility(View.INVISIBLE);
        }
    });
    reveal.start(); // アニメーション開始
}

※デモアプリのソースコードは、https://github.com/romainguy/google-io-2014

 

トラックバック(0)

トラックバックURL: http://mt.adakoda.com/mt-tb.cgi/617

2016年8月

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31