Navigation实现一镜到底转场 原创

@Provide('NavPathStack') pageInfos: NavPathStack = new NavPathStack();
Navigation(this.pageInfos) {
    
}

{
  "routerMap": [
    {
      "name": "pageTwo",//名称，根据此参数进行跳转
      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",//目标页面路径
      "buildFunction": "PageTwoBuilder"
    }
  ]
}

{
  "module": {
      "routerMap": "$profile:route_map"
      }
}

Grid(this.scroller) {
  ForEach(this.data, (item: Resource, index: number) => {
    GridItem() {
      if (this.clickedIndex !== index || (this.isFirstPageShow)) {
        Image(item)
          .width('100%')
          .height('100%')
          .objectFit(ImageFit.Cover)
          .onClick(() => {
            this.onItemClick(index)
          })
          .geometryTransition('app.media.img_' + JSON.stringify(index % 9))
          .transition(TransitionEffect.opacity(0.99))
      }
    }
    .width(px2vp(381))
    .height(px2vp(381))
  }, (item: number) => item + '')
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 1fr 1fr')

onItemClick(index: number) {
  let param: Record<string, Object> = {};
  this.clickedIndex = index;
  param['selectedIndex'] = this.clickedIndex;
  param['bigImageData'] = this.data
  param['onIndexChange'] = (index: number) => {
    this.onIndexChange(index);
  };
  param['onBackToFirstPage'] = () => {
    this.onBack();
  }

  animateTo({
    duration: 250,
    curve: Curve.EaseIn,
  }, () => {
    this.pageInfos.pushPath({ name: 'pageTwo', param: param }, false);
    this.isFirstPageShow = false;
  })
}

Swiper(this.swiperController) {
  ForEach(this.bigImageData, (item: Resource, index: number) => {
    PhotoItem({
      //配置共享元素id
      imageUrl: 'app.media.img_' + JSON.stringify(index % 9),
      backToFirstPage: this.backToFirstPage
    })
  }, (item: string) => item)
}
private backToFirstPage: () => void = () => {
  animateTo({
    duration: 300,
    curve: Curve.EaseIn,
  }, () => {
    this.onFirstPageShow();
    this.pageInfos.pop(false);
  })
}

@Entry
@Component
struct Index {
  @Provide('NavPathStack') pageInfos: NavPathStack = new NavPathStack();
  build() {
    Navigation(this.pageInfos) {
        Button().onClick(()=>{
          this.pageInfos.pushPath({name:"pageOne"})
        })
    }
    .mode(NavigationMode.Stack)
    .hideBackButton(true)
    .backgroundColor('#F1F3F5')
  }
}

@Builder
export function PageOneBuilder() {
  PageOne();
}
@Component
export struct PageOne {
  private pageInfos: NavPathStack = new NavPathStack();
  @State isEnabled: boolean = true;
  @State clickedIndex: number = 0;
  private scroller: Scroller = new Scroller();
  private data: Resource[] =
    [$r("app.media.img_0"), $r("app.media.img_1"), $r("app.media.img_2"), $r("app.media.img_3"), $r("app.media.img_4")
      , $r("app.media.img_5"), $r("app.media.img_6"), $r("app.media.img_7"), $r("app.media.img_8"),
      $r("app.media.img_9")];
  @State isFirstPageShow: boolean = true;
  onIndexChange(index: number): void {
    this.clickedIndex = index;
  }
  onBack(): void {
    this.isFirstPageShow = true;
  }

  onItemClick(index: number) {
    let param: Record<string, Object> = {};
    this.clickedIndex = index;
    param['selectedIndex'] = this.clickedIndex;
    param['bigImageData'] = this.data
    param['onIndexChange'] = (index: number) => {
      this.onIndexChange(index);
    };
    param['onBackToFirstPage'] = () => {
      this.onBack();
    }

    animateTo({
      duration: 250,
      curve: Curve.EaseIn,
    }, () => {
      this.pageInfos.pushPath({ name: 'pageTwo', param: param }, false);
      this.isFirstPageShow = false;
    })
  }

  build() {
    NavDestination() {
      Grid(this.scroller) {
        ForEach(this.data, (item: Resource, index: number) => {
          GridItem() {
            if (this.clickedIndex !== index || (this.isFirstPageShow)) {
              Image(item)
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Cover)
                .onClick(() => {
                  this.onItemClick(index)
                })
                .geometryTransition('app.media.img_' + JSON.stringify(index % 9))
                .transition(TransitionEffect.opacity(0.99))
            }
          }
          .width(px2vp(381))
          .height(px2vp(381))
        }, (item: number) => item + '')
      }
      .rowsTemplate('1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(2)
      .rowsGap(2)
      .size({
        width: px2vp(1169),
        height: px2vp(1169)
      })
      .margin({ top: 16 })
    }.onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
    })

  }
}

