前端已经学会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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/396063.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

享界S9+问界M9,华为智选车的高端局

作者 |老缅 编辑 |德新 8月6日&#xff0c;鸿蒙智行在北京发布D级纯电旗舰轿车&#xff0c;也是北汽 - 华为智选车合作的第一款车型&#xff0c;享界S9。 享界S9搭载了包括华为乾崑ADS 3.0在内的多项首发技术&#xff0c;全系标配100kWh华为800V巨鲸电池。 而在价格上&#…

记2024-08原生微信小程序开发

继2024.08 最近需要开发一个微信小程序的一个功能模块&#xff0c;但是之前在学的时候都是好几年前的东东了&#xff0c;然后重新快速过了一遍b站大学的教程&#xff0c;这篇文章就是基于教程进行的一些总结&#xff0c;和自己开发过程当中使用到的一些点和一些技巧什么的吧。 …

计算机网络408考研 2019

计算机网络408考研2019年真题解析_哔哩哔哩_bilibili 2019 1 1 1 1

仿RabbiteMq简易消息队列基础篇(gtest的使用)

TOC gtest介绍 gtest是google的一个开源框架&#xff0c;它主要用于写单元测试&#xff0c;检查自己的程序是否符合预期行为。可在多个平台上使用&#xff08;包含Linux&#xff0c;MAC OC&#xff0c;Windows等&#xff09;。它提供了丰富的断言&#xff0c;致命和非致命失败…

Spring Boot 3.x Filter实战:记录请求日志

上一篇&#xff1a;Spring Boot 3.x Web单元测试最佳实践 下一篇&#xff1a;Spring Boot 3.x Web MVC实战&#xff1a;实现流缓存的request 前面我们在《Spring Boot 3.x Rest API最佳实践之统一响应结构》中学习响应的统一拦截处理&#xff0c;顺带完成了响应结果的记录&am…

06:【stm32】OLED模块的简单使用

OLED模块的简单使用 OLED简单的使用 OLED简单的使用 OLED驱动函数是使用B站UP江科大的。我们直接调用即可&#xff0c;是使用软件模拟I2C协议进行通信的。具体的I2C协议可查看上官嵌入式开发中的C51单片机开发。 驱动函数文件&#xff1a;通过百度网盘分享的文件&#xff1a;…

2024 年的 Node.js 生态系统

数据来源于 Node.js Toolbox&#xff0c;网站展示了 Node.js 生态系统中积极维护且流行的库。

【Linux】lvm被删除或者lvm丢失了怎么办

模拟案例 接下来模拟lvm误删除如何恢复的案例&#xff1a; 模拟删除&#xff1a; 查看vg名&#xff1a; vgdisplayvgcfgrestore --list uniontechos #查看之前的操作 例如我删除的&#xff0c;现场没有删除就用最近的操作文件&#xff1a; 还原&#xff1a; vgcfgrestore…

Java实战一 手动创建springboot3+mybatis+mysql工程

idea手动创建sb工程&#xff0c;选择好配置&#xff0c;使用jdk17 main下补全目录resource resource下补全application.yml 引入依赖 &#xff0c;写入父工程 刷新maven 补全配置 创建所需目录 创建User实体类 创建启动类BootDemoApplication 运行启动类成功看到运行在8080端…

#include “ascii_font.c“ 引入源文件,Keil5为什么没有提示重复定义错误,详解!!!

目录 相关原理 Keil编译器规则 重点知识.c文件和.h文件的处理方式和用途 为什么在 example.c文件中需要这条指令#include "example.h" 没有包含会怎么样 配置前提 首先没有提示重复定义.c文件进行报错的前提是&#xff0c;Keil5中没有添加这源文件&#xff…

Linux服务管理(五)Apache服务优化

CustomLog "|/bin/rotatelogs -l /wwwlogs/access_%Y%m%d.log 86400" combined日志旋转可参考这篇文章&#xff1a; https://blog.csdn.net/weixin_43576565/article/details/139989701 要优化首先你得有Apache yum -y install httpd启动 service httpd start写入…

yolov8人脸识别案例

GitHub - wangWEI201901/YOLOv8-Detection-Project: &#x1f6e3;️基于YOLOv8的智慧校园人脸识别和公路汽车检测

5、关于kali搭建vulhub

Vulhub是一个基于Docker和Docker-compose的漏洞靶场环境&#xff0c;所以搭建vulhub分三步&#xff1a; 1、安装docker 2、安装docker-compose 3、安装vulhub 一、安装步骤 1、安装docker 因为kali太久没用&#xff0c;所以需要先更新软件列表最新源 apt-get update 安装do…

DC-DC高压输入30V/10W全桥拓扑结构隔离开关电源专用芯片

概述&#xff1a; PC6703 是一款专门为小体积、低待机功耗的微功率隔离电源而设计的变压器驱动器&#xff0c;其外围只需匹配简单的输入输出滤波电容、隔离变压器和整流电路&#xff0c;即可实现 6~30V 输入电压、多种输出电压、输出功率1 ~10W 的隔离电源。 PC6703 内部集成…

C++11新特性总结

相比于C98/03&#xff0c;C11是C程序设计语言标准的一个新的版本&#xff0c;在2011年由ISO批准并发布。C11新标准从而代替了原来的C98和C03。C11标准是对C的一次巨大的改进和扩充。在核心语法&#xff0c;STL标准模板等方面增加众多新功能&#xff0c;新亮点。C11能够更好地用…

Pinterest:从 Druid 到 StarRocks,实现 6 倍成本效益比提升

导读&#xff1a; 开源无国界&#xff0c;StarRocks 自开源以来&#xff0c;近3年的时间里已在全球数据技术领域崭露头角。我们欣喜地发现&#xff0c;越来越多的海外用户正在使用并积极推广着 StarRocks。为了促进知识共享&#xff0c;StarRocks中文社区将精选优秀文章与大家共…

【知识专栏丨python数分实战】天猫订单数据分析及可视化|taobao天猫订单接口

今天这篇文章将给大家介绍天猫订单数据分析及可视化案例。 import pandas as pdimport numpy as npfrom pyecharts.charts import Pie,Bar,Line,Map,Map3D,Funnelfrom pyecharts import options as optsimport matplotlib.pyplot as pltimport warningsimport seaborn as snsfr…

线性表——数据结构

线性表 文章目录 线性表线性表的定义和基本操作线性表的定义线性表的基本操作 线性表的顺序表示顺序表的定义顺序表的实现——静态分配顺序表的实现——动态分配顺序表的特点 线性表的定义和基本操作 线性表的定义 线性表&#xff08;Linear List&#xff09;的定义 ​ 线性…

LabVIEW电机测试系统

LabVIEW电机测试系统采用共直流母线架构&#xff0c;优化能量循环方式&#xff0c;实现内部能量循环。系统利用高精度仪器与先进软件技术&#xff0c;提供了一个高效、可靠的测试平台&#xff0c;适用于200 kW以下的交流异步电机和永磁同步电机的性能及耐久性测试。 项目背景 …

回归预测|基于麻雀优化深度神经网络的数据回归预测Matlab程序SSA-DNN 多特征输入单输出 含基础深度神经网络DNN

回归预测|基于麻雀优化深度神经网络的数据回归预测Matlab程序SSA-DNN 多特征输入单输出 含基础深度神经网络DNN 文章目录 前言回归预测|基于麻雀优化深度神经网络的数据回归预测Matlab程序SSA-DNN 多特征输入单输出 含基础深度神经网络DNN 一、SSA-DNN模型1. 麻雀优化算法&…