Android 爱心万花筒简单实现-白红宇

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

效果图：

项目地址：

使用简单，无侵入，提供一个 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
    
      runningAnimators = new ArrayList<>();    private LinkedList
     
      
       > pairPool = new LinkedList<>();    // 获取下一个需要显示的 HeartView 实例及其运动轨迹 Path 实例（二者结对缓存，可大大减少需要添加到 container 的子View数量）    private Pair
       
         getViewPathPair(int current) {        Pair
        
          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
         
           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); }复制代码

详细逻辑可拉下项目查看，欢迎大家讨论。