web实现酷炫的canvas粒子动画背景

前言

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。

传统的粒子动画主要由 Canvas、WebGL 实现，我们经常用来用作网站的动画背景。

今天介绍两个个可以轻松创建高度可定制的粒子动画库。

一、particle-bg

1. git地址：

https://github.com/PengJiyuan/particle-bg

不带连线效果：

带连线的效果：

2. 安装

NPM

npm i particle-bg

CDN

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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/tsparticles.fireworks.bundle.min.js">script>
<script id="rendered-js">
   fireworks();
 script>

效果

源码地址

https://gitcode.net/my12/particle

完结

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！

好了，我是向宇，https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者，出于兴趣爱好，于是最近才开始自习unity。如果你遇到任何问题，也欢迎你评论私信找我， 虽然有些问题我可能也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~