can openlayers 3 render the animated marker using gif - openlayers-3

Question

I wanna ask how to make the marker show animated gif picture like openlayers 2 do...it can show the animated marker..what I want is show animated gif marker not make a marker move..it is possible or not?
style = {
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
anchor: anchor,
opacity: 1,
src: 'https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif',
scale: 1,
};
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ (style))
});
var iconFeature = new ol.Feature({
position: data.coordinate,
geometry: new ol.geom.Point([0,0]),
});
iconFeature.setStyle(iconStyle);
How to make https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif displayed animated as a gif in a map? is it possible or not create animated features in openlayers 3..I don't find any article with contain this solving...thanks

Answer 1

Yes there is a way do it but is a bit tricky so I am not sure whether it fit to your needs.
You need to add a marker instead and use css to style the marker.
check this
your html with the dom element
<div id="map" class="map"></div>
<div id="marker" title="Marker"></div>
your js here
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// the position of your marker
var pos = ol.proj.fromLonLat([23.3725, 35.208889]);
var marker = new ol.Overlay({
position: pos,
positioning: 'center-center',
element: document.getElementById('marker'),
stopEvent: false
});
map.addOverlay(marker);
and your css here
#marker {
width: 365px;
height: 360px;
background: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") no-repeat scroll 0% 0% transparent;
}
and a fiddle here with the dancing banana (nice gif though :)))) )

Answer 2

This can definitely be done with a feature or layer style, with the help of a gif decoder that extracts the frames from the gif and controls an animation. Using gifler, the relevant code could look something like this:
const gifUrl = "./data/kgrtehja_DancingBannana.gif";
const gif = gifler(gifUrl);
gif.frames(
document.createElement("canvas"),
(ctx, frame) => {
if (!iconFeature.getStyle()) {
iconFeature.setStyle(
new Style({
image: new Icon({
img: ctx.canvas,
imgSize: [frame.width, frame.height]
})
})
);
}
ctx.clearRect(0, 0, frame.width, frame.height);
ctx.drawImage(frame.buffer, frame.x, frame.y);
map.render();
},
true
);
The above code sets an icon style with the animated gif on an existing feature. The feature is stored in a variable iconFeature.
See https://codesandbox.io/s/beautiful-fire-cdrou?file=/main.js for a working example.

Answer 3

An alternative is to use two png images. An effect similar to a gif image can be obtained if you apply two different styles to the same layer using the setStyle () method with a setInterval () function. Ej:
Style1 = {
...
src: '../image1.png',
...
};
Style2 = {
...
src: '../image2.png',
...
};
iconFeature.setStyle(Style1);
then
var n = 0; // global
function changeStyleEvery (){
if (n == 0){
n = 1;
iconFeature.setStyle(Style1);
}else{
n = 0;
iconFeature.setStyle(Style2);
};
};
function applyInterval (){
setInterval(function(){changeStyleEvery(); }, 500);
};