求助实现登录/注册卡片堆叠切换动画效果

Hey there! Let's work through this stack animation issue for your sign-in/sign-up CardViews. Based on the behavior you described, here are the most likely fixes and checks to get that smooth toggle animation working correctly:

First, Verify the Basics #

• Parent Layout Type: Make sure your two CardViews are placed inside a FrameLayout or RelativeLayout—LinearLayout doesn't support overlapping views, which will break the stacking animation entirely. This is a super common oversight!
• Initial View Hierarchy: Confirm which CardView is on top initially (e.g., sign-in on top of sign-up). Your animation logic needs to account for this starting state.

Fix the StackAnimation Implementation #

If your current StackAnimation class is missing key animation properties or proper view hierarchy handling, try updating it with this robust version that mimics the smooth toggle effect you want:

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

public class StackAnimation {
    // Adjust these values to match your desired animation speed and scale
    private static final long ANIMATION_DURATION = 350;
    private static final float BASE_SCALE = 1.0f;
    private static final float COLLAPSED_SCALE = 0.8f;
    private static final float TRANSLATION_OFFSET = 60f;

    public static void animateStacks(View topCard, View bottomCard, float endScale) {
        // Ensure initial hierarchy is correct before animating
        bottomCard.bringToFront();
        topCard.bringToFront();

        // Animate the top card: shrink, shift down, and fade slightly
        ObjectAnimator topScaleX = ObjectAnimator.ofFloat(topCard, "scaleX", BASE_SCALE, endScale);
        ObjectAnimator topScaleY = ObjectAnimator.ofFloat(topCard, "scaleY", BASE_SCALE, endScale);
        ObjectAnimator topAlpha = ObjectAnimator.ofFloat(topCard, "alpha", 1.0f, 0.7f);
        ObjectAnimator topTranslateY = ObjectAnimator.ofFloat(topCard, "translationY", 0f, TRANSLATION_OFFSET);

        // Animate the bottom card: expand back to full size, shift up, and fade in
        ObjectAnimator bottomScaleX = ObjectAnimator.ofFloat(bottomCard, "scaleX", endScale, BASE_SCALE);
        ObjectAnimator bottomScaleY = ObjectAnimator.ofFloat(bottomCard, "scaleY", endScale, BASE_SCALE);
        ObjectAnimator bottomAlpha = ObjectAnimator.ofFloat(bottomCard, "alpha", 0.7f, 1.0f);
        ObjectAnimator bottomTranslateY = ObjectAnimator.ofFloat(bottomCard, "translationY", -TRANSLATION_OFFSET, 0f);

        // Combine and run animations with a smooth interpolator
        AnimatorSet topCardAnim = new AnimatorSet();
        topCardAnim.playTogether(topScaleX, topScaleY, topAlpha, topTranslateY);
        topCardAnim.setDuration(ANIMATION_DURATION);
        topCardAnim.setInterpolator(new AccelerateDecelerateInterpolator());

        AnimatorSet bottomCardAnim = new AnimatorSet();
        bottomCardAnim.playTogether(bottomScaleX, bottomScaleY, bottomAlpha, bottomTranslateY);
        bottomCardAnim.setDuration(ANIMATION_DURATION);
        bottomCardAnim.setInterpolator(new AccelerateDecelerateInterpolator());

        // Start both animations simultaneously
        topCardAnim.start();
        bottomCardAnim.start();

        // Swap hierarchy after animation ends to prepare for next toggle
        topCardAnim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {}
            @Override
            public void onAnimationEnd(Animator animation) {
                bottomCard.bringToFront();
            }
            @Override
            public void onAnimationCancel(Animator animation) {}
            @Override
            public void onAnimationRepeat(Animator animation) {}
        });
    }
}

Update Your Click Listeners #

Make sure you're passing the correct top/bottom views based on the initial state. For example:

// Assume sign-in is on top initially
cardViewSignIn.setOnClickListener(v -> {
    StackAnimation.animateStacks(cardViewSignIn, cardViewSignUp, StackAnimation.COLLAPSED_SCALE);
});

cardViewSignUp.setOnClickListener(v -> {
    StackAnimation.animateStacks(cardViewSignUp, cardViewSignIn, StackAnimation.COLLAPSED_SCALE);
});

Troubleshoot Common Issues #

• Jumpy Animation: If the animation skips or jumps, check that you're using AccelerateDecelerateInterpolator (or another smooth interpolator) and that your duration is set to 300-400ms (too fast/slow looks unnatural).
• Incorrect Stack Order: If the wrong card comes to the top after animation, double-check the bringToFront() calls in both the start of the animation and the end listener.
• Weird Scaling: If the cards scale incorrectly, verify that ANIMATION_END_SCALE is a reasonable value (0.7-0.9 works best for this effect—values below 0.7 will make the card too small).

内容的提问来源于stack exchange，提问作者hasan_shaikh