概述

本文主要介绍 Openlayers 中的动画以及ol/easing模块。

map和view 基础知识

Openlayers 中动画的对象不是地图map，而是view.在讲解动画知识前，我们需要弄清楚map和view的作用、区别以及它们之间的联系。

map

map负责将地图元素组合到一起并渲染到屏幕上，由它管理所有的地图图层、控件、交互等，并且渲染这些内容。它是应用程序中所有地图相关功能的容器，负责管理用户与地图的交互。

主要功能：

• 图层管理：管理地图上的所有图层（如矢量图层、瓦片图层等）。
• 交互管理：提供各种交互功能，如拖拽、缩放、点击等。
• 控件管理：控制地图的界面控件，例如缩放控件、比例尺、导航控件等。
• 渲染地图：负责将地图和图层渲染到 HTML 页面中。
• 视图控制：与 View 对接，使用 View 来控制地图的中心、缩放、旋转等。

view

而view则是地图视图控制器，它主要负责设置地图的视图状态（如中心点、缩放级别、旋转角度等），以及控制地图的动画效果。View 本质上定义了地图的 "观察角度" 或者 "显示区域"，它不直接处理地图图层、交互等内容，而是专注于如何展示这些图层。

主要功能：

• 控制地图中心点：决定地图的显示位置。
• 控制缩放级别：决定地图的缩放级别。
• 控制旋转角度：控制地图的旋转。
• 控制视口范围：设置地图显示的可视区域（例如，限制可缩放的最小和最大级别）。
• 动画效果：可以添加平移、缩放、旋转等动画效果。

view 和 map 的联系与区别

区别：

• 职责不同：

  • view 主要负责地图的视图属性，如中心点、缩放级别、旋转等，它控制地图的 "展示状态"。
  • map 主要负责地图的整体管理，包含图层、控件、交互等，并负责地图的渲染。

• 层次不同：

  • view 直接影响地图的显示方式，但它不直接管理地图的内容和交互。
  • map 则是一个更高层次的容器，它包含了 view 和其他与地图相关的所有元素，如图层和控件。

联系：

• 协同工作：map 和 view 是密切相关的，map 依赖 view 来渲染和展示地图的视图状态。map 通过 view 属性将 view 传递给 map，从而使得 map 可以控制地图的显示。
• 共享设置：在 map 初始化时，你可以传递一个 view 实例来控制地图的初始显示状态。之后，你还可以通过 view 来动态调整地图的视图属性（例如，平移、缩放等）。

animate

设置动画时需要调用map.getView().animate(args)，通过地图实例的getView()方法获取地图当前的view,再调用animate方法。所谓的动画无非就是平移、旋转和缩放三种变化，以及这三种变化的组合变化。

animate的参数

参数args可以是一个或多个对象，该对象拥有以下属性：

• center: 地图在动画结束时的中心点。

• zoom: 地图在动画结束时的层级，这个属性优先级高于resolution。

• resolution:在动画结束时的分辨率，如果同时设置了zoom,z 则该属性会被忽略。

• rotation:地图在动画结束时的倾斜角度。

• anchor: 在设置分辨率或者倾斜度时，设置该值会保留该值位置固定。

• duration: 动画持续时间，默认是1000 (ms)。

• easing:动画过程中使用的缓动函数（默认为 inAndOut）。该函数将在每一帧被调用，参数为表示动画持续时间的某个比例的数字。函数应返回一个介于 0 和 1 之间的数字，表示动画进度向目标状态的推进程度。

另外animation方法的还可以接受最后一个参数是函数，该函数作为回调函数，该回调函数接受一个布尔值，如果前面的动画执行完成，则该布尔值是true;相反，如果动画没有执行完成，过程中被取消，则该值是false。

定义一个飞行动画的回调函数如下：

const flyTo = (location, done = () => {}) => {
  // 飞行动画
  let view = mapInstance.getView();
  let duration = 2000;
  let zoom = view.getZoom();
  let parts = 2;
  let called = false;
  function callback(complete) {
    --parts;
    if (called) {
      return;
    }
    if (parts === 0 || !complete) {
      called = true;
      done(complete);
    }
  }

  view.animate(
    {
      center: location,
      duration: duration,
    },
    callback
  );
  view.animate(
    {
      zoom: zoom - 1,
      duration: duration / 2,
    },
    {
      zoom: zoom,
      duration: duration / 2,
    },
    callback
  );
};

ol/easing模块

在 OpenLayers 中，ol/easing 模块是用来处理平滑动画过渡的工具库。它包含了一些常见的缓动函数，这些函数能够帮助我们在地图动画过程中，控制动画的速率和节奏，以实现更加流畅和自然的过渡效果。

缓动函数包括如下几种：

• easeIn：表示"加速运动"，即动画开始时速度较慢，逐渐加快，直到动画结束时静止。
• easeOut：表示"减速运动"，即动画开始时速度较快，逐渐减慢，直到动画结束时静止。
• inAndOut：表示先加速后减速，即动画开始时速度较慢，逐渐加速，然后减速，直到动画结束时静止。
• linear：匀速运动，即动画始终以一个恒定的速度运行。
• upAndDown：和inAndOut类似，不过它的减速会稍微延迟执行。

缓动函数通常接受一个参数并返回一个值

参数：

• t (time): 这个参数表示动画的当前进度，通常是一个介于 0 到 1 之间的数值，表示动画从开始到结束的比例。具体来说，0 表示动画开始时，1 表示动画结束时。

返回值：

• 返回值：缓动函数会根据输入的 t 值返回一个新的数值，该值通常也是介于 0 到 1 之间，表示动画进度的变化情况。这个返回值决定了动画的实际进度，并影响动画的速度变化。