Openlayers3官网实例一（动画）

一、动画实例代码

var view = new ol.View({
    center:new ol.proj.fromLonLat([120,33]),
    zoom: 3,
    maxZoon: 15,
    minZoom: 3,
    logo:false
});

var googleMapSource = new ol.source.XYZ({
    url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
});
var googleLayer = new ol.layer.Tile({
    source: googleMapSource
});


var map = new ol.Map({
    view: view,
    layers: [googleLayer],
    target:"map"
});

//实现旋转动画
var rotate = document.getElementById("rotate");
rotate.addEventListener("click", function() {
    var rotateAnitation =ol.animation.rotate({
        rotation: Math.PI*2,//本参数单位是弧度，设置为旋转一周
        anchor: view.getCenter(),//指定围绕哪一个点进行旋转，默认未然中心点
        duration: 2000//动画总共花费时间单位是毫秒
    });
    map.beforeRender(rotateAnitation);
});

var bounce = document.getElementById("bounce");//实现弹跳效果
bounce.addEventListener("click", function() {
    var bounceAnimation = ol.animation.bounce({
        resolution: view.getResolution()*2,//根据分辨率缩放或者放大到的级别
        duration:2000
    });
    map.beforeRender(bounceAnimation);
});

var pan = document.getElementById("pan");
pan.addEventListener("click",function() {
    var panAnimation = ol.animation.pan({
        source: view.getCenter(),//此处为移动到的起始点，既从此处移动到下一处的点
        duration: 2000
    });
    map.beforeRender(panAnimation);
    view.setCenter(new ol.proj.fromLonLat([120, 23]));
    view.setZoom(10);
}, false);

var flyTo = document.getElementById("flyTo");
flyTo.addEventListener("click", function () {
    var flyPan = ol.animation.pan({
        source: view.getCenter(),
        duration:2000
    });
    var flyBounce = ol.animation.bounce({
        resolution: view.getResolution() * 2,
        duration:2000
    });

    map.beforeRender(flyPan, flyBounce);
    view.setCenter(new ol.proj.fromLonLat([111,24]));
}, false);


var easing = document.getElementById("easing");
easing.addEventListener("click", function() {
    var easingPan = ol.animation.pan({
        source: view.getCenter(),
        duration: 2000,
        easing: ol.easing.linear
    });
    map.beforeRender(easingPan);
    view.setCenter(new ol.proj.fromLonLat([111,27]));
});

二、关于动画中easing的用法

var easingFunc = document.getElementById("easingFunc");
easingFunc.addEventListener("click", function () {
    function myAnitation(t) {
        var z = 0;
        if (t <= 0.5) {
            z = -2 * t + 1;//y=-2x+1;
        } else {
            z = 2 * t - 1;//y=2*x-1
        }
        console.log(z);
        return z;
    }

    var easingPan = ol.animation.pan({
        source: view.getCenter(),
        duration: 2000,
        easing: myAnitation
    });
    map.beforeRender(easingPan);
    view.setCenter(new ol.proj.fromLonLat([111, 27]));
});

总结

  easing参数是一个函数类型，其返回范围是[0,1],我们可以写一些曲线或者直线的函数来控制，地图怎么进行动画；返回1就是到达目标点，返回0是在起始点。在此，感谢