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

效果图：

Kaleidoscope2.gif

使用简单，无侵入，提供一个 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);

}

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