Resolve constraints for View#animate() API calls

src/ol/View.js

@@ -284,8 +284,6 @@ class View extends BaseObject {
      */
     this.updateAnimationKey_;
 
-    this.updateAnimations_ = this.updateAnimations_.bind(this);
-
     /**
      * @private
      * @const
@@ -452,6 +450,16 @@ class View extends BaseObject {
    * @api
    */
   animate(var_args) {
+    if (this.isDef() && !this.getAnimating()) {
+      this.resolveConstraints(0);
+    }
+    this.animate_.apply(this, arguments);
+  }
+
+  /**
+   * @param {...(AnimationOptions|function(boolean): void)} var_args Animation options.
+   */
+  animate_(var_args) {
     let animationCount = arguments.length;
     let callback;
     if (animationCount > 1 && typeof arguments[animationCount - 1] === 'function') {
@@ -641,11 +649,7 @@ class View extends BaseObject {
     // prune completed series
     this.animations_ = this.animations_.filter(Boolean);
     if (more && this.updateAnimationKey_ === undefined) {
-      this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_);
+      this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_.bind(this));
-    }
-
-    if (!this.getAnimating()) {
-      setTimeout(this.resolveConstraints.bind(this), 0);
     }
   }
 
@@ -1085,7 +1089,7 @@ class View extends BaseObject {
     const callback = options.callback ? options.callback : VOID;
 
     if (options.duration !== undefined) {
-      this.animate({
+      this.animate_({
         resolution: resolution,
         center: this.getConstrainedCenter(center, resolution),
         duration: options.duration,
@@ -1312,7 +1316,7 @@ class View extends BaseObject {
         this.cancelAnimations();
       }
 
-      this.animate({
+      this.animate_({
         rotation: newRotation,
         center: newCenter,
         resolution: newResolution,
@@ -1330,9 +1334,9 @@ class View extends BaseObject {
    * @api
    */
   beginInteraction() {
-    this.setHint(ViewHint.INTERACTING, 1);
-
     this.resolveConstraints(0);
+
+    this.setHint(ViewHint.INTERACTING, 1);
   }
 
   /**

src/ol/control/Zoom.js

@@ -114,7 +114,6 @@ class Zoom extends Control {
       // upon it
       return;
     }
-    view.resolveConstraints(0);
     const currentZoom = view.getZoom();
     if (currentZoom !== undefined) {
       const newZoom = view.getConstrainedZoom(currentZoom + delta);

src/ol/interaction/Interaction.js

@@ -111,7 +111,7 @@ export function pan(view, delta, opt_duration) {
   const currentCenter = view.getCenter();
   if (currentCenter) {
     const center = [currentCenter[0] + delta[0], currentCenter[1] + delta[1]];
-    view.animate({
+    view.animate_({
       duration: opt_duration !== undefined ? opt_duration : 250,
       easing: linear,
       center: view.getConstrainedCenter(center)
@@ -135,7 +135,6 @@ export function zoomByDelta(view, delta, opt_anchor, opt_duration) {
   const newZoom = view.getConstrainedZoom(currentZoom + delta);
   const newResolution = view.getResolutionForZoom(newZoom);
 
-  view.resolveConstraints(0);
   if (view.getAnimating()) {
     view.cancelAnimations();
   }

test/spec/ol/interaction/keyboardpan.test.js

@@ -24,7 +24,7 @@ describe('ol.interaction.KeyboardPan', function() {
   describe('handleEvent()', function() {
     it('pans on arrow keys', function() {
       const view = map.getView();
-      const spy = sinon.spy(view, 'animate');
+      const spy = sinon.spy(view, 'animate_');
       const event = new MapBrowserEvent('keydown', map, {
         type: 'keydown',
         target: map.getTargetElement(),
@@ -51,7 +51,7 @@ describe('ol.interaction.KeyboardPan', function() {
       expect(spy.getCall(3).args[0].center).to.eql([128, 0]);
       view.setCenter([0, 0]);
 
-      view.animate.restore();
+      view.animate_.restore();
     });
   });