七夕將至，來個應(yīng)景的愛心萬花筒。

效果圖：

Kaleidoscope2.gif

項(xiàng)目地址：https://github.com/xionghg/AnimatorTest

使用簡單，無侵入，提供一個 Activity 或者 FrameLayout 即可：

    // 簡單做法：
    Kaleidoscope.with(Activity activity).start();
    // or:
    Kaleidoscope.with(FrameLayout frameLayout).start();

    // 自定義做法：
    Kaleidoscope.with(Activity activity)
            .total(/*愛心數(shù)量，默認(rèn)100*/)
            .duration(/*總持續(xù)時間，默認(rèn)5000ms*/)
            .singleDuration(/*單個愛心動畫時間，默認(rèn)1200ms*/)
            .sizeRule(/*愛心大小Rule，默認(rèn)52dp*/)
            .colorRule(Kaleidoscope.RandomColorRule() /*愛心顏色Rule，提供一個隨機(jī)顏色Rule*/)
            .start();

原理：一個自定義View（HeartView.java）負(fù)責(zé)繪制愛心，一個動畫控制類（Kaleidoscope.java）負(fù)責(zé)所有愛心的運(yùn)動軌跡。

HeartView.java主要邏輯：

    private static final float CENTER_TOP_Y_RATE = 0.3f;    // 中間頂部比例
    private static final float MOST_WIDTH_RATE = 0.49f;     // 心形一半most寬度
    private static final float LINE_WIDTH_RATE = 0.35f;     // 左右邊線寬度比例
    private static final float K_1 = 1.14f;                 // 左右邊線斜率
    private static final float K_2 = 0.80f;                 // 頂部圓球曲率

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        int left = getPaddingLeft();
        int top = getPaddingTop();
        int right = w - getPaddingRight();
        int bottom = h - getPaddingBottom();

        if (left < right && top < bottom) {
            final float width = right - left;
            final float height = bottom - top;

            heartCenterX = left + width * 0.5f;                             // 心形垂直中心線x坐標(biāo)
            heartCenterTopY = top + height * CENTER_TOP_Y_RATE;             // 心形垂直中心線頂點(diǎn)y坐標(biāo)
            heartCenterBottomY = top + height * 0.99f;                      // 心形垂直中心線低點(diǎn)y坐標(biāo)
            leftmostX = heartCenterX - width * MOST_WIDTH_RATE;             // 心形極左點(diǎn)x坐標(biāo)
            rightmostX = heartCenterX + width * MOST_WIDTH_RATE;            // 心形極右點(diǎn)x坐標(biāo)
            lineLeftX = heartCenterX - width * LINE_WIDTH_RATE;             // 心形左邊線最高點(diǎn)x坐標(biāo)
            lineRightX = heartCenterX + width * LINE_WIDTH_RATE;            // 心形右邊線最高點(diǎn)x坐標(biāo)
            lineTopY = heartCenterBottomY - K_1 * LINE_WIDTH_RATE * height; // 心形左右邊線最高點(diǎn)y坐標(biāo)
            quadY1 = heartCenterBottomY - K_1 * MOST_WIDTH_RATE * height;   // 心形極左點(diǎn)二次貝塞爾曲線參照點(diǎn)y坐標(biāo)
            quadY2 = heartCenterTopY - K_2 * MOST_WIDTH_RATE * height;      // 心形最高點(diǎn)三次貝塞爾曲線參照點(diǎn)y坐標(biāo)
        } else {
            heartCenterX = 0;
        }
    }

    private void drawHeart(Canvas canvas) {
        if (heartCenterX <= 0) {
            return;
        }
        paint.setColor(heartColor);
        path.reset();

        path.moveTo(heartCenterX, heartCenterBottomY);                                          // 移至垂直中心線最低點(diǎn)
        path.lineTo(lineLeftX, lineTopY);                                                       // 畫線至左邊線最高點(diǎn)
        path.quadTo(leftmostX, quadY1, leftmostX, heartCenterTopY);                             // 二次貝塞爾曲線至極左點(diǎn)

        path.cubicTo(leftmostX, quadY2, heartCenterX, quadY2, heartCenterX, heartCenterTopY);   // 三次貝塞爾曲線至垂直中心線最高點(diǎn)
        path.cubicTo(heartCenterX, quadY2, rightmostX, quadY2, rightmostX, heartCenterTopY);    // 三次貝塞爾曲線至極右點(diǎn)

        path.quadTo(rightmostX, quadY1, lineRightX, lineTopY);                                  // 二次貝塞爾曲線至右邊線最高點(diǎn)
        path.lineTo(heartCenterX, heartCenterBottomY);                                          // 畫線至垂直中心線最低點(diǎn)，收工

        canvas.drawPath(path, paint);
    }

Kaleidoscope.java 主要邏輯：

    private FrameLayout container;
    private ArrayList<ObjectAnimator> runningAnimators = new ArrayList<>();
    private LinkedList<Pair<HeartView, Path>> pairPool = new LinkedList<>();

    // 獲取下一個需要顯示的 HeartView 實(shí)例及其運(yùn)動軌跡 Path 實(shí)例（二者結(jié)對緩存，可大大減少需要添加到 container 的子View數(shù)量）
    private Pair<HeartView, Path> getViewPathPair(int current) {
        Pair<HeartView, Path> pair;
        if (pairPool.isEmpty()) {
            HeartView heartView = new HeartView(container.getContext());
            newViewAmount++;
            container.addView(heartView);
            pair = new Pair<>(heartView, new Path());
        } else {
            pair = pairPool.pop();
            pair.first.setTranslationX(0);
            pair.first.setTranslationY(0);
            pair.second.reset();
        }
        log("total=" + total + ", current=" + (current + 1) + ", newViewAmount=" + newViewAmount);
        FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) pair.first.getLayoutParams();
        lp.gravity = Gravity.BOTTOM;
        int halfHeart = dip2px(sizeRule.getSizeInDp(current)) / 2;
        lp.width = halfHeart * 2;
        lp.height = halfHeart * 2;
        int x1 = new Random().nextInt(dip2px(200)) + containerArea.width() / 2 - halfHeart - dip2px(100);   // 出現(xiàn)位置x坐標(biāo)隨機(jī)
        lp.leftMargin = x1;
        lp.bottomMargin = -halfHeart;
        pair.first.setLayoutParams(lp);
        pair.first.setHeartColor(colorRule.getColor(current));

        int y1 = -4 * halfHeart;
        int x2 = new Random().nextInt(containerArea.width() * 3) - containerArea.width();                   // 飛出位置參考點(diǎn)x坐標(biāo)隨機(jī)
        pair.second.moveTo(x1, containerArea.bottom - halfHeart);
        pair.second.quadTo(x1, y1, x2, y1);
        return pair;
    }

    private void showNextView(long delay) {
        final Pair<HeartView, Path> pair = getViewPathPair(current++);
        final HeartView heartView = pair.first;
        final Path path = pair.second;
        heartView.setVisibility(View.GONE);

        ObjectAnimator animator = ObjectAnimator.ofFloat(heartView, View.X, View.Y, path).setDuration(singleDuration);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.setStartDelay(delay);

        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                heartView.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                runningAnimators.remove(animator);
                pairPool.push(pair);
                if (isPendingStop && runningAnimators.isEmpty()) {
                    removeAllViews();
                }
            }
        });

        animator.start();
        runningAnimators.add(animator);
    }

詳細(xì)邏輯可拉下項(xiàng)目查看，歡迎大家討論。