咨询：开发图片逐次下落组成单词的Splash Screen动画

Hey there! Creating a splash screen where images slide down one by one to form a word is such a cool way to make your app's first impression stand out. Let's break down how you can implement this smooth animation step by step.

• Each image starts off-screen at the top (so users don't see it initially)
• We animate each image's position sequentially: once the first image lands in its target spot, the next one slides down to its right, and so on
• The final positions of all images will form your desired word, centered on the screen

First, set up your layout with all the image views, positioned off-screen initially:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <!-- Each image represents a letter in your word -->
    <ImageView
        android:id="@+id/img_letter_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/letter_a"
        android:translationY="-250dp"/> <!-- Start off-screen top -->

    <ImageView
        android:id="@+id/img_letter_p"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/letter_p"
        android:translationY="-250dp"/>

    <!-- Add more ImageViews for the rest of your letters -->
</RelativeLayout>

Next, use ObjectAnimator and AnimatorSet to handle the sequential animation in your Activity:

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;

public class SplashScreenActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        // Initialize all image views
        ImageView imgA = findViewById(R.id.img_letter_a);
        ImageView imgP = findViewById(R.id.img_letter_p);
        // Add references for other images here

        // Calculate target positions to center the word horizontally
        int screenWidth = getResources().getDisplayMetrics().widthPixels;
        int totalWordWidth = imgA.getWidth() + imgP.getWidth(); // Sum all image widths
        int startX = (screenWidth - totalWordWidth) / 2;

        // Set target X positions for each image (side by side)
        imgA.setX(startX);
        imgP.setX(startX + imgA.getWidth());
        // Set X positions for other images accordingly

        // Calculate vertical center for all images
        int screenCenterY = getResources().getDisplayMetrics().heightPixels / 2;

        // Create animations for each image
        ObjectAnimator animA = ObjectAnimator.ofFloat(
                imgA,
                "translationY",
                imgA.getTranslationY(),
                screenCenterY - imgA.getHeight()/2
        );
        animA.setDuration(600); // Animation duration in ms

        ObjectAnimator animP = ObjectAnimator.ofFloat(
                imgP,
                "translationY",
                imgP.getTranslationY(),
                screenCenterY - imgP.getHeight()/2
        );
        animP.setDuration(600);

        // Play animations one after another
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playSequentially(animA, animP); // Add all animations here

        // Navigate to main screen once all animations finish
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {}

            @Override
            public void onAnimationEnd(Animator animation) {
                startActivity(new Intent(SplashScreenActivity.this, MainActivity.class));
                finish();
            }

            @Override
            public void onAnimationCancel(Animator animation) {}

            @Override
            public void onAnimationRepeat(Animator animation) {}
        });

        animatorSet.start();
    }
}

For iOS, the logic is similar—use UIView.animate to chain animations sequentially:

First, set up your storyboard with ImageViews, then add this code to your ViewController:

import UIKit

class SplashScreenVC: UIViewController {

    @IBOutlet weak var imgLetterA: UIImageView!
    @IBOutlet weak var imgLetterP: UIImageView!
    // Connect other image views here

    override func viewDidLoad() {
        super.viewDidLoad()
        setupInitialPositions()
        startAnimationSequence()
    }

    private func setupInitialPositions() {
        // Move images off-screen top initially
        let screenHeight = UIScreen.main.bounds.height
        imgLetterA.transform = CGAffineTransform(translationX: 0, y: -screenHeight/2)
        imgLetterP.transform = CGAffineTransform(translationX: 0, y: -screenHeight/2)

        // Calculate centered horizontal positions
        let screenWidth = UIScreen.main.bounds.width
        let totalWordWidth = imgLetterA.frame.width + imgLetterP.frame.width
        let startX = (screenWidth - totalWordWidth) / 2

        imgLetterA.center.x = startX + imgLetterA.frame.width/2
        imgLetterP.center.x = startX + imgLetterA.frame.width + imgLetterP.frame.width/2
        // Set positions for other images
    }

    private func startAnimationSequence() {
        let screenCenterY = UIScreen.main.bounds.height / 2

        // Animate first image
        UIView.animate(withDuration: 0.6) {
            self.imgLetterA.center.y = screenCenterY
        } completion: { _ in
            // Animate second image after first finishes
            UIView.animate(withDuration: 0.6) {
                self.imgLetterP.center.y = screenCenterY
            } completion: { _ in
                // Navigate to main view controller
                guard let mainVC = self.storyboard?.instantiateViewController(withIdentifier: "MainVC") else { return }
                self.navigationController?.pushViewController(mainVC, animated: true)
            }
        }
    }
}

• Adjust the duration value to make the animation faster or slower based on your preference
• Add a small delay to subsequent animations (instead of waiting for the previous one to finish fully) for a more fluid "follow" effect
• Test on different screen sizes to ensure the word stays centered and images don't overlap

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