0


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

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

xuehua

<!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>

本文转载自: https://blog.csdn.net/wj0712/article/details/141027651
版权归原作者 新手村程序猿& 所有, 如有侵权,请联系我们删除。

“前端已经学会vue,做粒子效果”的评论:

还没有评论