愛心點擊特效

這次練習的案例是點擊時有愛心跑出來的效果，發表此文章用來記錄練習的心得與筆記!

實際演示請到 demo 裡觀看!!
首先先貼上這次作品的原作者

B站：@VincentTV
Share with you
主页：https://space.bilibili.com/402141442
本视频：https://www.bilibili.com/video/av51351273/

匿名函數

首先 第一個學到的知識點是 :匿名函數

(function(w,d){ // 宣告此匿名 function 會接一個引數
// function 內容
})(window,document); 

等同於
function funcA(arg) {}
funcA(window,document);

因為點擊效果跟整個頁面的window和document息息相關，所以使用匿名函數變得更簡潔

對象鑲嵌數組

整個案例想的最久的其實是能不能不用數組裡儲存對象的方法來控制元素呢?後來字我總結了下這個用法，因為常常不知道何時以及為何要這樣用。

數組鑲嵌著對象就像一個div包裹另一個dㄛv這樣的方式。效果中，愛心是隨著點擊而產生不止一個的，這麼多個愛心不可能另開個空間一個一個此時，’’ 數組 ‘’ 就能個很好的對每個愛心做新增或刪減等動作，而 " 對象 "，可以儲存多個數值就和適合用來控制愛心在DOM方面的問題!!

 function addLike(e) {
 	//do somthing
  moveLike();
  };

函數調用另外個函數

看到這段使用了兩個函數當時非常疑惑的是，除了跟代碼簡潔有關係外，有其他理由需要特別把在另外個函數裡調用另外個函數嗎?答案是肯定的!!

    w.requestAnimationFrame(moveLike);

原因是上面這行代碼。它是讓愛心動起來的關鍵，我們在moveLike裡賦予愛心元素的top，left…移動起來的屬性(利用遞增或遞減)，並且再次把這些賦值給div元素。而這樣的過程藉由requestAnimationFrame()，以每秒60帧刷新，每次刷新就調用一次movelike
這樣就可以讓愛心動起來，但是如果是讓兩個函數放在一起雖然每個元素雖然移動了，但是每次也新增一個愛心，並不是我們要讓 ‘‘一個愛心’’ 移動那樣的效果!!