import { PhotoItem } from "../MyComponent";
import { matrix4 } from "@kit.ArkUI";

@Builder
export function PageTwoBuilder() {
  PageTwo();
}

@Component
export struct PageTwo {
  @State selectedIndex: number = 0;
  @State scaleRatio: number = 1;
  @State positionX: number = 0;
  @State positionY: number = 0;
  @State scaleX: number = 1;
  @State scaleY: number = 1;
  @State translateX: number = 0;
  @State translateY: number = 0;
  @State imageMatrix: matrix4.Matrix4Transit = matrix4.identity();
  private pageInfos: NavPathStack = new NavPathStack();
  private swiperController: SwiperController = new SwiperController();
  @State bigImageData:Resource[] = []
  aboutToAppear(): void {
  }
  private onIndexChange: (index: number) => void = (_index: number) => {
  }
  private backToFirstPage: () => void = () => {
    animateTo({
      duration: 300,
      curve: Curve.EaseIn,
    }, () => {
      this.onFirstPageShow();
      this.pageInfos.pop(false);
    })
  }
  private onFirstPageShow: () => void = () => {};

  private onBack?: () => void;

  build() {
    NavDestination() {
      Swiper(this.swiperController) {
        ForEach(this.bigImageData, (item: Resource, index: number) => {
          PhotoItem({
            //配置共享元素id
            imageUrl: 'app.media.img_' + JSON.stringify(index % 9),
            backToFirstPage: this.backToFirstPage
          })
        }, (item: string) => item)
      }
      .transition(TransitionEffect.opacity(0.99))
      .width('100%')
      .height('100%')
      .clip(false)
      .index(this.selectedIndex)
      .onChange((index: number) => {
        this.selectedIndex = index;
        this.onIndexChange(index);
      })
      .onAnimationStart((_: number, targetIndex: number) => {
        this.onIndexChange(targetIndex);
      })
      .indicator(false)
    }
    .width('100%')
    .height('100%')
    .mode(NavDestinationMode.DIALOG)
    .expandSafeArea([SafeAreaType.SYSTEM])
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
      let param = context.pathInfo?.param as Record<string, Object>;
      if (param === undefined) {
        return;
      }
      this.bigImageData = param['bigImageData'] as Resource[]
      this.selectedIndex = param['selectedIndex'] as number;
      this.onIndexChange = param['onIndexChange'] as (index: number) => void;
      this.onFirstPageShow = param['onBackToFirstPage'] as () => void;
    })
    .hideTitleBar(true)
    .onBackPressed(() => {
      this.backToFirstPage();
      return true;
    })
    .transition(TransitionEffect.opacity(0.99))
  }
}

import { componentUtils, inspector, matrix4 } from '@kit.ArkUI';

enum Status {
  IDLE,
  PINCHING,
  PAN_ONLY,
  READY_TO_BACK
}

