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

新手村程序猿&

已于 2024-08-08 17:09:16 修改

阅读量231

点赞数 8

文章标签：前端 vue.js javascript

于 2024-08-08 15:10:37 首次发布

本文链接：https://blog.csdn.net/wj0712/article/details/141027651

版权

已经熟悉了 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>