七夕将至，来个应景的爱心万花筒。
效果图：
Kaleidoscope2.gif
项目地址：https://github.com/xionghg/AnimatorTest
使用简单，无侵入，提供一个 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);
}
详细逻辑可拉下项目查看，欢迎大家讨论。
网友评论