@Component
export struct PhotoItem {
  @State status: Status = Status.IDLE;
  @State panDirection: PanDirection = PanDirection.Vertical;
  @State imageScale: number = 1; // scale caused by the zoom gesture.
  @State imagePullingDownScale: number = 1; // Drag gestures to cause scale.
  @State imageTranslateX: number = 0; // px
  @State imageTranslateY: number = 0; // px
  @State centerX: number = 0;
  @State centerY: number = 0;
  // Bound component boundary.
  @State maxOffsetX: number = 0;
  @State minOffsetX: number = 0;
  @State maxOffsetY: number = 0;
  @State minOffsetY: number = 0;
  @State gestureDisabled: boolean = false; // Global disable gesture.
  @State @Watch('onAllGestureFinish') gestureCount: number = 0;
  @State geometryPositionX: number = 0;
  @State geometryPositionY: number = 0;
  @State geometryScale: number = 1;
  private imageUrl: string = '';
  private photoId: string = 'myCat'; // Get picture location
  private photoListener: inspector.ComponentObserver = inspector.createComponentObserver(this.photoId);
  private imagePositionX: number = 0; // The global coordinates before the image transform.
  private imagePositionY: number = 600; // The global coordinates before the image transform.
  private imageWidth: number = 1260; // Image size (px), to be specified.
  private imageHeight: number = 1680;
  private lastCenterX: number = 0;
  private lastCenterY: number = 0;
  // Record the initial state of the gesture. The unit of offset is vp
  private startGestureOffsetX: number = 0;
  private startGestureOffsetY: number = 0;
  private startGestureScale: number = 1;
  // Constrained display boundary.
  private displayLeft: number = 0;
  private displayTop: number = 126;
  private displayRight: number = 1260;
  private displayBottom: number = 2629;
  // The actual display boundary is controlled by both the image boundary and the display boundary.
  private realDisplayBoundsLeft: number = 0;
  private realDisplayBoundsTop: number = 0;
  private realDisplayBoundsRight: number = 0;
  private realDisplayBoundsBottom: number = 0;
  private firstStarted = true; // Avoid entering during page initialization.
  private backToFirstPage: () => void = () => {
  };

  // Get component location.
  init(): void {
    let photoInfo = componentUtils.getRectangleById(this.photoId);
    this.imagePositionX = photoInfo.windowOffset.x;
    this.imagePositionY = photoInfo.windowOffset.y;
  }

  onAllGestureFinish(): void {
    if (this.firstStarted) {
      this.firstStarted = false;
      return;
    }

    if (this.gestureCount !== 0) {
      return;
    }

    if (this.status === Status.IDLE) {
      this.disableGesture();
      animateTo({
        duration: 300,
        onFinish: () => {
          this.updatePanDirection();
          this.resumeGesture();
        }
      }, () => {
        this.imagePullingDownScale = 1;
        let leftTop = this.calculateLeftTopPoint();
        let rightBottom = this.calculateRightBottomPoint();
        let imageWidth = this.imageWidth * this.imageScale;
        if (imageWidth < this.displayRight - this.displayLeft) {
          // If the picture width is less than the width of the display range, center.
          this.centerX = 0;
          this.imageTranslateX = 0;
        } else if (leftTop[0] > this.displayLeft) {
          // Out of display left edge, move back.
          this.imageTranslateX += (this.displayLeft - leftTop[0]);
        } else if (rightBottom[0] < this.displayRight) {
          this.imageTranslateX += (this.displayRight - rightBottom[0]);
        }

        let imageHeight = this.imageHeight * this.imageScale;
        if (imageHeight < this.displayBottom - this.displayTop) {
          this.centerY = 0;
          this.imageTranslateY = 0;
        } else if (leftTop[1] > this.displayTop) {
          this.imageTranslateY += (this.displayTop - leftTop[1]);
        } else if (rightBottom[1] < this.displayBottom) {
          this.imageTranslateY += (this.displayBottom - rightBottom[1]);
        }
      })
    }

    if (this.status === Status.READY_TO_BACK) {
      this.status = Status.IDLE;
      this.disableGesture();
      animateTo({
        duration: 300,
        onFinish: () => {
          this.resumeGesture();
          this.updatePanDirection();
        }
      }, () => {
        let leftTopPoint = this.calculateLeftTopPoint();
        this.geometryPositionX = leftTopPoint[0] - this.imagePositionX;
        this.geometryPositionY = leftTopPoint[1] - this.imagePositionY;
        this.geometryScale = this.imageScale * this.imagePullingDownScale;
        this.resetTransform();
        this.backToFirstPage();
      })
    }
  }

  disableGesture(): void {
    this.gestureDisabled = true;
  }

  resumeGesture(): void {
    this.gestureDisabled = false;
  }

