翻译动画从屏幕开始，而不是从它所属的地方开始

Question

所以我们正在尝试制作一个动画，在 FAB 消失之前移动它并打开一个工具栏。问题是当我运行 TranslationAnimation 时，FAB 会消失，然后从屏幕外滑入。 fromxDelta 和 fromYDelta 的行为也不像我期望的那样。

谁能指出我做错了什么或帮助我理解这个调用是如何工作的？

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

EDIT 我在代码 sn-p 中清理了一些变量名。

Answer 1

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

您的代码以相反的方式读取。看起来您正在对名为 'toolbar' 的视图应用 TranslateAnimation，并在 FloatingActionButton 上使用圆形 Reveal。

无论如何，我猜你正在尝试实现这样的目标：

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 改变了视图的实际位置。 TranslateAnimation 的问题是您仍然可以单击 FAB 所在的旧位置，它仍然会触发 FAB OnClickListener。