openlayers3中三种动画实现

一、.在div中使用CSS3动画，以overlay的形式添加

1.先为一个div创建css

.css_animation{
        height:50px;
        width:50px;
        border-radius: 25px;
        background: rgba(255, 0, 0, 0.9);
        transform: scale(0);
        animation: myfirst 3s;
        animation-iteration-count: infinite;
    }

    @keyframes myfirst{
        to{
            transform: scale(2);
            background: rgba(0, 0, 0, 0);
        }
    }

效果如下：

2.动态创建这个div，并将这个div作为overlay的Element，添加到地图中

   var point_div = document.createElement('div');
        point_div.className="css_animation";
        point_overlay = new ol.Overlay({
            element: point_div,
            positioning: 'center-center'
        });
        map.addOverlay(point_overlay);

如果需要添加到地图上，只需要设置

        point_overlay.setPosition(coordinate);

最终效果如下：

二、使用openlayers3自带的 postcompose事件

这个事件在地图渲染时都会触发，而我们只要改变地图上的某个 feature 或者 layer 或者其他任何东西，就会触发重新渲染。因此我们在postcompose中改变feature的样式，改变样式后重新触发postcompose事件，一只循环下去，形成动画效果。这里我们制作了一个闪烁的动画，代码如下：

  var radius = 0;
    map.on('postcompose', function(){
        // 增大半径，最大20
        radius++;
        radius = radius%30;
        var color;
        if(radius <15){
            color = '#FF0000'
        }else{
            color = null
        }
        gpsPointLayer.setStyle(new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1],
                    src: 'IMG/online.png',
                    color: color
                })
            }));
    })

其中radius每次postcompose都会自增，用以控制样式改变的速度，最终效果如下：

三、使用js的requestAnimationFrame

requestAnimationFrame的方式与其他的js中方法相比的优势如下：1.经过浏览器优化，动画更流畅2.窗口没激活时，动画将停止，省计算资源3.更省电，尤其是对移动终端。这里我们制作了一个轨迹回放的动画。代码如下：

var progress = 0;
    var moveFeature2 = function(){
        var speed = 200;
        progress += 1;
        if(progress%speed==0){
            var currentPoint = new ol.geom.Point(routeCoords[progress/speed]);
            var dx = routeCoords[progress/speed][0] - routeCoords[progress/speed-1][0];
            var dy = routeCoords[progress/speed][1] - routeCoords[progress/speed-1][1];
            var rotation = Math.atan2(dy, dx);
            var styleGeomarker = new ol.style.Style({
                image: new ol.style.Icon({
                    src: 'images/taxi.png',
                    rotateWithView: false,
                    rotation: -rotation
                })})
            var feature = new ol.Feature(currentPoint);
            vectorLayer2.getSource().clear();
            vectorLayer2.getSource().addFeature(feature);
            vectorLayer2.setStyle(styleGeomarker);
        }
        if(progress%speed!=0){
            var arcGenerator = new arc.GreatCircle(
                    {x: routeCoords[Math.floor(progress/speed)][0], y: routeCoords[Math.floor(progress/speed)][1]},
                    {x: routeCoords[Math.floor(progress/speed+1)][0], y: routeCoords[Math.floor(progress/speed+1)][1]});
            var arcLine = arcGenerator.Arc(speed, {offset: 0});//在两个点之间生成100个点 js地址为https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js
            var line = new ol.geom.LineString(arcLine.geometries[0].coords);
            var lineFeature = new ol.Feature({
                type: 'route',
                geometry: line
            });
            var currentPoint = new ol.geom.Point(arcLine.geometries[0].coords[progress%speed]);
            var dx = arcLine.geometries[0].coords[progress%speed][0] - arcLine.geometries[0].coords[progress%speed-1][0];
            var dy = arcLine.geometries[0].coords[progress%speed][1] - arcLine.geometries[0].coords[progress%speed-1][1];
            var rotation = Math.atan2(dy, dx);
            var styleGeomarker = new ol.style.Style({
                image: new ol.style.Icon({
                    src: 'images/taxi.png',
                    rotateWithView: false,
                    rotation: -rotation
                })})
            var feature = new ol.Feature(currentPoint);
            vectorLayer2.getSource().clear();
            vectorLayer2.getSource().addFeature(feature);
            helpTooltipElement.innerHTML="名称：测试"+"\<br\>"
                    +"当前速度：75km/h"+"\<br\>"
                    +"当前电量：90%"+"\<br\>"
                    +"经纬度："+(arcLine.geometries[0].coords[progress%100][0]+"").substring(0,8)+","+(arcLine.geometries[0].coords[progress%100][1]+"").substring(0,7);
            helpTooltip.setPosition(arcLine.geometries[0].coords[progress%100]);
        }
        if (progress/speed < routeLength-1) {
            requestAnimationFrame(moveFeature2);
        }
    }

此处涉及openlayers3中弹出框overlay、layer、feature、style，还有一个外部引用的工具js（地址文中已给出）以及requestAnimationFrame,细节不再叙述，效果如下，下班了。。。

结束，有不准确的，欢迎指正。