如何实现类似WhatsApp通话界面的动画？已尝试淡入淡出动画

Hey there! Let's nail that WhatsApp-like call interface animation you're aiming for. I see you've started experimenting with fade animations using AlphaAnimation, but let's expand on that to match WhatsApp's smooth, polished transitions. First, let's fix up your existing fade code, then dive into the specific animations you're likely after.

First: Complete Your Fade Animation Code #

Your current snippet cuts off, so here's the full working version of your fade-out (and matching fade-in) animation using the old View Animation system:

private Animation setAnimFadeOut(int startOff, int duration) {
    AlphaAnimation animFadeOut = new AlphaAnimation(1.0f, 0.0f);
    animFadeOut.setInterpolator(new AccelerateInterpolator());
    animFadeOut.setStartOffset(startOff);
    animFadeOut.setDuration(duration);
    // Keep the final state after animation ends
    animFadeOut.setFillAfter(true);
    return animFadeOut;
}

// Corresponding fade-in animation
private Animation setAnimFadeIn(int startOff, int duration) {
    AlphaAnimation animFadeIn = new AlphaAnimation(0.0f, 1.0f);
    animFadeIn.setInterpolator(new DecelerateInterpolator());
    animFadeIn.setStartOffset(startOff);
    animFadeIn.setDuration(duration);
    animFadeIn.setFillAfter(true);
    return animFadeIn;
}

That said, Android's Property Animation system (API 11+) is far more flexible and recommended for modern apps—it works on any object property, not just views, and produces smoother results. Let's use that for WhatsApp's signature animations.

WhatsApp's Key Call Interface Animations & How to Build Them #

WhatsApp uses a mix of combined animations for call transitions and subtle looping animations for active call states. Here are the most common ones:

1. Slide + Fade In/Out (Call Screen Transition) #

When you answer or end a call, WhatsApp slides the call screen up/down while fading it in/out. Here's how to implement that with Property Animations:

// Animate call screen entering from the bottom
private void startEnterCallAnimation(View callScreen) {
    // Set initial state: off-screen bottom, fully transparent
    callScreen.setTranslationY(callScreen.getHeight());
    callScreen.setAlpha(0.0f);

    ObjectAnimator slideUp = ObjectAnimator.ofFloat(callScreen, "translationY", callScreen.getHeight(), 0);
    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(callScreen, "alpha", 0.0f, 1.0f);

    AnimatorSet enterAnim = new AnimatorSet();
    enterAnim.playTogether(slideUp, fadeIn);
    enterAnim.setDuration(300); // Match WhatsApp's quick but smooth timing
    enterAnim.setInterpolator(new DecelerateInterpolator()); // Slow down at the end
    enterAnim.start();
}

// Animate call screen exiting to the bottom
private void startExitCallAnimation(View callScreen) {
    ObjectAnimator slideDown = ObjectAnimator.ofFloat(callScreen, "translationY", 0, callScreen.getHeight());
    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(callScreen, "alpha", 1.0f, 0.0f);

    AnimatorSet exitAnim = new AnimatorSet();
    exitAnim.playTogether(slideDown, fadeOut);
    exitAnim.setDuration(250);
    exitAnim.setInterpolator(new AccelerateInterpolator()); // Speed up at the end
    // Optional: Listen for animation end to finish cleanup
    exitAnim.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animation) {
            callScreen.setVisibility(View.GONE);
        }
        // Implement empty methods for other callbacks
        @Override public void onAnimationStart(Animator animation) {}
        @Override public void onAnimationCancel(Animator animation) {}
        @Override public void onAnimationRepeat(Animator animation) {}
    });
    exitAnim.start();
}

2. Pulsing "Active Call" Animation #

WhatsApp has a subtle pulsing effect on the microphone/speaker icon during calls. Here's how to create that infinite loop animation:

private void startPulseAnimation(View targetView) {
    ObjectAnimator scaleX = ObjectAnimator.ofFloat(targetView, "scaleX", 1.0f, 1.1f, 1.0f);
    ObjectAnimator scaleY = ObjectAnimator.ofFloat(targetView, "scaleY", 1.0f, 1.1f, 1.0f);
    ObjectAnimator alpha = ObjectAnimator.ofFloat(targetView, "alpha", 0.8f, 1.0f, 0.8f);

    AnimatorSet pulseAnim = new AnimatorSet();
    pulseAnim.playTogether(scaleX, scaleY, alpha);
    pulseAnim.setDuration(1500); // Slow, natural pulse
    pulseAnim.setInterpolator(new LinearInterpolator()); // Consistent speed
    pulseAnim.setRepeatCount(ValueAnimator.INFINITE); // Loop forever
    pulseAnim.start();
}

3. Quick Scale + Fade (Button Press Feedback) #

When you tap call buttons (mute, speaker, etc.), WhatsApp uses a tiny scale + fade to give feedback:

private void startButtonPressAnimation(View button) {
    ObjectAnimator scaleDown = ObjectAnimator.ofFloat(button, "scaleX", 1.0f, 0.95f, 1.0f);
    ObjectAnimator scaleYDown = ObjectAnimator.ofFloat(button, "scaleY", 1.0f, 0.95f, 1.0f);
    ObjectAnimator fade = ObjectAnimator.ofFloat(button, "alpha", 1.0f, 0.7f, 1.0f);

    AnimatorSet pressAnim = new AnimatorSet();
    pressAnim.playTogether(scaleDown, scaleYDown, fade);
    pressAnim.setDuration(200);
    pressAnim.start();
}

Pro Tips for Matching WhatsApp's Feel #

• Use Material Design Interpolators: For more natural motion, replace basic interpolators with FastOutSlowInInterpolator (AndroidX) which is optimized for smooth transitions.
• Keep Timings Tight: WhatsApp's animations are quick (200-300ms) but not jarring—avoid overly long durations.
• Test on Real Devices: Emulators can sometimes smooth out jank, so always test animations on physical hardware.

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