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

• demo
• i5SING

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.