翻译动画从屏幕开始而不是它所属的位置

时间:2016-12-13 23:41:35

标签: android android-animation floating-action-button

因此,我们正在尝试制作动画,在FAB消失之前移动FAB并打开工具栏。问题是,当我运行TranslationAnimation时,FAB消失,然后从屏幕外滑入。 fromxDelta和yDelta也没有像我期望的那样表现。

任何人都可以指出我做错了什么或帮助我理解这个电话是如何工作的吗?

private void circularReveal(View toolbar, View fab) {
    final View view1 = toolbar;

    // get the center for the clipping circle
    int cx = (toolbar.getLeft() + toolbar.getRight()) / 2;
    int cy = (toolbar.getTop() + toolbar.getBottom()) / 2;

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

    // create the animator for this view (the start radius is zero)
    final SupportAnimator anim = ViewAnimationUtils.createCircularReveal(toolbar, cx, cy, 0, finalRadius);
    //todo create an animation to move the fab.

    TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, 0f,
                                                                Animation.ABSOLUTE , -100f,
                                                                Animation.ABSOLUTE , 0f,
                                                                Animation.ABSOLUTE , -100f);
    translateAnimation.setDuration(2000L);
    translateAnimation.setFillAfter(true);
    Animation.AnimationListener animationListener = new Animation.AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            view1.setVisibility(View.VISIBLE);
            anim.start();
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    };
    translateAnimation.setAnimationListener(animationListener);
    fab.startAnimation(translateAnimation);
}

编辑我清理了代码段中的一些变量名称。

1 个答案:

答案 0 :(得分:1)

  

所以我们正在尝试制作一个能够在它之前移动FAB的动画   消失并打开工具栏。

你的代码反过来说。看起来您正在名为“toolbar”的View上应用TranslateAnimation,并在FloatingActionButton上使用循环显示。

无论如何,我猜你正在努力实现这样的目标:

private void circularReveal(final View view, View toolbar) {

    // get the center for the clipping circle
    int cx = (toolbar.getLeft() + toolbar.getRight()) / 2;
    int cy = (toolbar.getTop() + toolbar.getBottom()) / 2;

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

    // create the animator for this view (the start radius is zero)
    final Animator anim = ViewAnimationUtils.createCircularReveal(toolbar, cx, cy, 0, finalRadius);

    view.animate()
            .translationX(-100)
            .translationY(-100)
            .setDuration(2000)
            .setListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    view.setVisibility(View.INVISIBLE);  // set this to INVISIBLE if you want your FAB to dissapear 
                    anim.start();
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });

}

在工具栏显示并且FAB消失之前,这会将FAB向左移动一点向上。

首先使用FAB调用此方法,将ToolBar调用为第二个参数。

我遗漏了TranslateAnimation并使用了ViewPropertyAnimator因为TranslateAnimation并没有真正移动视图而只移动了屏幕上的像素,而ViewPropertyAnimator改变了View的实际位置。 TranslateAnimation的问题在于您仍然可以单击FAB所在的旧位置,它仍然会触发FAB OnClickListener。