Narcissistic Pickle Meister

    siren-wave

    0.1.0 • Public • Published

    Siren Wave

    This is a graphic wave animational effect library implemented by canvas.

    Usage

    $ npm install siren-wave --save
    

    or

    <script src="./node_modules/siren_wave/dist/siren-wave.min.js"></script>
    var Siren = require('siren-wave');
     
    var siren = new Siren({
        target: 'wave',
        height: 200,
        color: '#96ddf6',
        width: 600,
        waves: [
            // small
            {
                alpha: 0.1,
                yOffset: 40,
                speed: 0.02 * 0.4,
                angleStep: 0.0075,
                peak: 35,
                isPositive: true
            },
            // large
            {
                alpha: 0.1,
                yOffset: -20,
                speed: 0.05 * 0.4,
                angleStep: 0.0055,
                peak: 45,
                isPositive: true
            },
            // middle
            {
                alpha: 0.2,
                yOffset: 0,
                speed: 0.025 * 0.4,
                angleStep: 0.0055,
                peak: 30,
                isPositive: true
            }
        ]
    });
     
    siren.draw();

    Exapmle

    API

    new Siren(options)

    1. target

    the element id.

    2. width [number]

    it's optional, if it does not exist, the canvas's width will be it parent's width.

    3. height [number]

    it's optional.

    4. color [#rgb]

    wave's color.

    5. bgColor [#rgb]

    background color.

    6. waves [array]

    wave

    1. alpha [number]

    the alpha of wave.

    2. speed [number]

    wave's speed.

    3. angleStep [number]

    wave's angle, default is 0.01.

    4. peak [number]

    wave's height.

    5. isPositive [boolean]

    wave moves from left to right or moves right to left.

    siren.draw()

    start wave animation.

    siren.stop();

    stop wave animation.

    siren.update(options)

    update some params.

    Feedback

    If you any questions, use Issues.

    Sina Weibo: @miaowingz

    License

    MIT Licence.

    Install

    npm i siren-wave

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • zfeng