twitter点赞图标分析

目录：[top]

图标

玩过twitter的同学都知道点赞的时候会有一个动态的爱心的变化。如下图：



其步骤如下：

因此，我们把其步骤变成三步：初始灰色爱心—>点赞同心圆动画播放—>红色爱心静态图—>再次赞变成灰色爱心

技术选择：H5的canvas绘图+javascript的事件监听+setTimeout

画爱心

知识提要：

arc画圆的时候需要注意：

1，(centerX[圆心横坐标，以父节点的右上角为坐标原点，向左向下建立坐标轴],centerY,r[半径], startAngle[起始点的角度。起始以（1，0）表示0，（0，1）表示3/2*PI计算。当设置为逆时针的时候画出来是起点到终点之间的扇形出去中心三角], endAngle,anticlockwise（是否逆时针）)

如下图。



此原理可以用来切图

2，这个爱心。可以分为上下两部。上面的一半是两个相交的小圆，下面一半是两个相交的大圆。圆的具体形式请看如下代码

function love(color,centerX,centerY,size){
ctx.beginPath();
//上半部
var smallRadius=Math.round(centerX/size);//小圆的半径
var smallMoveLen=smallRadius*Math.sqrt(3)/2;
ctx.fillStyle=color||"red";
ctx.arc(centerX-smallMoveLen,centerY,smallRadius,Math.PI*7/4,Math.PI,true);
ctx.arc(centerX+smallMoveLen,centerY,smallRadius,0,Math.PI*5/4,true);
//下半部
var bigRadius=smallRadius*2.73;
ctx.arc(centerX+smallMoveLen,centerY,bigRadius,Math.PI,Math.PI*0.6,true);
ctx.arc(centerX-smallMoveLen,centerY,bigRadius,Math.PI*0.4,0,true);
ctx.fill();
ctx.closePath();
}

封装一个爱心的图片，可以为其自定义颜色color，中心坐标center，大小size(size约大其越小，作为除数)

初始灰色爱心

love("grey",centerX,centerY,8);//这里设置的圆心大小为8分之一

注册监听

canvas.addEventListener("click",animationFunction(),false);

冒泡

判断当前操作

判断是取消赞还是点赞

if(ctx.fillStyle=="#808080"){//表示为灰色
//执行下面的动画
}else if(ctx.fillStyle=="#ff0000"){//表示为红色
ctx.fillStyle="#ff0000";
love("#808080",centerX,centerY,8);
}

一圈一圈的同心圆

setTimeout(function () {
ctx.beginPath();//不能和前面的图形混在一起了
ctx.fillStyle="#FF6BDB";
ctx.arc(centerX,centerY,smallRadius,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();//必须要提笔。不然和前面一只笔相当于没提起来
},100);

爱心冒出

setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2);
ctx.beginPath();
ctx.fillStyle="#FF84A6";
ctx.arc(centerX,centerY,bigRadius,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle="#ffffff";
ctx.arc(centerX,centerY,midRadius*2,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
love("purple",centerX,centerY,16);
ctx.closePath();
},400);

四周的小气泡

setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2);
var e=bigRadius/(Math.sqrt(2));
var centerXArr=[centerX-bigRadius,centerX-e,centerX,centerX+e,centerX+bigRadius,centerX+e,centerX,centerX-e];
var centerYArr=[centerY,centerY-e,centerY-bigRadius,centerY-e,centerY,centerY+e,centerY+bigRadius,centerY+e];//两个数组，存放这四周八个气泡的横纵坐标
for(var i=0;i<8;i++){
ctx.beginPath();
ctx.fillStyle="blue";
ctx.arc(centerXArr[i],centerYArr[i],smallRadius/4,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
}
ctx.fillStyle="#ff0000";
love("ff0000",centerX,centerY,8);//red
},500);

变成红色爱心

ctx.clearRect(0,0,centerX*2,centerY*2);//这里要清除之前的图形，避免干扰
ctx.beginPath();//
love("ff0000",centerX,centerY,8);
ctx.closePath();

总结改进

1，arc的几个参数的使用

2，ctx.beginPath()/closePath()的目的。防止不提笔导致比划混乱（画同心圆的时候反而可以利用这一点来简化同心圆）

3，clearRect的用法

4，画图之前对每个角度长度的计算

5，流式布局。当需要缩小图片的时候只需要改变其width和height。其他的长度等度量均使用百分比或角度

6，兼容性代码如事件监听等

需要下载完整代码，请 转到我的git上fork下来。

https://github.com/zyd317/demo-funny/blob/master/twitterLove.html