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

效果图：

项目地址：github.com/xionghg/Ani…

使用简单，无侵入，提供一个 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;                 // 顶部圆球曲率@Overrideprotected 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() {@Overridepublic void onAnimationStart(Animator animation) {heartView.setVisibility(View.VISIBLE);}@Overridepublic void onAnimationEnd(Animator animation) {runningAnimators.remove(animator);pairPool.push(pair);if (isPendingStop && runningAnimators.isEmpty()) {removeAllViews();}}});animator.start();runningAnimators.add(animator);}
复制代码

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