  // Calculate the global coordinates in the upper left corner of the image after the transform.
  calculateLeftTopPoint(): [number, number] {
    let matrix = matrix4.identity()
      .scale({
        x: this.imageScale * this.imagePullingDownScale,
        y: this.imageScale * this.imagePullingDownScale,
        centerX: this.centerX,
        centerY: this.centerY
      })
      .translate({ x: this.imageTranslateX, y: this.imageTranslateY })
    let leftTop = matrix.transformPoint([-this.imageWidth / 2, -this.imageHeight / 2]);
    let leftTopPointX = leftTop[0] + this.imageWidth / 2 + this.imagePositionX;
    let leftTopPointY = leftTop[1] + this.imageHeight / 2 + this.imagePositionY;
    return [leftTopPointX, leftTopPointY];
  }

  // Calculate the global coordinates of the lower right corner after the image transform.
  calculateRightBottomPoint(): [number, number] {
    let matrix = matrix4.identity()
      .scale({
        x: this.imageScale * this.imagePullingDownScale,
        y: this.imageScale * this.imagePullingDownScale,
        centerX: this.centerX,
        centerY: this.centerY
      })
      .translate({
        x: this.imageTranslateX,
        y: this.imageTranslateY
      })
    let rightBottom = matrix.transformPoint([this.imageWidth / 2, this.imageHeight / 2]);
    let rightBottomPointX = rightBottom[0] + this.imageWidth / 2 + this.imagePositionX;
    let rightBottomPointY = rightBottom[1] + this.imageHeight / 2 + this.imagePositionY;
    return [rightBottomPointX, rightBottomPointY];
  }

  // Here you need to enter the coordinates relative to the top left corner of the image.
  updateCenter(gestureCenterPoint: [number, number]) {
    this.lastCenterX = this.centerX;
    this.lastCenterY = this.centerY;
    let matrix = matrix4.identity()
      .scale({
        x: this.imageScale * this.imagePullingDownScale,
        y: this.imageScale * this.imagePullingDownScale,
        centerX: this.lastCenterX,
        centerY: this.lastCenterY
      })
      .translate({
        x: this.imageTranslateX,
        y: this.imageTranslateY
      })
    let leftTop = matrix.transformPoint([-this.imageWidth / 2, -this.imageHeight / 2]); // px
    let leftTopPointX = leftTop[0] + this.imageWidth / 2; // px
    let leftTopPointY = leftTop[1] + this.imageHeight / 2;
    this.centerX = (gestureCenterPoint[0] - leftTopPointX) / this.imageScale - this.imageWidth / 2;
    this.centerY = (gestureCenterPoint[1] - leftTopPointY) / this.imageScale - this.imageHeight / 2;
  }

  // According to the change of center, adjust translate to ensure that the position of the image remains unchanged after the transform.
  updateTranslateAccordingToCenter() {
    if (this.lastCenterX === this.centerX && this.lastCenterY === this.centerY) {
      return;
    }
    let lastTranslateX = this.imageTranslateX;
    let lastTranslateY = this.imageTranslateY;
    let matrixOld = matrix4.identity()
      .scale({
        x: this.imageScale * this.imagePullingDownScale,
        y: this.imageScale * this.imagePullingDownScale,
        centerX: this.lastCenterX,
        centerY: this.lastCenterY
      })
      .translate({ x: lastTranslateX, y: lastTranslateY })
    let matrixNew = matrix4.identity()
      .scale({
        x: this.imageScale * this.imagePullingDownScale,
        y: this.imageScale * this.imagePullingDownScale,
        centerX: this.centerX,
        centerY: this.centerY
      })
      .translate({
        x: this.imageTranslateX,
        y: this.imageTranslateY
      })
    let leftTopOld = matrixOld.transformPoint([-this.imageWidth / 2, -this.imageHeight / 2]);
    let leftTopNew = matrixNew.transformPoint([-this.imageWidth / 2, -this.imageHeight / 2]);
    this.imageTranslateX += (leftTopOld[0] - leftTopNew[0]);
    this.imageTranslateY += (leftTopOld[1] - leftTopNew[1]);
  }

