中文

English

一个灵活的可配置的波浪动画

简单的展示

附代码的展示

教程

在实例化时接收两个参数

第一个参数：动画容器的选择器

第二个参数（可选）：options

import Wave from './dist/wave.es.js'
  
const wave = new Wave('body')

<script src="./dist/wave.js"></script>
<script >
  const wave = new Wave('body')
</script>

类型：string

默认值：--

说明：动画容器的选择器

类型： number

默认值：3

说明：波浪个数（层数）

类型： number

默认值：50

说明：平滑程度

类型： number

默认值：1

说明：速度

类型： number

默认值：.3

说明：波浪高度，可以是百分比，也可以是具体的高度

类型： Array<{ hex: string, rgba: string }>

默认值：['#ff7657']

说明：每个波浪的颜色

类型： number

默认值：.5

说明：波浪的透明度

类型： boolean

默认值：true

说明：是否显示边框

类型： number

默认值：2

说明：边框宽度

类型： string[]

默认值：['']

说明：边框颜色，默认为波浪颜色相同

类型： 'top' | 'bottom' | 'left' | 'right'

默认值："bottom"

说明：波浪的位置

开始动画

暂停动画

设置参数，接收值与上述 options 相同

重置动画，当容器大小变化时可用

增加多个波浪（多个贝塞尔曲线连接）