前端已经学会vue，做粒子效果
目录
1. Canvas API
2. WebGL
3. 粒子系统
4. 动画与性能优化
5. 现有库和框架
6. Vue 组件和状态管理
实践项目建议
案例1
案例2雪花
已经熟悉了 Vue、TypeScript 和 JavaScript，下面是一些你可以学习的内容，以帮助你实现粒子效果的界面：
1. Canvas API
- 学习内容：了解如何使用 Canvas API 进行 2D 图形绘制。掌握如何绘制形状、处理图像、以及在 Canvas 上执行动画。
- 参考资源：MDN Web Docs 上的 Canvas API 文档。
2. WebGL
- 学习内容：WebGL 允许你在浏览器中绘制 3D 图形。你可以使用它来创建更复杂的粒子效果。了解基本的 WebGL 操作、着色器编程（GLSL）、和渲染管线。
- 参考资源：MDN Web Docs 上的 WebGL 文档 和《WebGL 编程指南》。
3. 粒子系统
- 学习内容：研究如何实现粒子系统，包括粒子的生成、生命周期管理、运动和碰撞检测。了解常用的粒子系统设计模式和优化技巧。
- 参考资源：可以参考有关粒子系统的教程或文章，如 Particle Systems for Game Programmers 。
4. 动画与性能优化
- 学习内容：掌握如何使用
requestAnimationFrame进行流畅的动画，以及如何优化动画性能，特别是当处理大量粒子时。 - 参考资源：MDN Web Docs 上的 requestAnimationFrame 文档和有关性能优化的最佳实践。
5. 现有库和框架
- 学习内容：了解一些流行的粒子效果库，这些库可以简化你的开发工作。例如，
three.js（一个基于 WebGL 的 3D 渲染库）或particles.js（一个轻量级的粒子系统库）。 - 参考资源：
- Three.js 文档
- Particles.js GitHub 页面
6. Vue 组件和状态管理
- 学习内容：了解如何将粒子效果集成到 Vue 组件中。研究如何使用 Vue 的生命周期钩子来初始化和更新粒子效果，并与 Vue 的状态管理工具（如 Vuex）配合使用。
- 参考资源：Vue 的官方文档和一些示例项目可以提供有用的指导。
实践项目建议
- 小项目：创建一个简单的粒子效果（如烟雾或雨滴），以测试和巩固你的知识。
- 集成到 Vue 应用：将粒子效果集成到一个 Vue 应用中，作为一个组件来进行展示和交互。
这些学习内容将帮助你有效地实现粒子效果，并将其整合到你的 Vue 项目中。
案例1
效果：
<template><div class="about"><div class="stars"><div v-for="(item,index) in starsCount" :key="index" class="star" ref="star"></div></div><div style="background-color: #f7f7b6;margin-top: 20px;width: 100px">这里方自己写的东西</div></div></template>
<script>
export default {data(){return{starsCount:1000,//星星数量distance:800//间距}},mounted(){let starArr = this.$refs.starstarArr.forEach(item => {var speed = 0.2 + (Math.random() * 1);var thisDistance = this.distance + (Math.random() * 300);item.style.transformOrigin = `0 0 ${thisDistance}px`;item.style.transform = `
translate3d(0,0,-${thisDistance}px)
rotateY(${Math.random() * 360}deg)
rotateX(${Math.random() * -50}deg)
scale(${speed},${speed})`;})}}</script>
<style>
.about {margin: 0px; /*// 去除外边距*/width: 100%; /*// 宽度占满容器*/height: 100vh; /*// 高度占满视窗高度*/background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92,#1b2947);/* 第一个渐变背景，200% 100%定义了椭圆形状，起点在容器底部中心 */background: radial-gradient(220% 105% at top center, #1b2947 10%,#75517d 40%,#e96f92 ,#f7f7b6);/* 第二个渐变背景覆盖第一个，从顶部中心开始，不同颜色在不同位置 */background-attachment: fixed; /*// 背景固定，滚动时背景不动*/overflow: hidden;/* // 隐藏超出容器部分的内容*/
}@keyframes rotate {0% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); }100% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); }/* 定义了一个名为rotate的动画，从0%到100%完成一周的Y轴旋转 */
}
.stars {transform: perspective(500px); /*// 设置3D透视点*/transform-style: preserve-3d; /*// 保持子元素的3D位置*/position: absolute; /*// 绝对定位*/perspective-origin: 50% 100%;/* // 透视原点位于容器的底部中心*/left: 50%; /*// 水平居中*/animation: rotate 200s infinite linear;/* // 应用rotate动画，无限循环，持续90秒，速度均匀*/
bottom: 0;
}
.star {width: 4px; /*// 宽度为2像素*/height: 4px; /*// 高度为2像素*/background: #f7f7b8; /*// 背景颜色为浅黄色*/position: absolute; /*// 绝对定位*/top: 0; /*// 顶部对齐*/left: 0; /*// 左侧对齐*/backface-visibility: hidden; /*// 背面不可见，用于3D旋转时*/
}
</style>案例2雪花
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>雪花</title><style>*{margin: 0;padding: 0;}body{background-image: url(./images/beijin.png);background-size: cover;}</style>
</head>
<body><canvas></canvas><script>let canvas=document.querySelector('canvas');let context =canvas.getContext('2d');let w=window.innerWidth;let h=window.innerHeight;canvas.width=w;canvas.height=h;let num=200;let snows=[];for(let i=0;i<num;i++){snows.push({x:Math.random()*w,y:Math.random()*h,r:Math.random()*10+1})}
let move=()=>{for(let i=0;i<num;i++){let snow=snows[i];snow.x+=Math.random()*2+1;snow.y+=Math.random()*2+1;if(snow.x>w){snow.x=0} if(snow.y>h){snow.y=0}}}let draw=()=>{context.clearRect(0,0,w,h);context.beginPath();context.fillStyle='rgb(255,255,255)';context.shadowColor='rgb(255,255,255)';context.shadowBlur=10for(let i=0;i<num;i++){let snow=snows[i];context.moveTo(snow.x,snow.y);context.arc(snow.x,snow.y,snow.r,0,Math.PI*2)}context.fill();context.closePath();move();}setInterval(draw,30)</script>
</body>
</html>