OpenLayers 5 实现动画方式移动和缩放，OpenLayers 4、OpenLayers 3 动画应用（OpenLayers View animate）

项目中要实现把OpenLayers的View移动到某点并放大到指定级别，参考 http://anzhihun.coding.me/ol3-primer/ch11/11-02.html ，发现大概代码如下：

function backWithAnim() {
  var pan = ol.animation.pan({
    duration: 2000,
    source: map.getView().getCenter(),
    easing: getEasing()    // 设置对应选择的动画
  });
  map.beforeRender(pan);
  map.getView().setCenter(ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'));
}

当我在编码的时候，发现这个可能只适合OpenLayers 3，我用的 OpenLayers 5，并没找到 ol.animation.pan 类，

后来我到官方API文档 http://openlayers.org/en/latest/apidoc/module-ol_View-View.html#animate 找到了新写法，如下：

view.animate({zoom: 10}, {center: [0, 0]});

新写法感觉更好理解！经过实际使用，发现传递给animate方法的参数，编写的先后顺序会影响动画效果，下面记录一下！

以下是我项目中截取的几行代码：

// 动画移动
// _this.map1.getView().animate({center: center}, {zoom: 18}) // 先移动再放大
// _this.map1.getView().animate({zoom: 18}, {center: center}) // 先放大再移动
_this.map1.getView().animate({center: center, zoom: 18}) // 同时移动和放大

我发现，每个参数单独对象设置，动画就会按顺序执行，如果参数都写在一个对象，动画就同时执行（另外，混写的情况请自行测试），下面分别是我的屏幕动画：

先移动再放大：

先放大再移动：

同时移动和放大：

（完）