0.1.0 • Published 7 years ago
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
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.