前端已经学会vue,做粒子效果

新手村程序猿& 2024-08-19 14:03:01 阅读 85

目录

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. 动画与性能优化

学习内容:掌握如何使用 <code>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移动星空

效果:

<code><template>

<div class="about">code>

<div class="stars">code>

<div v-for="(item,index) in starsCount" :key="index" class="star" ref="star">code>

</div>

</div>

<div style="background-color: #f7f7b6;margin-top: 20px;width: 100px">这里方自己写的东西</div>code>

</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雪花

xuehua

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<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)';code>

context.shadowColor='rgb(255,255,255)';code>

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>



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。