Skip to content
A graphic wave animational effect library implemented by canvas.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dist add stop animation function Jan 20, 2018
example update readme and demo Feb 16, 2017
src add stop animation function Jan 20, 2018
.babelrc
.gitignore initial commit Nov 1, 2016
LICENSE
README.md
package-lock.json add stop animation function Jan 20, 2018
package.json add stop animation function Jan 20, 2018

README.md

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.

You can’t perform that action at this time.