siren-wave v0.1.0

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.