自定义Card Stack View登录切换注册时动画丢失问题求助

Hey there! Let's figure out why your sign-up card is popping in without animation when switching from login, while the reverse transition works perfectly. This is a common hiccup with sequential card animations, usually tied to how you're initializing the new card's state and triggering its movement.

Common Root Causes & Targeted Fixes #

1. Your Sign-Up Card Starts in a GONE State (Not Off-Screen Visible) #

If you're setting the sign-up card to GONE initially and only switching it to VISIBLE after a delay, the system will immediately render it in its final position instead of animating it. Here's how to fix this:

First, ensure your card container (like FrameLayout or ConstraintLayout) supports overlapping views. Then initialize the sign-up card off-screen at the bottom and set it to INVISIBLE (not GONE) so it's laid out but not visible to the user:

// In your fragment/view initialization code
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val screenHeight = resources.displayMetrics.heightPixels
    signUpCard.translationY = screenHeight.toFloat() // Start below the screen
    signUpCard.visibility = View.INVISIBLE
}

2. Trigger Animations Simultaneously (Don't Wait for a Manual Delay) #

Instead of waiting 1 second to show the sign-up card, kick off both the login card's slide-out and sign-up card's slide-in animations at the same time. This keeps the transitions synced and eliminates the "pop-in" effect:

signUpButton.setOnClickListener {
    val screenHeight = resources.displayMetrics.heightPixels

    // Make the sign-up card visible first (it's still off-screen)
    signUpCard.visibility = View.VISIBLE

    // Animate login card out (adjust direction to match your desired slide)
    loginCard.animate()
        .translationY(-screenHeight.toFloat())
        .setDuration(500)
        .setListener(object : Animator.AnimatorListener {
            override fun onAnimationEnd(animation: Animator?) {
                loginCard.visibility = View.INVISIBLE // Hide after animation completes
            }
            override fun onAnimationStart(animation: Animator?) {}
            override fun onAnimationCancel(animation: Animator?) {}
            override fun onAnimationRepeat(animation: Animator?) {}
        })

    // Animate sign-up card in (slide up from the bottom)
    signUpCard.animate()
        .translationY(0f)
        .setDuration(500)
        .start()
}

3. Check for Layout Measurement Issues #

If your sign-up card's size isn't measured correctly before the animation starts, the translation might not behave as expected. Add a post-runnable to ensure the card is laid out before setting its initial off-screen position:

signUpCard.post {
    // Runs after the card is fully measured and laid out
    val screenHeight = resources.displayMetrics.heightPixels
    signUpCard.translationY = screenHeight.toFloat()
}

4. Avoid Conflicting Layout Updates #

Make sure your CardStackView or CardStackFragmentView isn't forcing a layout refresh mid-animation. If you're using requestLayout() somewhere that interferes, wrap your animation code in runOnUiThread (for activities) or rely on ViewPropertyAnimator (the system behind animate()) since it handles layout changes smoothly.

Quick Recap of the Fix #

• Keep new cards off-screen but laid out (INVISIBLE instead of GONE) initially
• Trigger exit and entry animations at the exact same time
• Ensure cards are fully measured before setting their initial off-screen position
• Hide the old card only after its exit animation completes

This should make your sign-up card slide in smoothly, matching the login card's slide-out animation perfectly.

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