Skip to content

A flexible, configurable animation of wave - 一个灵活的可配置的波浪动画

Notifications You must be signed in to change notification settings

QiShaoXuan/wavejs

Repository files navigation

中文

English

波浪动画

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

简单的展示

附代码的展示

教程

使用

在实例化时接收两个参数

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

第二个参数(可选):options

引用 /dist/wave.es.js

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

引用 /dist/wave.js

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

配置参数

container

类型:string

默认值:--

说明:动画容器的选择器

options

options.number

类型: number

默认值:3

说明:波浪个数(层数)

options.smooth

类型: number

默认值:50

说明:平滑程度

options.velocity

类型: number

默认值:1

说明:速度

options.height

类型: number

默认值:.3

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

options.colors

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

默认值:['#ff7657']

说明:每个波浪的颜色

options.opacity

类型: number

默认值:.5

说明:波浪的透明度

options.border.show

类型: boolean

默认值:true

说明:是否显示边框

options.border.width

类型: number

默认值:2

说明:边框宽度

options.border.color

类型: string[]

默认值:['']

说明:边框颜色,默认为波浪颜色相同

options.position

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

默认值:"bottom"

说明:波浪的位置

方法

animate

开始动画

pause

暂停动画

setOptions

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

reset

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

TODO

增加多个波浪(多个贝塞尔曲线连接)

About

A flexible, configurable animation of wave - 一个灵活的可配置的波浪动画

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published