10

如何使用设计库版本 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

但我没有找到任何教程

请给我一些方法来用设计库实现这个漂亮的动画

4

2 回答 2

11

以下是使用 Support 库的 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
  • 我的示例代码计算 View 的中间，这需要 View 的宽度和高度，并且帖子总是在 View 之后运行，onLayout所以这些总是以这种方式可用。

知道了从 View 的中间开始显示，我们也知道当显示圆的半径等于 View 对角线的一半时，View 将完全显示。

CircularRevealCompat.createCircularReveal返回一个Animator，类似于旧的做法 ( ViewAnimationUtils.createCircularReveal)。

默认情况下，显示动画上没有稀松布颜色。如果要在显示视图时为稀松布颜色设置动画，则需要一个ObjectAnimator特殊属性CircularRevealWidget.CircularRevealScrimColorProperty.CIRCULAR_REVEAL_SCRIM_COLOR

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

于 2018-09-28T14:58:43.007 回答
1

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

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()
于 2018-07-19T22:44:04.097 回答