Merge pull request #12850 from MoonE/view-not-def-animation-fix

Fix issues with animate on View without center or resolution

src/ol/View.js

@@ -621,29 +621,36 @@ class View extends BaseObject {
       callback = arguments[animationCount - 1];
       --animationCount;
     }
-    if (!this.isDef()) {
+
+    let i = 0;
+    for (; i < animationCount && !this.isDef(); ++i) {
       // if view properties are not yet set, shortcut to the final state
-      const state = arguments[animationCount - 1];
+      const state = arguments[i];
       if (state.center) {
         this.setCenterInternal(state.center);
       }
       if (state.zoom !== undefined) {
         this.setZoom(state.zoom);
+      } else if (state.resolution) {
+        this.setResolution(state.resolution);
       }
       if (state.rotation !== undefined) {
         this.setRotation(state.rotation);
       }
+    }
+    if (i === animationCount) {
       if (callback) {
         animationCallback(callback, true);
       }
       return;
     }
+
     let start = Date.now();
     let center = this.targetCenter_.slice();
     let resolution = this.targetResolution_;
     let rotation = this.targetRotation_;
     const series = [];
-    for (let i = 0; i < animationCount; ++i) {
+    for (; i < animationCount; ++i) {
       const options = /** @type {AnimationOptions} */ (arguments[i]);
 
       const animation = {

test/browser/spec/ol/View.test.js

@@ -734,46 +734,82 @@ describe('ol/View', function () {
       expect(view.getAnimating()).to.eql(false);
     });
 
-    it('immediately completes if view is not defined before', function () {
-      const view = new View();
-      const center = [1, 2];
-      const zoom = 3;
-      const rotation = 0.4;
+    describe('Set final animation state if view is not defined.', function () {
+      it('immediately completes if view is not defined before', function () {
+        const view = new View();
+        const center = [1, 2];
+        const zoom = 3;
+        const rotation = 0.4;
 
-      view.animate({
-        zoom: zoom,
-        center: center,
-        rotation: rotation,
-        duration: 25,
-      });
-      expect(view.getAnimating()).to.eql(false);
-      expect(view.getCenter()).to.eql(center);
-      expect(view.getZoom()).to.eql(zoom);
-      expect(view.getRotation()).to.eql(rotation);
-    });
-
-    it('sets final animation state if view is not defined before', function () {
-      const view = new View();
-
-      const center = [1, 2];
-      const zoom = 3;
-      const rotation = 0.4;
-
-      view.animate(
-        {zoom: 1},
-        {center: [2, 3]},
-        {rotation: 4},
-        {
+        view.animate({
           zoom: zoom,
           center: center,
           rotation: rotation,
           duration: 25,
-        }
-      );
-      expect(view.getAnimating()).to.eql(false);
-      expect(view.getCenter()).to.eql(center);
-      expect(view.getZoom()).to.eql(zoom);
-      expect(view.getRotation()).to.eql(rotation);
+        });
+        expect(view.getAnimating()).to.eql(false);
+        expect(view.getCenter()).to.eql(center);
+        expect(view.getZoom()).to.eql(zoom);
+        expect(view.getRotation()).to.eql(rotation);
+      });
+
+      it('prefers zoom over resolution', function () {
+        const view = new View();
+        const zoom = 1;
+        view.animate({
+          center: [0, 0],
+          zoom: zoom,
+          resolution: 1,
+        });
+        expect(view.getZoom()).to.eql(zoom);
+      });
+
+      it('uses all animation steps to get final state', function () {
+        const view = new View();
+
+        const center = [1, 2];
+        const resolution = 3;
+        const rotation = 0.4;
+
+        view.animate(
+          {center: [2, 3]},
+          {
+            center: center,
+            rotation: 4,
+          },
+          {
+            rotation: rotation,
+          },
+          {resolution: resolution}
+        );
+        expect(view.getAnimating()).to.be(false);
+        expect(view.getCenter()).to.eql(center);
+        expect(view.getResolution()).to.be(resolution);
+        expect(view.getRotation()).to.be(rotation);
+      });
+
+      it('animates remaining steps after it becomes defined', function () {
+        const view = new View();
+
+        const center = [1, 2];
+        const resolution = 3;
+
+        view.animate(
+          {center: [2, 3]},
+          {
+            resolution: resolution,
+            center: center,
+          },
+          {
+            rotation: 2,
+            duration: 25,
+          }
+        );
+        expect(view.getAnimating()).to.be(true);
+        expect(view.getCenter()).to.eql(center);
+        expect(view.getResolution()).to.be(resolution);
+        expect(view.getRotation()).to.be(0);
+      });
     });
 
     it('prefers zoom over resolution', function (done) {