我第一次动心Apple的东西。。。

博主分享了对手镯型MP3的喜爱,并提到近期偏爱听孙燕姿的歌曲。此外,还讲述了与好友淳朴深夜聊天的感受,回忆起家人讲述家乡往事所带来的温馨感觉。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一次动心Apple的东西,我是手镯控。。。不过这是手镯型mp3。。。

ibangle.jpg

ibangle2.jpg

孙燕姿不红了吧,新加坡金曲奖都没有她了,奇怪的是,我开始喜欢听她的那些歌。伤心让人不想爱自己,那么也只好,暂时不爱你~~跟心情无关,却很爱这句~~

最近心情没有很sad自然也没有很high,逐渐在适应安静的自己,这样好不好,我也不知道~~改变总是让人觉得有一点的惶恐,感情亦如此~~~

昨晚回家有点晚,一路上淳朴给我讲他家的故事,想起从小到大,最爱听爸爸给我讲老家的事,喜欢靠在奶奶身边听她唠叨村里村外,那种很平淡但是很温暖的描述,心里洋溢着幸福~~

好吧我又想家了,谢谢淳朴,你真的是个很贴心的好朋友~~~

### 实现跳动的心动画代码 实现一个跳动的心形动画,通常需要结合图形绘制、动画更新以及可能的粒子效果。以下是一个基于 HTML5 Canvas 和 JavaScript 的实现示例,展示了如何创建一个跳动的心形动画效果。 #### HTML 结构 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跳动的心</title> <style> body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } </style> </head> <body> <canvas id="heartCanvas"></canvas> <script src="heart.js"></script> </body> </html> ``` #### JavaScript 实现(heart.js) ```javascript const canvas = document.getElementById('heartCanvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 心形路径函数 function heartPath(t, size = 1) { const x = 16 * Math.pow(Math.sin(t), 3); const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); return { x: x * size, y: -y * size }; } // 动画参数 let time = 0; const particles = []; // 创建粒子 function createParticles(x, y) { for (let i = 0; i < 50; i++) { particles.push({ x: x, y: y, vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6, alpha: 1, size: Math.random() * 2 + 1 }); } } // 更新粒子 function updateParticles() { for (let i = 0; i < particles.length; i++) { let p = particles[i]; p.x += p.vx; p.y += p.vy; p.alpha -= 0.02; if (p.alpha <= 0) { particles.splice(i, 1); i--; } } } // 绘制心形 function drawHeart(scale, offsetX, offsetY) { ctx.beginPath(); for (let t = 0; t <= 2 * Math.PI; t += 0.01) { const point = heartPath(t, scale); if (t === 0) { ctx.moveTo(point.x + offsetX, point.y + offsetY); } else { ctx.lineTo(point.x + offsetX, point.y + offsetY); } } ctx.closePath(); ctx.fillStyle = 'red'; ctx.fill(); } // 动画循环 function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 计算跳动效果 const scale = 10 + Math.sin(time) * 2; // 绘制心形 drawHeart(scale, canvas.width / 2, canvas.height / 2); // 创建粒子效果 if (Math.sin(time) > 0.95) { createParticles(canvas.width / 2, canvas.height / 2); } // 更新和绘制粒子 updateParticles(); for (let p of particles) { ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI); ctx.fillStyle = `rgba(255, 255, 255, ${p.alpha})`; ctx.fill(); } time += 0.1; requestAnimationFrame(animate); } animate(); ``` ### 代码解析 1. **Canvas 初始化**:设置全屏画布,用于绘制动画。 2. **心形路径生成**:通过数学公式 `heartPath(t, size)` 生成心形的路径点[^1]。 3. **跳动效果**:通过 `scale` 参数随时间变化模拟跳动效果。 4. **粒子系统**:在心形跳动到最高点时生成粒子,模拟爆炸效果。 5. **动画循环**:使用 `requestAnimationFrame` 实现平滑的动画更新。 ### 扩展功能 - **颜色渐变**:可以使用 `createRadialGradient` 或 `createLinearGradient` 实现更丰富的颜色变化。 - **交互效果**:添加鼠标点击或移动事件,让心形响应用户操作。 - **多心形动画**:在画布上同时绘制多个不同大小、速度的心形。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值