放大縮小視圖

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

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

sharedTransition(id: string, options?: sharedTransitionOptions)

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

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

@Entry
@Component
struct SharedTransitionSrc {
  build() {
    Column() {
      // 配置Exchange類型的共享元素轉(zhuǎn)場(chǎng)，共享元素id為"sharedImage1"
      Image($r('app.media.mountain')).width(50).height(50)
        .sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear })
        .onClick(() => {
          // 點(diǎn)擊小圖時(shí)路由跳轉(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)場(chǎng)
      Text("SharedTransition dest page")
        .fontSize(16)
        .sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static })
        .margin({ top: 10 })

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

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