循环显示Android Compat与设计库28

Question

如何使用设计库版本28在Android中创建圆形显示动画

我看到了几个他们所知的类,就像这个项目一样:

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

但我没有找到任何教程

请给我一些方法来实现这个美丽的动画与设计库

Answer 1

使用支持库的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();
        }
    });
}

根据您的使用方式，可能不需要发布可运行对象，但这有助于解决两个潜在问题：

• 视图需要在调用时附加到窗口 CircularRevealCompat.createCircularReveal
• 我的示例代码计算视图的中间位置，该位置需要视图的宽度和高度，并且帖子始终在视图的后面运行，onLayout因此这些位置始终可以通过这种方式使用。

知道显示是从视图的中间开始的，所以我们也知道，当显示圆的半径等于视图对角线的一半时，视图将被完全显示。

CircularRevealCompat.createCircularReveal返回一个Animator，类似于旧的方法（ViewAnimationUtils.createCircularReveal）。

默认情况下，显示动画上没有稀松布颜色。如果要在显示“视图”时对稀松布的颜色进行动画处理，则需要一个ObjectAnimator特殊属性CircularRevealWidget.CircularRevealScrimColorProperty.CIRCULAR_REVEAL_SCRIM_COLOR

您也可以通过交换startRadius和endRadius（以及稀松布的开始和结束颜色）来轻松创建反向动画。

Answer 2

我不熟悉这些视图，但创建循环显示的方法如下：

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()