Vue3实战笔记(35)—集成炫酷的粒子特效

文章目录

  • 前言
  • 一、vue3使用tsparticles
  • 二、使用步骤
  • 总结


前言

学习一个有趣炫酷的玩意开心一下。

tsparticles,可以方便的实现各种粒子特效。支持的语言框架也是相当的丰富.
在这里插入图片描述
官网:https://particles.js.org/


一、vue3使用tsparticles

先来个vue3使用的入门案例:

pnpm install @tsparticles/vue3

然后按照官方文档:


import Particles from "@tsparticles/vue3";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.createApp(App).use(Particles, {init: async engine => {// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need itawait loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations},
});

本以为可以了,但是看了一眼注释,还需要安装一下slim:


pnpm install @tsparticles/slim

在我的项目中是这样use的:


import Particles from "@tsparticles/vue3";
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.const app = createApp(App)//创建pinia
const pinia = createPinia()registerPlugins(app)//使用路由器
app.use(router)
//使用pinia
app.use(pinia)//使用Particles
app.use(Particles, {init: async engine => {// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need itawait loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations},})

二、使用步骤

创建页面mouseattraction.vue:

代码如下(示例):

<template><div id="app"><vue-particles id="tsparticles" @particles-loaded="particlesLoaded" url="http://foo.bar/particles.json" /><vue-particlesid="tsparticles"@particles-loaded="particlesLoaded":options="{background: {color: {value: '#0d47a1'}},fpsLimit: 120,interactivity: {events: {onClick: {enable: true,mode: 'push'},onHover: {enable: true,mode: 'repulse'},},modes: {bubble: {distance: 400,duration: 2,opacity: 0.8,size: 40},push: {quantity: 4},repulse: {distance: 200,duration: 0.4}}},particles: {color: {value: '#ffffff'},links: {color: '#ffffff',distance: 150,enable: true,opacity: 0.5,width: 1},move: {direction: 'none',enable: true,outModes: 'bounce',random: false,speed: 6,straight: false},number: {density: {enable: true,},value: 80},opacity: {value: 0.5},shape: {type: 'circle'},size: {value: { min: 1, max: 5 }}},detectRetina: true}"/></div>
</template><script setup lang="ts" name="">
const particlesLoaded = async (container: any) => {console.log("Particles container loaded", container);
};
</script><style lang='scss' scoped>
</style>

路由代码如下(示例):

    {path:'/tsParticles/mouseattraction',component:Mouseattraction}

运行效果:

在这里插入图片描述


总结

只是按照官网的示例运行成功了,还有很多很多其他炫酷的示例没有测试,后续还会继续研究一番。

不要因为结束而哭泣,微笑吧,为你的曾经拥有。

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

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

相关文章

Go 语言逃逸分析:内存管理的关键

文章目录 前言1 逃逸分析是什么&#xff1f;2 逃逸分析的基本思想是什么&#xff1f;3 逃逸分析的分配原则是什么&#xff1f;4 如何进行逃逸分析&#xff1f;5 逃逸分析案例5.1 变量在函数外存在引用5.2 引用类型的逃逸5.3 闭包捕获变量5.4 变量占用内存较大 6 变量会逃逸到堆…

代码随想录训练营打卡第36天:动态规划解决子序列问题

1.300最长递增子序列 1.问题描述 找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。 2.问题转换 从nums[0...i]的最长的递增的子序列 3.解题思路 每一个位置的n…

经济学问题

问题1 1916年&#xff0c;福特汽车公司以440美元的价格生产了50万辆T型福特汽车。该公司当年盈利6000万美元。亨利福特告诉一位报纸记者&#xff0c;他打算把T型车的价格降至360美元&#xff0c;他希望在这个价格上能卖出80万辆汽车。福特说&#xff1a;“每辆车的利润减少&am…

Flutter 中的 CupertinoPicker 小部件:全面指南

Flutter 中的 CupertinoPicker 小部件&#xff1a;全面指南 在Flutter中&#xff0c;CupertinoPicker是一个用于创建iOS风格的选择器的组件&#xff0c;它允许用户通过滚动来选择一个值。CupertinoPicker可以用于选择日期、时间或者任何可枚举的值。本文将详细介绍CupertinoPi…

C++多态详解

目录 一、多态的概念 二、多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写 4.例题理解&#xff08;超级重要&#xff0c;强烈建议做一下&#xff09; 5.C11 override和 final 6.重载、覆盖&#xff08;重写&#xff09;、隐藏&#xff08;重定义&#xff0…

【yijiej】mysql报错 之 报错:Duplicate entry 字段 for key ‘表名.idx_字段’

一、问题操作 Mysql 进行insert 操作&#xff0c;报错&#xff1a;Duplicate entry 字段 for key ‘表名.idx_字段’ 原因解析&#xff1a;idx 是做的索引键&#xff0c;是具有唯一性二、问题原因&#xff08;三种情况&#xff0c;当前我遇到的情况是第一种&#xff09; 1、当 …

零基础代码随想录【Day42】|| 1049. 最后一块石头的重量 II,494. 目标和,474.一和零

目录 DAY42 1049.最后一块石头的重量II 解题思路&代码 494.目标和 解题思路&代码 474.一和零 解题思路&代码 DAY42 1049.最后一块石头的重量II 力扣题目链接(opens new window) 题目难度&#xff1a;中等 有一堆石头&#xff0c;每块石头的重量都是正整…

(Qt) 默认QtWidget应用包含什么?

文章目录 ⭐前言⭐创建&#x1f6e0;️选择一个模板&#x1f6e0;️Location&#x1f6e0;️构建系统&#x1f6e0;️Details&#x1f6e0;️Translation&#x1f6e0;️构建套件(Kit)&#x1f6e0;️汇总 ⭐项目⚒️概要⚒️构建步骤⚒️清除步骤 ⭐Code&#x1f526;untitled…

【EasyX】快速入门——消息处理,音频

1.消息处理 我们先看看什么是消息 1.1.获取消息 想要获取消息,就必须学会getmessage函数 1.1.1.getmessage函数 有两个重载版本,它们的作用是一样的 参数filter可以筛选我们需要的消息类型 我们看看参数filter的取值 当然我们可以使用位运算组合这些值 例如,我们…

华为CE6851-48S6Q-HI升级设备版本及补丁

文章目录 升级前准备工作笔记本和交换机设备配置互联地址启用FTP设备访问FTP设备升级系统版本及补丁 升级前准备工作 使用MobaXterm远程工具连接设备&#xff0c;并作为FTP服务器准备升级所需的版本文件及补丁文件 笔记本和交换机设备配置互联地址 在交换机接口配置IP&#…

Facebook隐私保护:数据安全的前沿挑战

在数字化时代&#xff0c;随着社交媒体的普及和应用&#xff0c;个人数据的隐私保护问题日益受到关注。作为全球最大的社交平台之一&#xff0c;Facebook承载了数十亿用户的社交活动和信息交流&#xff0c;但与此同时&#xff0c;也面临着来自内外部的数据安全挑战。本文将深入…

AWS Elastic Beanstalk 监控可观测最佳实践

一、概述 Amazon Web Services (AWS) 包含一百多种服务&#xff0c;每项服务都针对一个功能领域。服务的多样性可让您灵活地管理 AWS 基础设施&#xff0c;然而&#xff0c;判断应使用哪些服务以及如何进行预配置可能会非常困难。借助 Elastic Beanstalk&#xff0c;可以在 AW…

【LinuxC语言】一切皆文件的理念

文章目录 引言一、什么是“一切皆文件”&#xff1f;1. 文件柜的类比2. 统一的操作方式3. 举个具体例子4. 设备文件5. 进程和网络连接6. 简化管理 二、这一设计的优势1. 统一接口2. 灵活性3. 简化了系统管理4. 增强了系统安全性 结论 引言 Linux 操作系统以其独特的设计理念和…

如何使用JMeter 进行全链路压测

使用 JMeter 进行全链路压测&#xff1a;详细步骤指南 全链路压测旨在测试整个系统的性能&#xff0c;包括所有的组件和服务。通过 Apache JMeter 进行全链路压测&#xff0c;可以模拟真实用户行为&#xff0c;测试系统在高负载下的表现。以下是详细的步骤指南&#xff0c;分为…

AWTK实现汽车仪表Cluster/DashBoard嵌入式GUI开发(七):快启

前言: 汽车仪表是人们了解汽车状况的窗口,而仪表中的大部分信息都是以指示灯形式显示给驾驶者。仪表指示灯图案都较为抽象,对驾驶不熟悉的人在理解仪表指示灯含义方面存在不同程度的困难,尤其对于驾驶新手,如果对指示灯的含义不求甚解,有可能影响驾驶的安全性。即使是对…

Pytest框架实战二

在Pytest框架实战一中详细地介绍了Pytest测试框架在参数化以及Fixture函数在API测试领域的实战案例以及具体的应用。本文章接着上个文章的内容继续阐述Pytest测试框架优秀的特性以及在自动化测试领域的实战。 conftest.py 在上一篇文章中阐述到Fixture函数的特性&#xff0c;第…

shell循环

一、for循环 用法&#xff1a; for 变量 in 取值列表 do 命令序列 done 例1&#xff1a;打印1到10的数字列表 #!/bin/bashfor i in {1..10} do echo $i done 例2&#xff1a;#批量添加用户,用户名存放在users.txt文件中&#xff0c;每行一个,初始密码均设为123456 #!/bin/bas…

KMP算法【C++】

KMP算法测试 KMP 算法详解 根据解释写出对应的C代码进行测试&#xff0c;也可以再整理成一个函数 #include <iostream> #include <vector>class KMP { private:std::string m_pat;//被匹配的字符串std::vector<std::vector<int>> m_dp;//状态二维数组…

怎样解决Redis高并发竞争Key难点?

Redis作为一种高性能的键值存储系统&#xff0c;在现代分布式系统中发挥着重要作用。然而&#xff0c;高并发场景下对同一Key的操作可能引发竞争条件&#xff0c;给系统稳定性和数据一致性带来挑战。本文将探讨如何解决这一问题&#xff0c;为读者提供有效的应对策略。 1. Red…

【002】FlexBison实现原理

0. 前言 Flex和Bison是用于构建处理结构化输入的程序的工具。它们最初是用于构建编译器的工具&#xff0c;但它们已被证明在许多其他领域都很有用。 &#xfeff; 在第一章中&#xff0c;我们将首先看一点(但不是太多)它们背后的理论&#xff0c;然后我们将深入研究一些使用它…