一款基于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 |绑定的动画列表一起停止|——|