盗墓笔记小说下载,小说阅读网,千年殇

介紹

在本教程中，我們將會通過一個簡單的樣例，學習如何基于ArkTS的聲明式開發范式開發轉場動畫。其中包含頁面間轉場、組件內轉場以及共享元素轉場。效果如圖所示：

說明： 本Codelab使用的display接口處于mock階段，在預覽器上使用會顯示白屏現象，可選擇在真機或模擬器上運行。

環境搭建

軟件要求

[DevEco Studio]版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

開發板類型：[潤和RK3568開發板]。
OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

[獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
搭建燒錄環境。
1. [完成DevEco Device Tool的安裝]
2. [完成RK3568開發板的燒錄]
搭建開發環境。
1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
3. 工程創建完成后，選擇使用[真機進行調測]。
4. 鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets                      // 代碼區
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets            // 公共常量類
│  │  └──utils           
│  │     ├──DimensionUtil.ets              // 屏幕適配工具類
│  │     └──GlobalContext.ets              // 全局上下文工具類
│  ├──entryability
│  │  └──EntryAbility.ets                  // 程序入口類
│  ├──pages
│  │  ├──BottomTransition.ets              // 底部滑出頁面
│  │  ├──ComponentTransition.ets           // 移動動畫轉場頁面
│  │  ├──CustomTransition.ets              // 放縮動畫轉場頁面
│  │  ├──FullCustomTransition.ets          // 旋轉動畫轉場頁面
│  │  ├──Index.ets                         // 應用首頁
│  │  ├──ShareItem.ets                     // 共享元素轉場部件
│  │  └──SharePage.ets                     // 共享元素轉場頁面
│  ├──view
│  │  ├──BackContainer.ets                 // 自定義頭部返回組件
│  │  └──TransitionElement.ets             // 自定義動畫元素
│  └──viewmodel
│     └──AnimationModel.ets                // 動畫封裝的model類
└──entry/src/main/resources                // 資源文件目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151547.png

構建主界面

在這個任務中，我們將完成主界面的設計和開發，效果如圖所示：

從上面效果圖可以看出，主界面主要由5個相同樣式的功能菜單組成，我們可以將這些菜單抽取成一個子組件Item。

將所需要的圖片添加到resources > base > media目錄下。

在Index.ets中引入首頁所需要圖片和路由信息，聲明子組件的UI布局并添加樣式，使用ForEach方法循環渲染首頁列表常量數據“INDEX_ANIMATION_MODE”，其中imgRes是設置按鈕的背景圖片，url用于設置頁面路由的地址。

// Index.ets
import { INDEX_ANIMATION_MODE } from '../common/constants/CommonConstants';

Column() {
  ForEach(INDEX_ANIMATION_MODE, (item: AnimationModel) = > {
    Row()
      .backgroundImage(item.imgRes)
      .backgroundImageSize(ImageSize.Cover)
      .backgroundColor($r('app.color.trans_parent'))
      .height(DimensionUtil.getVp($r('app.float.main_page_body_height')))
      .margin({ bottom: DimensionUtil.getVp($r('app.float.main_page_body_margin')) })
      .width(FULL_LENGTH)
      .borderRadius(BORDER_RADIUS)
      .onClick(() = > {
        router.pushUrl({ url: item.url })
          .catch((err: Error) = > {
            hilog.error(DOMAIN, PREFIX, FORMAT, err);
          });
      })
  }, (item: AnimationModel) = > JSON.stringify(item))
}

頁面間轉場

實現“底部滑入”效果

在BottomTransition申明pageTransition方法配置轉場參數，其中PageTransitionEnter用于自定義當前頁面的入場效果，PageTransitionExit用于自定義當前頁面的退場效果。效果如圖所示：

通過設置PageTransitionEnter和PageTransitionExit的slide屬性為SlideEffect.Bottom，來實現BottomTransition入場時從底部滑入，退場時從底部滑出。

// BottomTransition.ets
@Entry
@Component
struct BottomTransition {
  build() {
    Column() {
      TransitionElement()
    }
  }

  /**
   * 頁面轉場通過全局pageTransition方法進行配置轉場參數
   *
   * SlideEffect.Bottom 入場時從屏幕下方滑入。
   * SlideEffect.Bottom 退場時從屏幕下方滑出。
   */
  pageTransition() {
    PageTransitionEnter({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).slide(SlideEffect.Bottom);
    PageTransitionExit({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).slide(SlideEffect.Bottom);
  }
}

實現”頁面轉場：自定義1“效果

本節實現的效果，頁面入場時為淡入和放大，退場時從右下角滑出。效果如圖所示：

在CustomTransition.ets的Column組件中添加TransitionElement組件，并且定義pageTransition方法。

// CustomTransition.ets
@Entry
@Component
struct CustomTransition {
  build() {
    Column() {
      TransitionElement()
    }
  }

  /**
   * 頁面轉場通過全局pageTransition方法進行配置轉場參數
   *
   * 進場時透明度設置從0.2到1；x、y軸縮放從0變化到1
   * 退場時x、y軸的偏移量為500
   */
  pageTransition() {
    PageTransitionEnter({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth })
      .opacity(CUSTOM_TRANSITION_OPACITY)
      .scale(CUSTOM_TRANSITION_SCALE)
    PageTransitionExit({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth })
      .translate(CUSTOM_TRANSITION_TRANSLATE)
  }
}

說明： translate設置頁面轉場時的平移效果，為入場時起點和退場時終點的值，和slide同時設置時默認生效slide。

實現”頁面轉場：自定義2“動效

本節實現的效果，頁面入場時淡入和放大，同時順時針旋轉；退場時淡出和縮小，同時逆時針旋轉。效果如圖所示：

在FullCustomTransition.ets的Column組件中添加TransitionElement組件，并且定義pageTransition方法。給Stack組件添加opacity、scale、rotate屬性，定義變量animValue用來控制Stack組件的動效，在PageTransitionEnter和PageTransitionExit組件中動態改變myProgress的值。

// FullCustomTransition.ets
@Entry
@Component
struct FullCustomTransition {
  @State animValue: number = FULL_CUSTOM_TRANSITION_DEFAULT_ANIM_VALUE;

  build() {
    Column() {
      TransitionElement()
    }
    .opacity(this.animValue)
    .scale({ x: this.animValue, y: this.animValue })
    .rotate({
      z: FULL_CUSTOM_TRANSITION_ROTATE_Z,
      angle: FULL_CUSTOM_TRANSITION_ANGLE * this.animValue
    })
  }

  /**
   * 頁面轉場通過全局pageTransition方法進行配置轉場參數
   *
   * 進場過程中會逐幀觸發onEnter回調，入參為動效的歸一化進度(0 - 1)
   * 進場過程中會逐幀觸發onExit回調，入參為動效的歸一化進度(0 - 1)
   */
  pageTransition() {
    PageTransitionEnter({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth })
      .onEnter((type?: RouteType, progress?: number) = > {
        if (!progress) {
          return;
        }
        this.animValue = progress;
      });
    PageTransitionExit({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth })
      .onExit((type?: RouteType, progress?: number) = > {
        if (!progress) {
          return;
        }
        this.animValue = FULL_CUSTOM_TRANSITION_DEFAULT_ANIM_VALUE - progress;
      });
  }
}

組件內轉場

本節實現組件內轉場動效，通過一個按鈕來控制組件的添加和移除，呈現容器組件子組件添加和移除時的動效。效果如圖所示：

組件轉場主要通過transition屬性方法配置轉場參數，在組件添加和移除時會執行過渡動效，需要配合animateTo才能生效。動效時長、曲線、延時跟隨animateTo中的配置。

在ComponentTransition.ets文件中，新建Image子組件，并添加兩個transition屬性，分別用于定義組件的添加動效和移除動效。

// ComponentTransition.ets
Image($r('app.media.bg_element'))
  .TransitionEleStyles()
  .transition({
    type: TransitionType.Insert,
    scale: COMPONENT_TRANSITION_SCALE,
    opacity: COMPONENT_TRANSITION_OPACITY
  })
  .transition({
    type: TransitionType.Delete,
    rotate: COMPONENT_TRANSITION_ROTATE,
    opacity: COMPONENT_TRANSITION_OPACITY
  })

在ComponentTransition代碼中，定義一個isShow變量，用于控制Image子組件的添加和移除，在Button組件的onClick事件中添加animateTo方法，來使Image子組件子組件動效生效。

// ComponentTransition.ets
@State isShow: boolean = false;

Button($r('app.string.Component_transition_toggle'))
  .height(DimensionUtil.getVp($r('app.float.element_trans_btn_height')))
  .width(DimensionUtil.getVp($r('app.float.element_trans_btn_width')))
  .fontColor(Color.White)
  .backgroundColor($r('app.color.light_blue'))
  .onClick(() = > {
    animateTo({ duration: TRANSITION_ANIMATION_DURATION }, () = > {
      this.isShow = !this.isShow;
    })
  })

共享元素轉場

效果如圖所示：

共享元素轉場通過給組件設置sharedTransition屬性來實現，兩個頁面的組件配置為同一個id，則轉場過程中會執行共享元素轉場。sharedTransition可以設置動效的時長、動畫曲線和延時，實現步驟如下：

在ShareItem.ets中給Image組件設置sharedTransition屬性，組件轉場id設置為“SHARE_TRANSITION_ID”。

// ShareItem.ets
Image($r('app.media.bg_transition'))
  .width(FULL_LENGTH)
  .height(DimensionUtil.getVp($r('app.float.share_item_element_height')))
  .borderRadius(DimensionUtil.getVp($r('app.float.share_item_radius')))
  .margin({ bottom: DimensionUtil.getVp($r('app.float.share_item_element_margin_bottom')) })
  .sharedTransition(SHARE_TRANSITION_ID, {
    duration: TRANSITION_ANIMATION_DURATION,
    curve: Curve.Smooth,
    delay: SHARE_ITEM_ANIMATION_DELAY
  })
  .onClick(() = > {
    router.pushUrl({ url: SHARE_PAGE_URL })
      .catch((err: Error) = > {
        hilog.error(DOMAIN, PREFIX, FORMAT, err);
      });
  })

在SharePage.ets中給Image組件設置sharedTransition屬性，組件轉場id設置為“SHARE_TRANSITION_ID”。

// SharePage.ets
@Entry
@Component
struct SharePage {
  build() {
    Column() {
      TransitionElement({ imgFit: ImageFit.Cover })
        .sharedTransition(SHARE_TRANSITION_ID, {
          duration: SHARE_ITEM_DURATION,
          curve: Curve.Smooth,
          delay: SHARE_ITEM_ANIMATION_DELAY
        })
    }
  }
}