Demonstrates how to animate features.
This example shows how to use postcompose and vectorContext to animate features. Here we choose to do a flash animation each time a feature is added to the layer.
<!DOCTYPE html> <html> <head> <title>Feature animation example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="span8"> <div id="map" class="map"></div> </div> </div> </div> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM({ wrapX: false }) }) ], controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), target: 'map', view: new ol.View({ center: [0, 0], zoom: 1 }) }); var source = new ol.source.Vector({ wrapX: false }); var vector = new ol.layer.Vector({ source: source }); map.addLayer(vector); function addRandomFeature() { var x = Math.random() * 360 - 180; var y = Math.random() * 180 - 90; var geom = new ol.geom.Point(ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857')); var feature = new ol.Feature(geom); source.addFeature(feature); } var duration = 3000; function flash(feature) { var start = new Date().getTime(); var listenerKey; function animate(event) { var vectorContext = event.vectorContext; var frameState = event.frameState; var flashGeom = feature.getGeometry().clone(); var elapsed = frameState.time - start; var elapsedRatio = elapsed / duration; // radius will be 5 at start and 30 at end. var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5; var opacity = ol.easing.easeOut(1 - elapsedRatio); var flashStyle = new ol.style.Circle({ radius: radius, snapToPixel: false, stroke: new ol.style.Stroke({ color: 'rgba(255, 0, 0, ' + opacity + ')', width: 1, opacity: opacity }) }); vectorContext.setImageStyle(flashStyle); vectorContext.drawPointGeometry(flashGeom, null); if (elapsed > duration) { ol.Observable.unByKey(listenerKey); return; } // tell OL3 to continue postcompose animation frameState.animate = true; } listenerKey = map.on('postcompose', animate); } source.on('addfeature', function(e) { flash(e.feature); }); window.setInterval(addRandomFeature, 1000); </script> </body> </html>