动画简单应用

前面那个回到原点的动画，使用了OpenLayers 3内置的动画效果，代码如下：

<div id="map" style="width: 100%"></div>
<!--增加两个按钮，一个演示不带动画，一个演示带动画-->
<input type="button" value="回到原点-不带动画" onclick="backNoAnim()"></input>
<input type="button" value="回到原点-带动画" onclick="backWithAnim()"></input>
<script type="text/javascript">
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 不带动画的实现
    function backNoAnim() {
    map.getView().setCenter(ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'));
    }

    // 带动画的实现
    function backWithAnim() {
        // 注意： 应用内置的动画，实现平移动画
        var pan = ol.animation.pan({
      duration: 2000,
      source: map.getView().getCenter()
    });
    // 注意： 使用beforeRender来添加
    map.beforeRender(pan);
    // 然后才是重新设置地图中心点到原来的位置
    map.getView().setCenter(ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'));
    }

</script>

关键的代码始终在最后，结合注释，应该可以理解。 我们使用的内置动画是ol.animation.pan，用于平移动画，更详细的信息请参考官网API。 可以看到它是一个函数，返回一个ol.PreRenderFunction，添加到ol.Map，从而在渲染的时候使用，实现动画。

除了上面应用的动画之外，还有一些内置的动画，都在ol.animation里面，从官网API可以看到，包括：

• ol.animation.bounce: 来回弹。
• ol.animation.pan: 平移。
• ol.animation.rotate: 旋转。
• ol.animation.zoom: 缩放。

这些动画都可以尝试，或许就有你需要的。