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