VUE3中使用粒子特效

1.安装

使用npm安装

npm install particles.vue3 --save

使用yarn安装

yarn add particles.vue3 --save

2.在main.js中引入

import Particles from 'particles.vue3';

createApp(App).use(Particles).mount('#app');

3.在vue页面中使用

<template><!--引入粒子特效--><div class="bkpro-login-canvas"><Particlesid="tsparticles":options="options":particlesInit="particlesInit":particlesLoaded="particlesLoaded"/></div>
</template><script lang="ts" setup>
// 粒子特效数据
const options = {background: {color: {value: '#000' // 粒子颜色}},fpsLimit: 60,interactivity: {events: {onClick: {enable: true,mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。},onHover: {enable: true,mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。},resize: true},modes: {bubble: {distance: 400,duration: 2,opacity: 0.5,size: 40},push: {quantity: 4},repulse: {distance: 200,duration: 0.4}}},particles: {color: {value: '#dedede'},links: {color: '#dedede', // '#dedede'。线条颜色。distance: 140, // 线条长度enable: true, // 是否有线条opacity: 0.6, // 线条透明度。width: 1// 线条宽度。},collisions: {enable: false},move: {direction: 'none',enable: true,outMode: 'bounce',random: false,speed: 4, // 粒子运动速度。straight: false},number: {density: {enable: true,area: 800},value: 100// 粒子数量。},opacity: {value: 0.7// 粒子透明度。},shape: {type: 'circle' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"},size: {random: true,value: 5}},detectRetina: true
}</script>

VUE3中使用粒子特效相关推荐

Unity中使用粒子特效（Particle System）制作烟花和烛光效果
Unity中使用粒子特效(Particle System)制作烟花和烛光效果烟花烛光烟花 Unity&烟花效果实例烛光 Unity3d粒子特效:制作火焰效果由于烛光的火焰是比较稳定的 ...
【IOS-COCOS2D游戏开发之十】添加粒子系统特效并解决粒子特效与LAYER之间的坐标问题；...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/472.html ...
【iOS-Cocos2d游戏开发之十】添加粒子系统特效并解决粒子特效与Layer之间的坐标问题；
李华明Himi 原创,转载务必在明显处注明: 转载自 [黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/472.html 一直以 ...
Unity UGUI NGUI 模型粒子特效三者之间渲染层级设置
目录 1.介绍两大UI插件NGUI和UGUI 2.unity渲染顺序控制方式 3.NGUI的控制 4.UGUI的控制 5.模型深度的控制 6.粒子特效深度控制 7.NGUI与模型和粒子特效 ...
粒子动态背景--在Vue3中使用VueParticles
前言在公司某项目登录界面见到粒子动画背景,也想将这个动画效果用在自己的项目上,起初以为直接安装vue-particles就可以了,结果自己的项目是Vue3的,不兼容.根据网上调研,在Vue3中可以使 ...
vue 3 + mo.js 实现点赞粒子特效【实战】
ue 3.2 + js 实现点赞粒子特效创建一个项目一.显示页面 1.新建页面 2.写部分显示代码 3.导入文件 4.将其他的注释掉二.下载点赞图片 1.打开阿里云矢量库 2.复制SVG代码 3 ...
Shader相关Mask裁切UI粒子特效或者3D模型
转载自:http://www.xuanyusong.com/archives/3518 原理就是把Mask的裁切区域传给粒子特效Shader,当超出这个区域那么直接让它完全透明即可.粒子特效的源生sh ...
Silverlight 解谜游戏之四粒子特效
前几篇一直在Blend中工作没体现出开发者的作用,本篇将为订书器(Stapler)添加自定义粒子效果,当订书器被点击时产生更好的视觉效果.其中将使用到nerdplusart 的Silverlight ...
yanobox nodes 3 Mac新一代点线粒子特效运动图形插件
Yanobox Nodes 3.0.3 for Mac版是一款适用于Mac操作系统的粒子特效插件,可直接使用于fcpx和ae软件.打开Final Cut Pro X,在已经安装好的[发生器]中,你会看 ...
使用particles.js实现网页背景粒子特效
得知途径 B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log:还有一个是用Go语言开发的,叫做Pipe.其中Solo ...

VUE3中使用粒子特效

1.安装

2.在main.js中引入

3.在vue页面中使用

VUE3中使用粒子特效相关推荐

最新文章

热门文章