  updateExtremeOffset() {
    let totalScale = this.imageScale * this.imagePullingDownScale;
    let matrix = matrix4.identity()
      .scale({
        x: totalScale,
        y: totalScale,
        centerX: this.centerX,
        centerY: this.centerY
      })

    let p = matrix.transformPoint([-this.imageWidth / 2, -this.imageHeight / 2]);
    let leftTopPointX = p[0] + this.imageWidth / 2 + this.imagePositionX;
    let leftTopPointY = p[1] + this.imageHeight / 2 + this.imagePositionY;
    let rightBottomPointX = leftTopPointX + this.imageWidth * totalScale;
    let rightBottomPointY = leftTopPointY + this.imageHeight * totalScale;

    this.realDisplayBoundsLeft = Math.max(this.displayLeft, leftTopPointX);
    this.realDisplayBoundsRight = Math.min(this.displayRight, rightBottomPointX);
    this.realDisplayBoundsTop = Math.max(this.displayTop, leftTopPointY);
    this.realDisplayBoundsBottom = Math.min(this.displayBottom, rightBottomPointY);

    this.minOffsetX = px2vp(this.realDisplayBoundsRight - rightBottomPointX);
    this.maxOffsetX = px2vp(this.realDisplayBoundsLeft - leftTopPointX);
    this.minOffsetY = px2vp(this.realDisplayBoundsBottom - rightBottomPointY);
    this.maxOffsetY = px2vp(this.realDisplayBoundsTop - leftTopPointY);
  }

  updatePanDirection(): void {
    this.panDirection = PanDirection.Vertical;
    let leftTop = this.calculateLeftTopPoint();
    let rightBottom = this.calculateRightBottomPoint();
    if (leftTop[0] < this.displayLeft - 1) {
      this.panDirection = this.panDirection | PanDirection.Right;
    }
    if (rightBottom[0] > this.displayRight + 1) {
      this.panDirection = this.panDirection | PanDirection.Left;
    }
  }

  resetTransform(): void {
    this.imageTranslateX = 0;
    this.imageTranslateY = 0;
    this.imageScale = 1;
    this.imagePullingDownScale = 1;
    this.centerX = 0;
    this.centerY = 0;
    this.updateExtremeOffset();
  }

  cannotPan(): boolean {
    return this.gestureDisabled;
  }

  cannotPinch(): boolean {
    return this.status === Status.PAN_ONLY || this.gestureDisabled;
  }

  aboutToAppear(): void {
    this.photoListener.on('layout', () => {
      this.init();
    });
    this.updateExtremeOffset();
    this.updatePanDirection();
  }

