particles-system v0.0.9

本篇README.md面向开发者

目录

• 安装
  • npm
  • 原生
• 使用
• Api
• 未来规划

安装

npm

通过npm

npm install particals

通过yarn

yarn particals

原生

将dist中的particals.js文件放到你的项目中或者上传至cdn引用即可 js脚本会在全局注入一个Particials对象

<script src="./dist/particals.js"><script>

适用范围

目前该粒子库仅支持粒子间相互独立、和用户无交互的效果

使用

Particals.js提供了一些上手即用的Demo,调整参数即可使用

Hello Partials.js

基础的使用包括以下代码

const hurricaneEl = document.querySelector('#hurricane');
const hurricane = new Particals.Particals({
    el: hurricaneEl,
    partical: new Particals.CirclePartical({
        color: [
            { offset: 0, color: 'rgba(226,3,249, 1) ' },
            { offset: 0.4, color:  'rgba(226,3,249, 0.3) ' },
            { offset: 1, color: 'rgba(226,3,249, 0) '}
        ],
        radius: [10,20],
    }),
    particalNum: 50,
    pregnantTime: 3,
    behaviors: [
        new Particals.SizeDieBehavior({minSize: 0}),
        new Particals.PositionBornBehavior({
            bornArea: {
                x: 200,
                y: 300,
                w: 30,
                h: 10
            },
        }),
        new Particals.LinearSizeBehavoir({
            speed: [-0.1, -0.4],
        }),
        new Particals.SinPositionBehavior({
            speed: [30, 60],
            speedRate: 1,
            amplitude: 40,
            frequency: 0.5
        }),
    ]
});
hurricane.run();

其中主要参数包括partical（粒子类型）、canvas元素、粒子数、behaviors， 执行run后就会开始粒子效果

支持的粒子

1. 圆形粒子
2. 文字粒子
3. Image粒子

支持的行为

behaviors针对每个粒子的生命周期，每个更新循环会按顺序执行behaviors里的更新行为 behavior可以对粒子对行为按不同的纬度进行控制

1. 随机出生区域
2. 粒子死亡条件
3. 粒子位置更新
4. 粒子大小更新
5. 自定义行为

Api

TODO