Circular Reveal Android Compat With Design Library 28

匿名 (未验证) 提交于 2019-12-03 01:33:01

问题:

How To Create A Circular Reveal Animation In Android With Design Library Version 28

I Saw few Classes Which They Are Have Reveal Word Like This Items :

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 

But I Don't Found Any Tutorial For That

Please Give Me Some Ways To Implement this Beautiful Animation With Design Library

回答1:

Here's how to do it, with either version 28.0.0 of the Support library, or the new AndroidX library:

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

Posting the runnable might not be required depending on how you use it, but it helps with 2 potential issues:

  • The View needs to be attached to the window at the point of calling CircularRevealCompat.createCircularReveal
  • My example code calculates the middle of the View, which requires the View's width and height, and the post always runs after the View's onLayout so those will always be available this way.

Knowing that the reveal starts from the middle of the View, we also know that the View will be fully revealed when the radius of the reveal circle equals half of the View's diagonal.

CircularRevealCompat.createCircularReveal returns an Animator, similar to the old way of doing it (ViewAnimationUtils.createCircularReveal).

By default, there is no scrim color on the reveal animation. If you want to animate the scrim color as the View is being revealed, you need an ObjectAnimator of the special property CircularRevealWidget.CircularRevealScrimColorProperty.CIRCULAR_REVEAL_SCRIM_COLOR

You can easily create the reverse animation as well by swapping the startRadius and endRadius (and the scrim's start and end colors).



回答2:

I am not familiar with those views, but the way to create circular reveal is as follows:

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


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!