https://github.com/miaowing/siren-wave
A graphic wave animational effect library implemented by canvas.
https://github.com/miaowing/siren-wave
canvas multi-waves wave
Last synced: 4 months ago
JSON representation
A graphic wave animational effect library implemented by canvas.
- Host: GitHub
- URL: https://github.com/miaowing/siren-wave
- Owner: miaowing
- License: mit
- Created: 2016-10-31T10:00:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-20T07:11:56.000Z (over 7 years ago)
- Last Synced: 2023-11-03T16:03:54.331Z (over 1 year ago)
- Topics: canvas, multi-waves, wave
- Language: JavaScript
- Homepage: https://github.com/miaowing/siren-wave
- Size: 42 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Siren Wave
This is a graphic wave animational effect library implemented by canvas.
## Usage
```
$ npm install siren-wave --save
```
or
```html
```
```javascript
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](http://miaow.io/siren-wave/example/index.html)
* [i5SING](http://i5sing.com)
## 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](https://github.com/miaowing/siren-wave/issues).
Sina Weibo: [@miaowingz](http://weibo.com/zfeng217)
## License
MIT Licence.