web-dev-qa-db-ja.com

Circular Reveal Android Compat With Design Library 28

Androidデザインライブラリバージョン28を使用して円形のリビールアニメーションを作成する方法

私は彼らがこのアイテムのような言葉を明らかにしているいくつかのクラスを見ました：

Android.support.design.circularreveal.CircularRevealFrameLayout
Android.support.design.circularreveal.CircularRevealGridLayout
Android.support.design.circularreveal.CircularRevealLinearLayout
Android.support.design.circularreveal.CircularRevealRelativeLayout
Android.support.design.circularreveal.cardview.CircularRevealCardView
Android.support.design.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout

しかし、そのためのチュートリアルは見つかりませんでした

デザインライブラリでこの美しいアニメーションを実装する方法を教えてください

androidmaterial-designandroid-support-librarybackwards-compatibilitycircularreveal
9
Ali Edp

サポートライブラリのバージョン28.0.0または新しいAndroidXライブラリを使用してこれを行う方法は次のとおりです。

private <T extends View & CircularRevealWidget> void circularRevealFromMiddle(@NonNull final T circularRevealWidget) {
    circularRevealWidget.post(new Runnable() {
        @Override
        public void run() {
            int viewWidth = circularRevealWidget.getWidth();
            int viewHeight = circularRevealWidget.getHeight();

            int viewDiagonal = (int) Math.sqrt(viewWidth * viewWidth + viewHeight * viewHeight);

            final AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.playTogether(
                    CircularRevealCompat.createCircularReveal(circularRevealWidget, viewWidth / 2, viewHeight / 2, 10, viewDiagonal / 2),
                    ObjectAnimator.ofArgb(circularRevealWidget, CircularRevealWidget.CircularRevealScrimColorProperty.CIRCULAR_REVEAL_SCRIM_COLOR, Color.RED, Color.TRANSPARENT));

            animatorSet.setDuration(5000);
            animatorSet.start();
        }
    });
}

ランナブルの使用方法によっては、ランナブルの投稿は必要ない場合がありますが、2つの潜在的な問題に役立ちます。

  • ビューは、CircularRevealCompat.createCircularRevealを呼び出す時点でウィンドウにアタッチする必要があります
  • 私のサンプルコードは、ビューの幅と高さを必要とするビューの中央を計算します。投稿は常にビューのonLayoutの後に実行されるため、これらは常にこの方法で利用できます。

リビールがビューの中央から始まることを知っているので、リビール円の半径がビューの対角線の半分に等しいときにビューが完全にリビールされることもわかっています。

CircularRevealCompat.createCircularRevealは、古い方法（ViewAnimationUtils.createCircularReveal）と同様に、Animatorを返します。

デフォルトでは、リビールアニメーションにはスクリムカラーはありません。ビューが表示されているときにスクリムカラーをアニメーション化する場合は、特別なプロパティCircularRevealWidget.CircularRevealScrimColorProperty.CIRCULAR_REVEAL_SCRIM_COLORのObjectAnimatorが必要です。

StartRadiusとendRadius（およびスクリムの開始色と終了色）を入れ替えることで、逆方向のアニメーションも簡単に作成できます。

8
Ovidiu

私はそれらのビューに精通していませんが、円形のリビールを作成する方法は次のとおりです。

val view= ... //Get your view
val cx = view.width / 2
val cy = view.height / 2
val finalRadius = Math.hypot(cx, cy)
val anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius) //this is the important one here
anim.start()
1
Nick Mowen