放大縮小視圖

在不同頁面間，有使用相同的元素（例如同一幅圖）的場景，可以使用共享元素轉(zhuǎn)場動畫銜接。為了突出不同頁面間相同元素的關(guān)聯(lián)性，可為它們添加共享元素轉(zhuǎn)場動畫。如果相同元素在不同頁面間的大小有明顯差異，即可達(dá)到放大縮小視圖的效果。

共享元素轉(zhuǎn)場的接口為：

sharedTransition(id: string, options?: sharedTransitionOptions)

其中根據(jù)sharedTransitionOptions中的type參數(shù)，共享元素轉(zhuǎn)場分為Exchange類型的共享元素轉(zhuǎn)場和Static類型的共享元素轉(zhuǎn)場。

// src page
import router from '@ohos.router';

@Entry
@Component
struct SharedTransitionSrc {
  build() {
    Column() {
      // 配置Exchange類型的共享元素轉(zhuǎn)場，共享元素id為"sharedImage1"
      Image($r('app.media.mountain')).width(50).height(50)
        .sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear })
        .onClick(() => {
          // 點擊小圖時路由跳轉(zhuǎn)至下一頁面
          router.pushUrl({ url: 'pages/myTest/sharedTransitionDst' });
        })
    }
    .padding(10)
    .width("100%")
    .alignItems(HorizontalAlign.Start)
  }
}

// dest page
import router from '@ohos.router';
@Entry
@Component
struct SharedTransitionDest {
  build() {
    Column() {
      // 配置Static類型的共享元素轉(zhuǎn)場
      Text("SharedTransition dest page")
        .fontSize(16)
        .sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static })
        .margin({ top: 10 })

      // 配置Exchange類型的共享元素轉(zhuǎn)場，共享元素id為"sharedImage1"
      Image($r('app.media.mountain'))
        .width(150)
        .height(150)
        .sharedTransition('sharedImage1', { duration: 500, curve: Curve.Linear })
        .onClick(() => {
          // 點擊圖片時路由返回至上一頁面
          router.back();
        })
    }
    .width("100%")
    .alignItems(HorizontalAlign.Center)
  }
}

上述示例中，第一個頁面（src page)和第二個頁面（dest page）都配置了id為"sharedImage1"的共享元素轉(zhuǎn)場，使兩個頁面能匹配到這一組共享元素。從第一個頁面跳轉(zhuǎn)到第二個頁面時，第一個頁面為起始頁，第二個頁面為目標(biāo)頁。配置id為"sharedImage1"的組件按照目標(biāo)頁中500ms的時長進(jìn)行共享元素轉(zhuǎn)場，達(dá)到放大視圖的效果，id為"text"的組件按照配置的Static類型sharedTransition參數(shù)中的500ms的時長進(jìn)行共享元素轉(zhuǎn)場，標(biāo)題逐漸出現(xiàn)。從第二個頁面返回到第一個頁面時，第二個頁面為起始頁，第一個頁面為目標(biāo)頁。配置id為"sharedImage1"的組件按照目標(biāo)頁中1000ms的時長進(jìn)行共享元素轉(zhuǎn)場，縮小為原始視圖，id為"text"的組件按照配置的Static類型sharedTransition參數(shù)中的500ms的時長進(jìn)行共享元素轉(zhuǎn)場，標(biāo)題逐漸隱藏。