Android 浪漫桃心

最新推荐文章于 2022-01-21 12:13:48 发布

转载最新推荐文章于 2022-01-21 12:13:48 发布 · 912 阅读

文章标签：

#前端 #android #界面

美工同时被 2 个专栏收录

8 篇文章

订阅专栏

android

1 篇文章

订阅专栏

几年前，看到过有个牛人用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 / Math.PI);
  float x = (float) (19.5 * (16 * Math.pow(Math.sin(t), 3)));
  float y = (float) (-20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(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.drawPoint(p.x, p.y, paint);
           angle = angle + 0.02f;
        }
   }

运行结果如下：