particals v0.0.3

本篇README.md面向开发者

目录

• 安装
  • npm
  • 原生
• 使用
• Api

安装

npm

通过npm

npm install particles-system

通过yarn

yarn add  particles-system

原生

将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. 圆形粒子 CirclePartical
2. 文字粒子 TextPartical
3. Image粒子 ImagePartical

支持的行为

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

1. 随机出生区域 PositionBornBehavior
2. 粒子死亡条件 BoundaryLifeBehavior
3. 粒子位置更新 LinearPositionBehavior, SinPositionBehavior
4. 粒子大小更新 LinearSizeBehavoir
5. 透明度更新 OpacityBehavior
6. 自定义行为 BaseBehavior

自定义行为

以上提供的基础粒子行为若不能满足你的需求，你可以自定义行为 继承BaseBehavior，在behaviors中注册即可使用。 可参考Demo： https://yux.yuewen.com/jsbin/cuj/edit?html,js,output 关于BaseBehavior，可参考BaseBehavior文档