1.0.2 • Published 3 years ago
一款基于openlayers的图层动画插件
安装
npm installl ol-animate -S
引用
import LayerAnimate from 'ol-animate/layerAnimate'
import Animate from 'ol-animate/animate'
demo
import VectorLayer from 'ol/layer/Vector'
import { Fill } from 'ol/style'
const vectorLayer = new VectorLayer()
const attrObj = { width: 1 }
const fill = new Fill()
const animate1 = new Animate({
attr: attrObj,
attrName: 'width',
end: 5,
duration: 2000,
times: 4,
direction: 'alternate'
})
const animate2 = new Animate({
attr: fill,
attrName: 'color',
isOl: true,
init: '#fff',
end: '#000',
duration: 1500,
delay: 2000,
times: Infinity
})
new LayerAnimate({
layer: vectorLayer,
animates: [animate1, animate2]
})
animate1.play()
animate2.play()
Animate Attributes
| 参数 | 说明（*表示必须） | 类型 |
|---|
| attr | 需要改变的属性对象* | object |
| attrName | attr的属性名* | string |
| isOl | true表示attr为ol对象，否则为普通对象 | boolean |
| init | 状态初始值，如果不写，则为定义attr时的值 | string/number |
| end | 状态结束值* | string/number |
| duration | 动画持续时间* | number |
| delay | 动画延迟时间 | number |
| times | 动画循环次数，默认为1，即不循环 | number |
| direction | 动画循环方式，alternate为交替循环，即动画执行完一次后init和end状态互换 | string |
Animate Methods
| 方法名 | 说明（set方法只要被调用会立即停止当前动画） | 参数类型 |
|---|
| setInit | 重新定义初始状态 | string/number |
| setEnd | 重新定义结束状态 | string/number |
| setDuration | 重新定义持续时间 | number |
| setDelay | 重新定义延迟时间 | number |
| setTimes | 重新定义重复次数 | number |
| setDirection | 重新定义循环方式 | string |
| play | 动画开始执行，返回一个promise，then函数表示动画执行完成的回调 | —— |
| pause | 暂停动画 | —— |
| stop | 停止动画，并使动画回到初始状态 | —— |
LayerAnimate Attributes
| 参数 | 说明（*表示必须） | 类型 |
|---|
| layer | 绑定的图层对象* | object |
| animates | 绑定的动画列表* | array |
LayerAnimate Methods
| 方法名 | 说明 | 参数类型 |
|---|
| addAnimate | 添加动画对象 | object |
| play | 绑定的动画列表一起执行 | —— |
| pause | 绑定的动画列表一起暂停 | —— |
| stop | 绑定的动画列表一起停止 | —— |