  build() {
    Stack() {
      Column()
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Black)
        .opacity(this.imagePullingDownScale)
        .transition(TransitionEffect.OPACITY)
      Stack() {
        Image($r(this.imageUrl))
          .width(px2vp(this.imageWidth) * this.geometryScale)
          .height(px2vp(this.imageHeight) * this.geometryScale)
          .transform(matrix4.identity()
            .scale({
              x: this.imageScale * this.imagePullingDownScale,
              y: this.imageScale * this.imagePullingDownScale,
              centerX: this.centerX,
              centerY: this.centerY
            })
            .translate({
              x: this.imageTranslateX,
              y: this.imageTranslateY
            }))
          .geometryTransition(this.imageUrl)
          .transition(TransitionEffect.OPACITY)
          .position({
            x: px2vp(this.geometryPositionX),
            y: px2vp(this.geometryPositionY)
          })
      }
      .id(this.imageUrl)
      .width(px2vp(this.imageWidth))
      .height(px2vp(this.imageHeight))
      .parallelGesture(GestureGroup(GestureMode.Parallel,
        PinchGesture()
          .onActionStart((event: GestureEvent) => {
            this.status = Status.PINCHING;
            this.updateCenter([vp2px(event.pinchCenterX), vp2px(event.pinchCenterY)]);
            this.updateTranslateAccordingToCenter();
            this.startGestureScale = this.imageScale;
            this.gestureCount++;
          })
          .onActionUpdate((event: GestureEvent) => {
            this.imageScale = this.startGestureScale * event.scale;
            this.updateExtremeOffset();
          })
          .onActionEnd(() => {
            this.status = Status.IDLE;
            if (this.imageScale < 1) {
              animateTo({ duration: 250, curve: Curve.EaseOut }, () => {
                this.imageScale = 1; // Don't wait until all the gestures are over
              })
            }
            this.gestureCount--;
          }),
        PanGesture({ direction: this.panDirection })
          .onActionStart((event: GestureEvent) => {
            this.panDirection = PanDirection.All;
            let leftTop = this.calculateLeftTopPoint();
            // If the picture is at the top of the display before the single drop down starts, the return condition can be triggered.
            if (leftTop[1] >= this.displayTop - 1 && this.status !== Status.PINCHING) {
              this.status = Status.PAN_ONLY;
            }
            if (this.status !== Status.PINCHING) {
              let currentX: number = event.offsetX;
              let currentY: number = event.offsetY;
              if (event.fingerList[0] !== undefined) {
                currentX = event.fingerList[0].globalX;
                currentY = event.fingerList[0].globalY;
              }
              this.updateCenter([vp2px(currentX - this.imagePositionX), vp2px(currentY) - this.imagePositionY]);
              this.updateTranslateAccordingToCenter();
              this.updateExtremeOffset();
            }
            this.startGestureOffsetX = px2vp(this.imageTranslateX);
            this.startGestureOffsetY = px2vp(this.imageTranslateY);
            this.gestureCount++;
          })
          .onActionUpdate((event: GestureEvent) => {
            let offsetX = event.offsetX;
            let offsetY = event.offsetY;

            // In the drag-only state, the picture completely follows the hand.
            if (this.status === Status.PAN_ONLY) {
              this.imageTranslateX = vp2px(this.startGestureOffsetX + offsetX);
              this.imageTranslateY = vp2px(this.startGestureOffsetY + offsetY);
              this.imagePullingDownScale = 1 - Math.abs(event.offsetY) / px2vp(2720);
            }

            // The rest of the time using dynamic hand comparison.
            if (this.status !== Status.PAN_ONLY) {
              if (offsetX + this.startGestureOffsetX > this.maxOffsetX) {
                let distance = offsetX + this.startGestureOffsetX - this.maxOffsetX;
                offsetX = this.maxOffsetX + distance * (1 - Math.exp(-distance / 300)) - this.startGestureOffsetX;
              }
              if (offsetX + this.startGestureOffsetX < this.minOffsetX) {
                let distance = this.minOffsetX - (offsetX + this.startGestureOffsetX)
                offsetX = this.minOffsetX - distance * (1 - Math.exp(-distance / 300)) - this.startGestureOffsetX;
              }
              if (offsetY + this.startGestureOffsetY > this.maxOffsetY) {
                let distance = offsetY + this.startGestureOffsetY - this.maxOffsetY;
                offsetY = this.maxOffsetY + distance * (1 - Math.exp(-distance / 300)) - this.startGestureOffsetY;
              }
              if (offsetY + this.startGestureOffsetY < this.minOffsetY) {
                let distance = this.minOffsetY - (offsetY + this.startGestureOffsetY)
                offsetY = this.minOffsetY - distance * (1 - Math.exp(-distance / 300)) - this.startGestureOffsetY;
              }
              this.imageTranslateX = vp2px(this.startGestureOffsetX + offsetX);
              this.imageTranslateY = vp2px(this.startGestureOffsetY + offsetY);
            }
          })
          .onActionEnd((event: GestureEvent) => {
            if (this.status === Status.PAN_ONLY) {
              if (event.offsetY > 100) {
                // Trigger return condition.
                this.status = Status.READY_TO_BACK;
              } else {
                this.status = Status.IDLE;
              }
            }
            this.gestureCount--;
          })
      ))
      .onGestureJudgeBegin((gestureInfo: GestureInfo) => {
        if (gestureInfo.type === GestureControl.GestureType.PAN_GESTURE) {
          return this.cannotPan() ? GestureJudgeResult.REJECT : GestureJudgeResult.CONTINUE;
        }
        if (gestureInfo.type === GestureControl.GestureType.PINCH_GESTURE) {
          return this.cannotPinch() ? GestureJudgeResult.REJECT : GestureJudgeResult.CONTINUE;
        }
        return GestureJudgeResult.CONTINUE;
      })
    }
    .width('100%')
    .height('100%')
  }
}