作者：huachao1001
博客：
亚德阿伯丁，你知道今天是什么日子吗？
嘿嘿~当然了！5.2.0~。
哟~这个我也知道！
那个~ ~可以给你一段节目！
看好了！
几年前，我看到一个小人用HTML5画了一部浪漫爱情告白动画(HTML5链接原文确认~)，原来程序员也可能波涛汹涌。一万。的。
那么在Android上怎么样才能达到这样的效果呢？参考前面的HTML5算法，在Android上也取得了类似的效果。
（似不似很腻害）先贴上最终效果图：
生成心形线
心形线的表达式可以参考：桃心线。里面对桃心线的表达式解析的挺好。可以通过使用极坐标的方式，传入角度和距离（常量）计算出对应的坐标点。其中距离是常量值，不需改变，变化的是角度。
桃心线极坐标方程式为：
x = 16×sin3αy = 13×cosα − 5×cos2α − 2×cos3α − cos4α
如果生成的桃心线不够大，可以吧x、y乘以一个常数，使之变大。考虑到大部分人都不愿去研究具体的数学问题，我们直接把前面HTML5的JS代码直接翻译成Java代码就好。代码如下：
public Point getHeartPoint(float angle) {
float t = (float) (angle / Ma);
float x = (float) * (16 * Ma(t), 3)));
float y = (float) (-20 * (13 * Ma(t) - 5 * Ma(2 * t) - 2 * Ma(3 * t) - Ma(4 * t)));
return new Point(offsetX + (int) x, offsetY + (int) y);
}其中offsetX和offsetY是偏移量。使用偏移量主要是为了能让心形线处于中央。offsetX和offsetY的值分别为：
offsetX = width / 2;
offsetY = height / 2 - 55;通过这个函数，我们可以将角度从（0,180）变化，不断取点并画点将这个心形线显示出来。好了，我们自定义一个View，然后把这个心形线画出来吧！
@Override
protected void onDraw(canvas Canvas) {
float angle = 10;
while (angle < 180) {
Point p = getHeartPoint(angle);
canvas.drawPoin, p.y, paint);
angle = angle + 0.02f;
}
}运行结果如下：
绘制花瓣原理
我们想要的并不是简单绘制一个桃心线，要的是将花朵在桃心线上摆放。
首先，得要知道怎么绘制花朵，而花朵是由一个个花瓣组成。因此绘制花朵的核心是绘制花瓣。
绘制花瓣的原理是：3次贝塞尔曲线。三次贝塞尔曲线是由两个端点和两个控制点决定。
假设花芯是一个圆，有n个花瓣，那么两个端点与花芯的圆心连线之间的夹角即为360/n。因此可以根据花瓣数量和花芯半径确定每个花瓣的位置。将两个端点与花芯的圆心连线的延长线分别确定另外两个控制点。通过随机生成花芯半径、每个花瓣的起始角以及随机确定延长线得到两个控制点，可以绘制一个随机的花朵。
参数的改变如下图所示：
将花朵绘制到桃心线上
一大波代码来袭
首先定义花瓣类Petal：
package com.;
import android.gra;
import android.gra;
import android.gra;
/**
* Package com.exam
* Created by HuaChao on 2016/5/25.
*/
public class Petal {
private float stretchA;//第一个控制点延长线倍数
private float stretchB;//第二个控制点延长线倍数
private float startAngle;//起始旋转角，用于确定第一个端点
private float angle;//两条线之间夹角，由起始旋转角和夹角可以确定第二个端点
private int radius = 2;//花芯的半径
private float growFactor;//增长因子，花瓣是有开放的动画效果，这个参数决定花瓣展开速度
private int color;//花瓣颜色
private boolean isFinished = false;//花瓣是否绽放完成
private Path path = new Path;//用于保存三次贝塞尔曲线
private Paint paint = new Paint;//画笔
//构造函数，由花朵类调用
public Petal(float stretchA, float stretchB, float startAngle, float angle, int color, float growFactor) {
= stretchA;
= stretchB;
= startAngle;
= angle;
= color;
= growFactor;
(color);
}
//用于渲染花瓣，通过不断更改半径使得花瓣越来越大
public void render(Point p, int radius, Canvas canvas) {
if <= radius) {
+= growFactor; // / 10;
} else {
isFinished = true;
}
(p, canvas);
}
//绘制花瓣，参数p是花芯的圆心的坐标
private void draw(Point p, Canvas canvas) {
if (!isFinished) {
path = new Path;
//将向量（0，radius）旋转起始角度，第一个控制点根据这个旋转后的向量计算
Point t = new Point(0, ).rotate());
//第一个端点，为了保证圆心不会随着radius增大而变大这里固定为3
Point v1 = new Point(0, 3).rotate());
//第二个端点
Point v2 = t.clone.rotate());
//延长线，分别确定两个控制点
Point v3 = t.clone.mult();
Point v4 = v2.clone.mult();
//由于圆心在p点，因此，每个点要加圆心坐标点
v1.add(p);
v2.add(p);
v3.add(p);
v4.add(p);
, v1.y);
//参数分别是：第一个控制点，第二个控制点，终点
, v3.y, v4.x, v4.y, v2.x, v2.y);
}
canvas.drawPath(path, paint);
}
}花瓣类是最重要的类，因为真正绘制在屏幕上的是一个个小花瓣。每个花朵包含一系列花瓣，花朵类Bloom如下：
package com.;
import android.gra;
import java.u;
/**
* Package com.exam
* Created by HuaChao on 2016/5/25.
*/
public class Bloom {
private int color;
private Point point;
private int radius;
private ArrayList petals;
public Point getPoint {
return point;
}
public Bloom(Point point, int radius, int color, int petalCount) {
= point;
= radius;
= color;
petals = new ArrayList<>(petalCount);
float angle = 360f / petalCount;
int startAngle = MyU(0, 90);
for (int i = 0; i < petalCount; i++) {
float stretchA = MyU, Garden.O);
float stretchB = MyU, Garden.O);
int beginAngle = startAngle + (int) (i * angle);
float growFactor = MyU, Garden.O);
(new Petal(stretchA, stretchB, beginAngle, angle, color, growFactor));
}
}
public void draw(Canvas canvas) {
Petal p;
for (int i = 0; i < ; i++) {
p = (i);
p.render(point, , canvas);
}
}
public int getColor {
return color;
}
}接下来是花园类Garden，主要用于创建花朵以及一些相关配置：
package com.;
import java.u;
/**
* Package com.exam
* Created by HuaChao on 2016/5/24.
*/
public class Garden {
public Bloom createRandomBloom(int x, int y) {
int radius = MyU, O);
int color = MyUrgba, O, O, O, O, O, O);
int petalCount = MyU, O);
return createBloom(x, y, radius, color, petalCount);
}
public Bloom createBloom(int x, int y, int radius, int color, int petalCount) {
return new Bloom(new Point(x, y), radius, color, petalCount);
}
static class Options {
public static int minPetalCount = 8;
public static int maxPetalCount = 15;
public static float minPetalStretch = 2f;
public static float maxPetalStretch = 3.5f;
public static float minGrowFactor = 1f;
public static float maxGrowFactor = 1.1f;
public static int minBloomRadius = 8;
public static int maxBloomRadius = 10;
public static int minRedColor = 128;
public static int maxRedColor = 255;
public static int minGreenColor = 0;
public static int maxGreenColor = 128;
public static int minBlueColor = 0;
public static int maxBlueColor = 128;
public static int opacity = 50;
}
}考虑到刷新的比较频繁，选择使用SurfaceView作为显示视图。
自定义一个HeartView继承SurfaceView。
代码如下：
package com.;
import android.con;
import android.gra;
import android.gra;
import android.gra;
import android.gra;
import android.u;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import java.u;
/**
* Package com.
* Created by HuaChao on 2016/5/25.
*/
public class HeartView extends SurfaceView implements Sur {
SurfaceHolder surfaceHolder;
int offsetX;
int offsetY;
private Garden garden;
private int width;
private int height;
private Paint backgroundPaint;
private boolean isDrawing = false;
private Bitmap bm;
private Canvas canvas;
private int heartRadio = 1;
public HeartView(Context context) {
super(context);
init;
}
public HeartView(Context context, AttributeSet attrs) {
super(context, attrs);
init;
}
private void init {
surfaceHolder = getHolder;
(this);
garden = new Garden;
backgroundPaint = new Paint;
backgroundPaint.setColor(0xff, 0xff, 0xe0));
}
ArrayList blooms = new ArrayList<>;
public Point getHeartPoint(float angle) {
float t = (float) (angle / Ma);
float x = (float) (heartRadio * (16 * Ma(t), 3)));
float y = (float) (-heartRadio * (13 * Ma(t) - 5 * Ma(2 * t) - 2 * Ma(3 * t) - Ma(4 * t)));
return new Point(offsetX + (int) x, offsetY + (int) y);
}
private void drawHeart {
canvas.drawRect(0, 0, width, height, backgroundPaint);
for (Bloom b : blooms) {
b.draw(canvas); } Canvas c = ;
c.drawBitmap(bm, 0, 0, );
(c);
}
public void reDraw {
blooms.clear;
drawOnNewThread;
}
@Override
public void draw(Canvas canvas) {
(canvas);
}
private void drawOnNewThread {
new Thread {
@Override
public void run {
if (isDrawing) return;
isDrawing = true;
float angle = 10;
while (true) {
Bloom bloom = getBloom(angle);
if (bloom != ) {
blooms.add(bloom);
}
if (angle >= 30) {
break;
} else {
angle += 0.2;
}
drawHeart;
try {
sleep(20);
} catch (InterruptedException e) {
e.printStackTrace;
}
}
isDrawing = false;
}
}.start;
}
private Bloom getBloom(float angle) {
Point p = getHeartPoint(angle);
boolean draw = true;
/**循环比较新的坐标位置是否可以创建花朵,
* 为了防止花朵太密集
* */
for (int i = 0; i < blooms.size; i++) {
Bloom b = blooms.get(i);
Point bp = b.getPoint;
float distance = (float) Ma(Ma - bp.x, 2) + Ma - bp.y, 2));
if (distance < Garden.O * 1.5) {
draw = false;
break;
}
}
if (draw) {
Bloom bloom = garden.createRandomBloom, p.y);
return bloom;
}
return ;
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
= width;
= height;
heartRadio = width * 30 / 1080;
offsetX = width / 2;
offsetY = height / 2 - 55;
bm = Bi(width, height, Bi);
canvas = new Canvas(bm);
drawOnNewThread;
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
}
}还有两个比较重要的工具类
Point.java保存点信息，或者说是向量信息。包含向量的基本运算。
package com.;
/**
* Package com.
* Created by HuaChao on 2016/5/25.
*/
public class Point {
public int x;
public int y;
public Point(int x, int y) {
= x;
= y;
}
public Point rotate(float theta) {
int x = ;
int y = ;
= (int) (Ma(theta) * x - Ma(theta) * y);
= (int) (theta) * x + Ma(theta) * y);
return this;
}
public Point mult(float f) {
*= f;
*= f;
return this;
}
public Point clone {
return new Point(, );
}
public float length {
return (float) Ma( * + * );
}
public Point subtract(Point p) {
-= p.x;
-= p.y;
return this;
}
public Point add(Point p) {
+= p.x;
+= p.y;
return this;
}
public Point set(int x, int y) {
= x;
= y;
return this;
}
}工具类MyU主要是产生随机数、颜色等
package com.;
import android.gra;
/**
* Package com.exam
* Created by HuaChao on 2016/5/25.
*/
public class MyUtil {
public static float circle = (float) (2 * Ma);
public static int rgba(int r, int g, int b, int a) {
return Color.argb(a, r, g, b);
}
public static int randomInt(int min, int max) {
return (int) Ma * (max - min + 1)) + min;
}
public static float random(float min, float max) {
return (float) * (max - min) + min);
}
//产生随机的argb颜色
public static int randomrgba(int rmin, int rmax, int gmin, int gmax, int bmin, int bmax, int a) {
int r = Ma(random(rmin, rmax));
int g = Ma(random(gmin, gmax));
int b = Ma(random(bmin, bmax));
int limit = 5;
if (r - g) <= limit && Ma(g - b) <= limit && Ma(b - r) <= limit) {
return rgba(rmin, rmax, gmin, gmax);
} else {
return rgba(r, g, b, a);
}
}
//角度转弧度
public static float degrad(float angle) {
return circle / 360 * angle;
}
}好了，目前为止，就可以得到上面的效果了。
码仔只能帮你到这里了！
（源码地址请查看原文~）
近期文章：
送三个福利（专属）
今天我把APP的编译速度缩短了近5倍
从XML变成View，它经历了什么？
今日问题：
你有没有写过浪漫的程序？
快来码仔社群解锁新姿势吧！社群升级：Max你的学习效率