当前位置：首页 > news >正文

‌我的第一个开源项目：跃动的心

news 2025/8/2 2:33:21

还是一个编程初学者时，我怀着激动的心情完成了人生第一个开源项目——一个用HTML5 Canvas制作的动态跳动爱心效果。这个项目虽然简单，却让我深刻体会到了开源分享的快乐和技术创造的魅力。

壹、项目灵感

这个项目的灵感来源于浏览网页时，被各种爱心动画吸引，于是决定用代码实现一个美观又简单的爱心效果。

贰、基础环境要求‌

现代浏览器（Chrome/Firefox/Edge最新版）

文本编辑器（VS Code/Sublime等）

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

叁、技术实现

项目主要使用了以下技术：

‌HTML5 Canvas‌：作为动画渲染的核心
‌JavaScript粒子系统‌：通过500个粒子构成爱心形状
‌CSS动画‌：添加了轻微的缩放和旋转效果

核心代码实现了：

粒子初始化和管理（Particle类）
爱心数学建模（pointOnHeart函数）
平滑动画渲染（requestAnimationFrame）

爱心动画实现流程‌

Canvas初始化
粒子系统创建
爱心路径数学建模
粒子运动计算
逐帧渲染

‌关键参数配置说明

// settings对象可调整参数：
particles: {length: 500,      // 粒子数量（建议300-1000）duration: 2,      // 动画周期（秒）velocity: 100,    // 粒子速度effect: -0.75,    // 运动曲线（-1~1之间调节）size: 30          // 粒子基础大小
}

JavaScript实现二维点/向量类

代码介绍：

构造函数：初始化点的x,y坐标，默认值为0
clone()方法：创建当前点的深拷贝副本
length()方法：
无参数时：计算点到原点的距离(向量长度)
有参数时：将向量标准化并缩放到指定长度

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;})();