? ? ? ? 還是一個編程初學者時，我懷著激動的心情完成了人生第一個開源項目——一個用HTML5 Canvas制作的動態跳動愛心效果。這個項目雖然簡單，卻讓我深刻體會到了開源分享的快樂和技術創造的魅力。

壹、項目靈感

????????這個項目的靈感來源于瀏覽網頁時，被各種愛心動畫吸引，于是決定用代碼實現一個美觀又簡單的愛心效果。

貳、基礎環境要求?

• 現代瀏覽器（Chrome/Firefox/Edge最新版）

• 文本編輯器（VS Code/Sublime等）

• 本地服務器（可用VS Code的Live Server插件）

叁、技術實現

????????項目主要使用了以下技術：

1. ?HTML5 Canvas?：作為動畫渲染的核心
2. ?JavaScript粒子系統?：通過500個粒子構成愛心形狀
3. ?CSS動畫?：添加了輕微的縮放和旋轉效果

????????核心代碼實現了：

• 粒子初始化和管理（Particle類）
• 愛心數學建模（pointOnHeart函數）
• 平滑動畫渲染（requestAnimationFrame）

愛心動畫實現流程?

1. ?Canvas初始化?
2. ?粒子系統創建?
3. ?愛心路徑數學建模?
4. ?粒子運動計算?
5. ?逐幀渲染

?關鍵參數配置說明

// settings對象可調整參數：
particles: {length: 500,      // 粒子數量（建議300-1000）duration: 2,      // 動畫周期（秒）velocity: 100,    // 粒子速度effect: -0.75,    // 運動曲線（-1~1之間調節）size: 30          // 粒子基礎大小
}

JavaScript實現二維點/向量類?

? ? ? ? 代碼介紹：

1. 構造函數：初始化點的x,y坐標，默認值為0
2. clone()方法：創建當前點的深拷貝副本
3. length()方法：
   • 無參數時：計算點到原點的距離(向量長度)
   • 有參數時：將向量標準化并縮放到指定長度
4. normalize()方法：將向量標準化為單位向量(長度為1)

    var Point = (function () {function Point(x, y) {this.x = typeof x !== "undefined" ? x : 0;this.y = typeof y !== "undefined" ? y : 0;}Point.prototype.clone = function () {return new Point(this.x, this.y);};Point.prototype.length = function (length) {if (typeof length == "undefined")return Math.sqrt(this.x * this.x + this.y * this.y);this.normalize();this.x *= length;this.y *= length;return this;};Point.prototype.normalize = function () {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;})();

JavaScript實現粒子系統類，用于創建和控制粒子動畫效果：

?構造函數?：

• 初始化粒子的位置(position)、速度(velocity)、加速度(acceleration)和生命周期(age)屬性
• 使用之前定義的Point類來存儲向量數據

?initialize方法?：

• 設置粒子的初始位置(x,y)和初始速度(dx,dy)
• 根據初始速度和settings.particles.effect計算加速度
• 重置生命周期計數器

?update方法?：

• 根據時間增量(deltaTime)更新粒子狀態
• 使用歐拉積分計算新位置：position += velocity * deltaTime
• 更新速度：velocity += acceleration * deltaTime
• 增加生命周期計數器

?draw方法?：

• 使用緩動函數ease(t)實現平滑的尺寸變化效果
• 根據生命周期計算粒子大小和透明度
• 在Canvas上繪制粒子圖像，并自動居中

 var Particle = (function () {function Particle() {this.position = new Point();this.velocity = new Point();this.acceleration = new Point();this.age = 0;}Particle.prototype.initialize = function (x, y, dx, dy) {this.position.x = x;this.position.y = y;this.velocity.x = dx;this.velocity.y = dy;this.acceleration.x = dx * settings.particles.effect;this.acceleration.y = dy * settings.particles.effect;this.age = 0;};Particle.prototype.update = function (deltaTime) {this.position.x += this.velocity.x * deltaTime;this.position.y += this.velocity.y * deltaTime;this.velocity.x += this.acceleration.x * deltaTime;this.velocity.y += this.acceleration.y * deltaTime;this.age += deltaTime;};Particle.prototype.draw = function (context, image) {function ease(t) {return --t * t * t + 1;}var size = image.width * ease(this.age / settings.particles.duration);context.globalAlpha = 1 - this.age / settings.particles.duration;context.drawImage(image,this.position.x - size / 2,this.position.y - size / 2,size,size);};return Particle;})();

肆、項目特色

1. ?高度可定制?：

? ? ? ? ?可修改粒子數量、大小和顏色

1. ?響應式設計?：

   • 自動適應不同屏幕尺寸

   • 粒子速度會根據設備性能自動調整

2. ?輕量級?：

   • 僅依賴jQuery庫

   • 壓縮后代碼不到100KB

伍、自定義開發步驟

修改愛心顏色

?
修改CSS中的#dc4b61色值：

• Canvas填充色（第246行）

• 文字顏色（.text_box類）

陸、快速啟動?

????????直接雙擊index.html在瀏覽器打開

柒、開源地址

????????通過這個項目，我學會了：

• 如何組織一個完整的Web項目
• 使用Git進行版本控制
• 編寫清晰的文檔說明
• 處理來自社區的issue和PR

項目地址：?GitCode - 全球開發者的開源社區,開源代碼托管平臺

捌、結尾

????????這個小小的愛心項目是我開源之路的起點，它讓我相信：再小的創意，通過開源的力量也能綻放光彩。期待未來能創造出更多有價值的開源作品！

玖、彩蛋

熱力全開！今日中伏?