目录
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.star
starArr.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=10
for(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>
