如何在视图中使用Bezier-Curve动画?

时间:2016-06-14 21:17:47

标签: android android-animation material-design bezier

我很想建立这种login screen

enter image description here  我试图建立这个,但我唯一可以实现的是RevealEffect。

我的代码

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.fab:
            showRegisterView();
            break;
        case R.id.register_cross:
            hideRegisterView();
            break;
            }
        }

private void showRegisterView() {
    CommonMethods.getInstance().hideSoftKeyboard(mContext,rootView);
    registerView.setVisibility(View.VISIBLE);
    mFab.setVisibility(View.INVISIBLE);
    mCardView.setCardBackgroundColor(mContext.getResources().getColor(R.color.colorAccent));

    registerView.post(showAnimationRunnable);
}
    /**
    Runnable to show animation, Here Register scren will be shown after animation
    */

private final Runnable showAnimationRunnable = new Runnable() {
    @Override
    public void run() {
        // get the center for the clipping circle
        int cx = registerView.getRight() + registerView.getLeft();
        int cy = registerView.getTop();

        // get the final radius for the clipping circle
        float finalRadius = Math.max(registerView.getWidth(), registerView.getHeight());

        // create the animator for this view (the start radius is zero)
        Animator anim =
                    null;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            anim = ViewAnimationUtils.createCircularReveal(registerView, cx, cy, 0, finalRadius);
            }
            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                }
            });
            // make the view visible and start the animation
            anim.start();
        }
    };

    /**
    Hide Register View and show Login view
    */
    private void hideRegisterView(){
        // get the center for the clipping circle
        int cx = registerView.getBottom();
        int cy = registerView.getTop();

        // get the final radius for the clipping circle
        float initialRadius = Math.max(registerView.getWidth(), registerView.getHeight());


        // create the animation (the final radius is zero)
        Animator anim =
                null;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            anim = ViewAnimationUtils.createCircularReveal(registerView, cx, cy, initialRadius, 0);
        }

        // make the view invisible when the animation is done
        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                registerView.setVisibility(View.INVISIBLE);
                loginView.setVisibility(View.VISIBLE);
                mFab.setVisibility(View.VISIBLE);
                mCardView.setCardBackgroundColor(mContext.getResources().getColor(R.color.white));
            }
        });
        anim.setInterpolator(new FastOutSlowInInterpolator());
        // start the animation
        anim.start();
    }

但这还不足以获得整个功能。我需要移动FAB并且必须显示交叉图标。我不知道如何实现这一目标。 我是Android中动画部分的新手。

我读到Curved Motion,但不知道如何在我的代码中实现。

请帮助使用代码。

0 个答案:

没有答案