Android 爱心万花筒简单实现-CSDN博客

七夕将至，来个应景的爱心万花筒。

效果图：

使用简单，无侵入，提供一个 Activity 或者 FrameLayout 即可：

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

    // 自定义做法：
    Kaleidoscope.with(Activity activity)
            .total(/*爱心数量，默认100*/)
            .duration(/*总持续时间，默认5000ms*/)
            .singleDuration(/*单个爱心动画时间，默认1200ms*/)
            .sizeRule(/*爱心大小Rule，默认52dp*/)
            .colorRule(Kaleidoscope.RandomColorRule() /*爱心颜色Rule，提供一个随机颜色Rule*/)
            .start();
复制代码

原理：一个自定义View（HeartView.java）负责绘制爱心，一个动画控制类（Kaleidoscope.java）负责所有爱心的运动轨迹。

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坐标
            heartCenterTopY = top + height * CENTER_TOP_Y_RATE;             // 心形垂直中心线顶点y坐标
            heartCenterBottomY = top + height * 0.99f;                      // 心形垂直中心线低点y坐标
            leftmostX = heartCenterX - width * MOST_WIDTH_RATE;             // 心形极左点x坐标
            rightmostX = heartCenterX + width * MOST_WIDTH_RATE;            // 心形极右点x坐标
            lineLeftX = heartCenterX - width * LINE_WIDTH_RATE;             // 心形左边线最高点x坐标
            lineRightX = heartCenterX + width * LINE_WIDTH_RATE;            // 心形右边线最高点x坐标
            lineTopY = heartCenterBottomY - K_1 * LINE_WIDTH_RATE * height; // 心形左右边线最高点y坐标
            quadY1 = heartCenterBottomY - K_1 * MOST_WIDTH_RATE * height;   // 心形极左点二次贝塞尔曲线参照点y坐标
            quadY2 = heartCenterTopY - K_2 * MOST_WIDTH_RATE * height;      // 心形最高点三次贝塞尔曲线参照点y坐标
        } else {
            heartCenterX = 0;
        }
    }

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

        path.moveTo(heartCenterX, heartCenterBottomY);                                          // 移至垂直中心线最低点
        path.lineTo(lineLeftX, lineTopY);                                                       // 画线至左边线最高点
        path.quadTo(leftmostX, quadY1, leftmostX, heartCenterTopY);                             // 二次贝塞尔曲线至极左点

        path.cubicTo(leftmostX, quadY2, heartCenterX, quadY2, heartCenterX, heartCenterTopY);   // 三次贝塞尔曲线至垂直中心线最高点
        path.cubicTo(heartCenterX, quadY2, rightmostX, quadY2, rightmostX, heartCenterTopY);    // 三次贝塞尔曲线至极右点

        path.quadTo(rightmostX, quadY1, lineRightX, lineTopY);                                  // 二次贝塞尔曲线至右边线最高点
        path.lineTo(heartCenterX, heartCenterBottomY);                                          // 画线至垂直中心线最低点，收工

        canvas.drawPath(path, paint);
    }
复制代码

Kaleidoscope.java 主要逻辑：

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

    // 获取下一个需要显示的 HeartView 实例及其运动轨迹 Path 实例（二者结对缓存，可大大减少需要添加到 container 的子View数量）
    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);   // 出现位置x坐标随机
        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();                   // 飞出位置参考点x坐标随机
        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);
    }
复制代码