实现思路

首先配置路由跳转模式，使用 router.pushUrl 时，设置 RouterMode.Single。

其次定义共享 ID，在列表页（源页面）和详情页（目标页面）的 Image 组件上，使用 sharedTransition 属性。需要注意：两个组件设置完全相同的字符串 id。

最后我们在设置转场参数，配置 duration（动画时长）、curve（动画曲线），调整 zIndex，确保跳转过程中图片浮在其他内容之上。

效果

完整代码

import router from '@ohos.router';

// 定义数据模型
class ImageModel {
  id: string;
  url: string;
  title: string;

  constructor(id: string, url: string, title: string) {
    this.id = id;
    this.url = url;
    this.title = title;
  }
}

@Entry
@Component
struct Index {
  private dataList: ImageModel[] = [
    new ImageModel('1', 'https://www.daymw.com/wp-content/themes/yusi/img/pic/5.jpg', '风景图片 1'),
    new ImageModel('2', 'https://www.daymw.com/wp-content/themes/yusi/img/pic/3.jpg', '城市建筑 2'),
    new ImageModel('3', 'https://www.daymw.com/wp-content/themes/yusi/img/pic/4.jpg', '自然风光 3'),
    new ImageModel('4', 'https://www.daymw.com/wp-content/themes/yusi/img/pic/1.jpg', '抽象艺术 4'),
  ];

  build() {
    Column() {
      Text("共享元素转场演示")
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 40, bottom: 20 })

      List({ space: 15 }) {
        ForEach(this.dataList, (item: ImageModel) => {
          ListItem() {
            Row() {
              Image(item.url)
                .width(80)
                .height(80)
                .borderRadius(8)
                .objectFit(ImageFit.Cover)
                .sharedTransition('shared_image_id_' + item.id, {
                  duration: 400,
                  curve: Curve.FastOutSlowIn
                })
                .onClick(() => {
                  this.jumpToDetail(item);
                })

              Text(item.title)
                .fontSize(18)
                .margin({ left: 15 })
                .layoutWeight(1)
            }
            .width('100%')
            .padding(15)
            .backgroundColor('#FFFFFF')
            .borderRadius(12)
            .shadow({ radius: 5, color: '#1A000000', offsetY: 2 })
          }
        })
      }
      .layoutWeight(1)
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }

  // 跳转详情页
  private jumpToDetail(item: ImageModel) {
    router.pushUrl({
      url: 'pages/Detail',
      params: {
        id: item.id,
        url: item.url,
        title: item.title
      }
    }, router.RouterMode.Single);
  }
}

import router from '@ohos.router';

@Entry
@Component
struct Detail {
  @State imgUrl: string = '';
  @State imgId: string = '';
  @State imgTitle: string = '';

  aboutToAppear(): void {
    const params = router.getParams() as Record<string, Object>;
    if (params) {
      this.imgId = params['id'] as string;
      this.imgUrl = params['url'] as string;
      this.imgTitle = params['title'] as string;
    }
  }

  build() {
    Column() {
      Row() {
        Image($r('sys.symbol.chevron_left'))
          .width(24)
          .height(24)
          .fillColor(Color.Black)
          .onClick(() => {
            router.back();
          })

        Text(this.imgTitle)
          .fontSize(20)
          .fontWeight(FontWeight.Medium)
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
      }
      .width('100%')
      .height(56)
      .padding({ left: 15, right: 15 })

      
      Scroll() {
        Column() {
          Image(this.imgUrl)
            .width('100%')
            .height(300) 
            .borderRadius({ topLeft: 0, topRight: 0, bottomLeft: 16, bottomRight: 16 })
            .objectFit(ImageFit.Cover)
              // 关键：ID 必须与源页面完全一致！
            .sharedTransition('shared_image_id_' + this.imgId, {
              duration: 400,
              curve: Curve.FastOutSlowIn
            })

          Text("这里是详情内容...")
            .fontSize(16)
            .margin(20)
            .width('100%')

          // 模拟长内容
          ForEach(Array.from({ length: 20 }, (_:number, i:number) => i), (item: number) => {
            Text(`模拟文本行 ${item}`)
              .fontSize(14)
              .fontColor('#666666')
              .width('100%')
              .margin({ bottom: 10 })
          })
        }
        .width('100%')
      }
      .layoutWeight(1)
      .backgroundColor('#FFFFFF')
    }
    .width('100%')
    .height('100%')
  }
}