前言
粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画。
传统的粒子动画主要由 Canvas、WebGL 实现,我们经常用来用作网站的动画背景。
今天介绍两个个可以轻松创建高度可定制的粒子动画库。
一、particle-bg
1. git地址:
https://github.com/PengJiyuan/particle-bg
不带连线效果:
带连线的效果:
2. 安装
npm i particle-bg
https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js
3. 使用
ES Module
import particleBg from 'particle-bg'; particleBg('body');
Browser
<script src="https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js"></script> <script> particleBg('body'); </script>
API
particleBg(element, config) element 要插入粒子背景的DOM。 config [Object] 粒子背景的一些配置。 config.color default: '#fff' 粒子的颜色。 config.count default: 100 粒子的数量 config.radius default: 2 粒子的半径 config.distance default: width / 10 粒子间距小于多少会连线 config.rate default: width / 10000 粒子运动的速率 config.zIndex default: 1 canvas的z-index. config.resize default: true 是否监听window.resize,自动缩放粒子背景。 config.line default: true 粒子之间是否连线。 config.bounce default: false 是否触碰边界进行反弹。
4. 完整demo
<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="Bg"></div> <script src="https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js"></script> <script> particleBg('#Bg', { color: '#fff', count: 100, radius: 2, distance: 70, rate:1, zIndex: 1, resize: true, line: true, bounce: true, }); </script>
效果
二、tsParticles
TypeScript Particles 是在 particles.js 基础上重写的一个库,目的是更容易地创建更多的背景动画,并提供更多的实用程序和支持功能。
这个库最大的亮点在于它可以用于许多不同的框架,例如 React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery等等JS框架、Web组件。
1. 源码地址:
GitHub地址:https://github.com/matteobruni/tsparticles
官网地址:https://particles.js.org/
更多demo地址:https://codepen.io/collection/DPOage
2. 安装
npm
npm install tsparticles-engine
yarn
yarn add tsparticles-engine
pnpm
pnpm install tsparticles-engine
3. 引入
从版本1.12.11开始使用import和require导入tsParticles了。
const tsParticles = require("tsparticles-engine"); // or import { tsParticles } from "tsparticles-engine";
4. 使用
index.html
<div id="tsparticles"></div> <script src="tsparticles.engine.min.js"></script>
app.js
tsParticles .loadJSON("tsparticles", "presets/default.json") .then(container => { console.log("callback - tsparticles config loaded"); }) .catch(error => { console.error(error); });
5. 几个例子
5.1 ts粒子五彩纸屑烟花
<script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.11.0/tsparticles.confetti.bundle.min.js"></script> <script id="rendered-js"> const duration = 60 * 60 * 1000, animationEnd = Date.now() + duration, defaults = { startVelocity: 30, spread: 360, ticks: 20, zIndex: 0 }; function randomInRange(min, max) { return Math.random() * (max - min) + min; } const interval = setInterval(function () { const timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) { return clearInterval(interval); } const particleCount = 20 * (timeLeft / duration); // since particles fall down, start a bit higher than random confetti( Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } })); confetti( Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } })); }, 250); </script>
效果
5.2 多粒子产卵器-用tsParticles制作
<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles"></div> <script src="https://cdn.jsdelivr.net/npm/tsparticles@1.19.0-alpha.3/dist/tsparticles.min.js"></script> <script id="rendered-js"> tsParticles.load("tsparticles", { fpsLimit: 60, particles: { number: { value: 0, density: { enable: true, value_area: 800 } }, color: { value: "#ffff00" }, shape: { type: "circle" }, opacity: { value: 1, random: false, animation: { enable: true, speed: 0.5, minimumValue: 0, sync: false } }, size: { value: 8, random: { enable: true, minimumValue: 4 }, animation: { enable: false, speed: 20, minimumValue: 4, sync: false } }, move: { enable: true, gravity: { enable: true, acceleration: -0.5 }, speed: 5, direction: "top", random: false, straight: false, outModes: { default: "destroy", bottom: "none" }, attract: { enable: true, distance: 300, rotate: { x: 600, y: 1200 } } } }, interactivity: { detectsOn: "canvas", events: { resize: true } }, detectRetina: true, background: { color: "#000000" }, emitters: [ { direction: "top", particles: { color: "#f00" }, rate: { quantity: 1, delay: 0.1 }, size: { width: 100, height: 10 }, position: { x: 50, y: 100 } }, { direction: "top", particles: { color: "#0f0" }, rate: { quantity: 1, delay: 0.1 }, size: { width: 100, height: 10 }, position: { x: 50, y: 100 } }] }); //# sourceURL=pen.js </script>
效果
5.3 ts粒子鼠标吸引力
<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles1"></div> <script src="https://cdn.jsdelivr.net/npm/tsparticles@1.37.4/tsparticles.min.js"></script> <script id="rendered-js"> tsParticles.load("tsparticles1", { fps_limit: 60, interactivity: { detect_on: "canvas", events: { onclick: { enable: true, mode: "push" }, onhover: { enable: true, mode: "attract", parallax: { enable: false, force: 60, smooth: 10 } }, resize: true }, modes: { push: { quantity: 4 }, attract: { distance: 200, duration: 0.4, factor: 5 } } }, particles: { color: { value: "#ffffff" }, line_linked: { color: "#ffffff", distance: 150, enable: true, opacity: 0.4, width: 1 }, move: { attract: { enable: false, rotateX: 600, rotateY: 1200 }, bounce: false, direction: "none", enable: true, out_mode: "out", random: false, speed: 2, straight: false }, number: { density: { enable: true, value_area: 800 }, value: 80 }, opacity: { anim: { enable: false, opacity_min: 0.1, speed: 1, sync: false }, random: false, value: 0.5 }, shape: { character: { fill: false, font: "Verdana", style: "", value: "*", weight: "400" }, image: { height: 100, replace_color: true, src: "images/github.svg", width: 100 }, polygon: { nb_sides: 5 }, stroke: { color: "#000000", width: 0 }, type: "circle" }, size: { anim: { enable: false, size_min: 0.1, speed: 40, sync: false }, random: true, value: 5 } }, polygon: { draw: { enable: false, lineColor: "#ffffff", lineWidth: 0.5 }, move: { radius: 10 }, scale: 1, type: "none", url: "" }, retina_detect: true }); </script>
效果
5.4 粒子烟花
<script src="https://cdn.jsdelivr.net/npm/tsparticles-fireworks@2.11.0/tsparticles.fireworks.bundle.min.js"></script> <script id="rendered-js"> fireworks(); </script>
效果