Android 實現「情侶空間」愛心飄落動畫：隨機貼圖 + 坐標漂移核心思路

效果拆解

畫面持續生成小愛心圖片，從頂部隨機 X 位置飄落，過程中伴隨左右搖擺、旋轉、縮放、透明度漸變，落地或超出屏幕後回收複用。

核心實現方案

方案一：自定義 View + ValueAnimator（最輕量）

public class FallingHeartsView extends View {
    private final List hearts = new ArrayList<>();
    private final Random rnd = new Random();
    private final ValueAnimator animator = ValueAnimator.ofFloat(0, 1).setDuration(16); // 60fps

    public FallingHeartsView(Context ctx) { super(ctx); init(); }

    private void init() {
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.addUpdateListener(a -> {
            updateHearts();
            invalidate();
        });
        animator.start();
    }

    private void updateHearts() {
        // 1. 概率生成新愛心
        if (rnd.nextFloat() < 0.05f) hearts.add(new Heart(getWidth()));
        // 2. 更新現有愛心
        Iterator it = hearts.iterator();
        while (it.hasNext()) {
            Heart h = it.next();
            h.y += h.speedY;
            h.x += Math.sin(h.angle) * h.swing; // 左右搖擺
            h.angle += 0.05f;
            h.scale -= 0.001f; // 逐漸縮小
            h.alpha -= 5;      // 逐漸透明
            if (h.y > getHeight() || h.alpha <= 0) it.remove();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        for (Heart h : hearts) {
            if (h.alpha > 0) {
                canvas.save();
                canvas.translate(h.x, h.y);
                canvas.rotate(h.angle * 180 / (float)Math.PI);
                canvas.scale(h.scale, h.scale);
                paint.setAlpha(h.alpha);
                canvas.drawBitmap(heartBitmap, -heartBitmap.getWidth()/2f, -heartBitmap.getHeight()/2f, paint);
                canvas.restore();
            }
        }
    }

    static class Heart {
        float x, y, speedY, swing, angle, scale = 1f;
        int alpha = 255;
        Heart(int width) {
            x = rnd.nextInt(width);
            y = -50;
            speedY = 3 + rnd.nextFloat() * 4;
            swing = 1 + rnd.nextFloat() * 2;
        }
    }
}

方案二：Canvas + 粒子系統庫（如 ParticleSystem / Leonids）

引入現成庫，幾行代碼配置發射器、重力、顏色漸變，適合快速交付。

方案三：Lottie / After Effects 動畫

• 設計師用 AE 製作愛心飄落動畫，導出 .json；
• App 集成 LottieAnimationView，setRepeatCount(-1) 循環播放；
• 優勢：視覺效果極佳、無需寫動畫邏輯；劣勢：包體積增大、動態參數調整受限。

性能優化關鍵

• 對象池複用 Heart，避免頻繁 GC；
• 位圖共享：全局單例 heartBitmap，不在 onDraw 解碼；
• 剔除不可见：超出屏幕或透明度為 0 立即回收；
• 控制幀率：30fps 足夠流暢，降低 CPU/GPU 負載。