如何使用openlayers3为Image png设置动画

Question

I need to implement a function with openlayers-3. Description:There are a series of images .png. I need to play them like a animation.I set the image source as ImageStatic,but When I set the current image visible is false ,it doesn't work. the visible property seems like not work. Code:

  var extent = [0, 0, 418, 600]; var projection = new ol.proj.Projection({ code: 'xkcd-image', units: 'pixels', extent: extent }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Group({ layers: [ new ol.layer.Image({ source: new ol.source.ImageStatic({ url: 'http://localhost:2265/images3/test2.png', projection: projection, imageExtent: extent, }) }), new ol.layer.Image({ source: new ol.source.ImageStatic({ url: 'http://localhost:2265/images2/test1.png', projection: projection, imageExtent: extent, }) }) ] }) ], target: 'map', view: new ol.View({ projection: projection, center: ol.extent.getCenter(extent), zoom: 2, maxZoom: 8 }) }); var layers = map.getLayers().getArray(); var frame = 1; setInterval(function () { layers[frame].setVisible = false; frame = (frame + 1) % 2; layers[frame].setVisible = true; },500); 

Answer 1

map.layers[ 1 ] is a group, to get the image layers try:

var layers = map.getLayers().getArray()[1].getLayers().getArray();

You can also do 'real' animation by rendering directly to the canvas:

http://openlayers.org/en/latest/examples/feature-move-animation.html http://openlayers.org/en/latest/examples/flight-animation.html