鴻蒙HarmonyOS實戰-ArkUI動畫（放大縮小檢視）

蜀道山QAQ發表於2024-04-23
鴻蒙UI動畫

🚀前言

在HarmonyOS中，可以透過以下方法放大縮小檢視：

  1. 使用縮放手勢：可以使用雙指捏合手勢來放大縮小檢視。將兩個手指放在螢幕上，並向內或向外移動手指，即可進行放大或縮小操作。

  2. 使用系統提供的縮放控制元件：在HarmonyOS的開發中，可以使用系統提供的縮放控制元件來實現檢視的放大縮小功能。透過在佈局檔案中新增縮放控制元件，並設定合適的屬性，即可實現檢視的放大縮小效果。

  3. 使用自定義動畫效果：透過在程式碼中編寫自定義的動畫效果，可以實現檢視的放大縮小功能。可以使用屬性動畫或幀動畫來實現檢視的動態縮放效果。

本文主要講解的是動畫效果實現的放大縮小檢視

🚀一、放大縮小檢視

共享元素轉場是一種頁面之間過渡效果的設計，透過在不同頁面之間共享相同的元素來實現平滑的過渡動畫。在共享元素轉場中，透過在兩個頁面中配置相同id的元件作為共享元素，實現元素的位置、大小等屬性的過渡。當使用者從起始頁跳轉到目標頁時，共享元素會從起始頁的位置、大小過渡到目標頁的位置、大小，從而建立一種銜接的動畫效果。共享元素轉場可以提升使用者體驗，使頁面之間的切換更加流暢和自然。

🔎1.Exchange型別的共享元素轉場

對於交換型的共享元素轉場，需要在兩個頁面中存在透過sharedTransition函式配置為相同id的元件，這些元件被稱為共享元素。這種型別的共享元素轉場適用於兩個頁面之間相同元素的銜接，會從起始頁共享元素的位置和大小過渡到目標頁的共享元素的位置和大小。如果沒有指定型別，預設為交換型別的共享元素轉場，這也是最常見的共享元素轉場方式。當使用交換型別的共享元素轉場時，共享元素轉場的動畫引數由目標頁中的options動畫引數決定。

🔎2.Static型別的共享元素轉場

靜態型的共享元素轉場通常適用於頁面跳轉時，標題逐漸出現或隱藏的場景。在這種轉場中，只需要在一個頁面中存在一個Static型別的共享元素，不能在兩個頁面中同時存在相同id的Static型別共享元素。當跳轉到目標頁時，配置了Static型別sharedTransition的元件會顯示透明度從0漸變到設定的透明度的動畫效果，而位置保持不變。當起始頁消失時，該元件將逐漸變為0的透明度，位置仍保持不變。這樣的轉場效果能夠呈現出標題逐漸顯示或隱藏的效果。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

🔎3.場景示例

主頁

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

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

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

image

第一個頁面（src page）和第二個頁面（dest page）都配置了id為"sharedImage1"的共享元素轉場，以便兩個頁面都能匹配到這一組共享元素。當從第一個頁面跳轉到第二個頁面時，第一個頁面為起始頁，第二個頁面為目標頁。配置了id為"sharedImage1"的元件按照目標頁中的500ms時長進行共享元素轉場，從而實現放大檢視的效果；而id為"text"的元件則按照配置的Static型別sharedTransition引數中的500ms時長進行共享元素轉場，使標題逐漸出現。

當從第二個頁面返回到第一個頁面時，第二個頁面為起始頁，第一個頁面為目標頁。配置了id為"sharedImage1"的元件按照目標頁中的1000ms時長進行共享元素轉場，使其縮小至原始檢視；同時，id為"text"的元件按照配置的Static型別sharedTransition引數中的500ms時長進行共享元素轉場，使標題逐漸隱藏。

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章