diff --git a/packages/g6/__tests__/demo/static/controller-viewport.ts b/packages/g6/__tests__/demo/static/controller-viewport.ts
index 9f44fbfe799..006e07767a9 100644
--- a/packages/g6/__tests__/demo/static/controller-viewport.ts
+++ b/packages/g6/__tests__/demo/static/controller-viewport.ts
@@ -43,26 +43,35 @@ export const controllerViewport: StaticTestCase = async (context) => {
   assert(viewportController.getViewportCenter()).toCloseTo([250, 250]);
   // 起始中心坐标 [250, 250]
 
-  const effectTiming = undefined; // { duration: 500 };
-
-  await viewportController.translate({ mode: 'absolute', value: [25, 25] }, effectTiming); // 当前坐标 [275, 275]
+  viewportController.translate({ mode: 'absolute', value: [25, 25] }); // 当前坐标 [275, 275]
   assert(viewportController.getViewportCenter()).toCloseTo([275, 275]);
 
-  await viewportController.translate({ mode: 'relative', value: [25, 25] }, effectTiming); // 当前坐标 [300, 300]
+  viewportController.translate({ mode: 'relative', value: [25, 25] }); // 当前坐标 [300, 300]
   assert(viewportController.getViewportCenter()).toCloseTo([300, 300]);
 
-  await viewportController.rotate({ mode: 'absolute', value: 45, origin: [300, 300] }, effectTiming); // 沿 [300, 300] 旋转 45 度，当前坐标 [300, 300]
+  viewportController.rotate({ mode: 'absolute', value: 45, origin: [300, 300] }); // 沿 [300, 300] 旋转 45 度，当前坐标 [300, 300]
 
-  await viewportController.rotate({ mode: 'relative', value: 45 }, effectTiming); // 沿 [250, 250] 旋转 45 度，当前坐标 [250 + 50 * 2**0.5, 250]
+  viewportController.rotate({ mode: 'relative', value: 45 }); // 沿 [250, 250] 旋转 45 度，当前坐标 [250 + 50 * 2**0.5, 250]
 
   assert(viewportController.getViewportCenter()).toCloseTo([250 + 50 * 2 ** 0.5, 250]);
 
   // 以当前坐标系为基准，缩放比例为 1.2，缩放中心点为 [250 + 50 * 2**0.5, 250]
-  await viewportController.zoom({ mode: 'absolute', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+  viewportController.zoom({ mode: 'absolute', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] });
 
   // 继续沿当前点缩放 1.2 倍
-  await viewportController.zoom({ mode: 'relative', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+  viewportController.zoom({ mode: 'relative', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] });
 
   // 此时边长度为：100 * 1.2 * 1.2 = 144，坐标为 [250 + 50 * 2**0.5, 250]
-  assert(viewportController.getZoom()).toBe(1.44);
+  assert(viewportController.getZoom()).toCloseTo(1.44);
+
+  const effectTiming = { duration: 500 };
+
+  await viewportController.zoom({ mode: 'absolute', value: 1, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+
+  assert(viewportController.getZoom()).toCloseTo(1);
+
+  await viewportController.rotate({ mode: 'absolute', value: 0, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+
+  await viewportController.translate({ mode: 'absolute', value: [0, 0] }, effectTiming);
+  assert(viewportController.getViewportCenter()).toCloseTo([250, 250]);
 };
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg b/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg
index 5cf36f9b88e..f4dc33fc365 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg
@@ -7,10 +7,7 @@
   tabindex="1"
 >
   <defs />
-  <g
-    id="g-svg-camera"
-    transform="matrix(0,-1.440000,1.440000,0,-39.289326,610)"
-  >
+  <g id="g-svg-camera" transform="matrix(1,-0,0,1,-0,0)">
     <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
       <g transform="matrix(1,0,0,1,200,250)">
         <line
diff --git a/packages/g6/src/runtime/viewport.ts b/packages/g6/src/runtime/viewport.ts
index 30543705a28..a60f3c1ba1d 100644
--- a/packages/g6/src/runtime/viewport.ts
+++ b/packages/g6/src/runtime/viewport.ts
@@ -83,7 +83,11 @@ export class ViewportController {
       this.context.graph.emit(GraphEvent.BEFORE_VIEWPORT_ANIMATION, options);
 
       return new Promise<void>((resolve) => {
-        resolveWhenTimeout(resolve, effectTiming.duration);
+        const onfinish = () => {
+          this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
+          resolve();
+        };
+        resolveWhenTimeout(onfinish, effectTiming.duration);
 
         this.camera.gotoLandmark(
           this.createLandmark(
@@ -97,13 +101,7 @@ export class ViewportController {
                   focalPoint: [ox - x, oy - y, z ?? fz - z],
                 },
           ),
-          {
-            ...effectTiming,
-            onfinish: () => {
-              this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
-              resolve();
-            },
-          },
+          { ...effectTiming, onfinish },
         );
       });
     } else {
@@ -121,17 +119,15 @@ export class ViewportController {
       this.context.graph.emit(GraphEvent.BEFORE_VIEWPORT_ANIMATION, options);
 
       return new Promise<void>((resolve) => {
-        resolveWhenTimeout(resolve, effectTiming.duration);
+        const onfinish = () => {
+          this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
+          resolve();
+        };
+        resolveWhenTimeout(onfinish, effectTiming.duration);
 
         this.camera.gotoLandmark(
           this.createLandmark({ roll: mode === 'relative' ? camera.getRoll() + angle : angle }),
-          {
-            ...effectTiming,
-            onfinish: () => {
-              this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
-              resolve();
-            },
-          },
+          { ...effectTiming, onfinish },
         );
       });
     } else {
@@ -157,14 +153,13 @@ export class ViewportController {
       this.context.graph.emit(GraphEvent.BEFORE_VIEWPORT_ANIMATION, options);
 
       return new Promise<void>((resolve) => {
-        resolveWhenTimeout(resolve, effectTiming.duration);
-        this.camera.gotoLandmark(this.createLandmark({ zoom: targetRatio }), {
-          ...effectTiming,
-          onfinish: () => {
-            this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
-            resolve();
-          },
-        });
+        const onfinish = () => {
+          this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
+          resolve();
+        };
+        resolveWhenTimeout(onfinish, effectTiming.duration);
+
+        this.camera.gotoLandmark(this.createLandmark({ zoom: targetRatio }), { ...effectTiming, onfinish });
       });
     } else {
       camera.setZoomByViewportPoint(targetRatio, [origin[0], origin[1]]);