npm install ../library

// 導(dǎo)入本地依賴(lài)庫(kù)
import { MainPage } from '@ohos/library'

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 使用自定義組件
      MainPage()
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

import router from '@ohos.router';
/**
 * 自定義標(biāo)題欄
 */
@Component
export struct TitleBar {
  // 左邊圖標(biāo)是否顯示
  private isShowLeft = true
  // 左邊圖標(biāo)
  private leftIcon = $r('app.media.back')
  // 左邊點(diǎn)擊事件，默認(rèn)返回上一頁(yè)
  private leftClickEvent = () => {
    router.back()
  }
  // 標(biāo)題
  private title = '標(biāo)題'
  // 右邊圖標(biāo)是否顯示
  private isShowRight = false
  // 右邊圖標(biāo)
  private rightIcon = $r('app.media.icon')
  // 左邊點(diǎn)擊事件
  private rightClickEvent: () => void

  build() {
    Column() {
      Stack() {
        Text(this.title).fontSize(20).fontColor('#ff1a1a1a')
        Row() {
          if (this.isShowLeft) {
            Image(this.leftIcon).size({ width: 55, height: 55 }).padding(15)
              .onClick(() => this.leftClickEvent())
          }
          Blank()
          if (this.isShowRight) {
            Image(this.rightIcon).size({ width: 55, height: 55 }).padding(15)
              .onClick(this.rightClickEvent)
          }
        }.width('100%')
      }.width('100%').height(0).layoutWeight(1)

      Divider().color('#ffbababa')
    }.width('100%').height(55)
  }
}

import { TitleBar } from '@ohos/library'
@Entry
@Component
struct Index {
  build() {
    Column() {
      TitleBar({ title: '主頁(yè)', leftIcon: $r('app.media.menu'),
        leftClickEvent: () => {
          // 左圖標(biāo)點(diǎn)擊事件
        }
      })
    }.width('100%').height('100%')
  }
}

/**
 * 滑動(dòng)菜單
 */
@Component
export struct SlideMenuContainer {
  // 菜單的寬度
  @State menuWidth: number = 0
  // 菜單x軸偏移量
  @State menuOffsetX: number = 0
  // 菜單偏移最小量
  private offsetXMin = 0
  // 菜單偏移最大量
  private offsetXMax = 0
  // 第一次按下的x坐標(biāo)
  private firstDownX = -1
  // 上次按下的x坐標(biāo)
  private lastDownX = -1
  // 背景透明度
  @State bgOpacity: number = 0
  // 滑動(dòng)方向
  private slideDirection: 'left' | 'right'
  // 菜單布局
  @BuilderParam menu: any
  // 內(nèi)容布局
  @BuilderParam content: any
  // 定時(shí)器ID
  private intervalID = 0
  // 是否打開(kāi)菜單
  @Link @Watch('isOpenChanger') isOpen: boolean
  isOpenChanger() {
    if (this.isOpen) {
      this.openMenu()
    }
  }
  build() {
    Stack({ alignContent: Alignment.Start }) {
      // 內(nèi)容布局
      Column() {
        this.content()
      }.width('100%').height('100%')

      if (this.bgOpacity) {
        // 透明背景
        Column() {
        }.width('100%').height('100%')
        .backgroundColor(Color.Black).opacity(this.bgOpacity)
      }
      // 菜單布局
      Column() {
        this.menu()
      }.width(this.menuWidth).height('100%')
      .backgroundColor(Color.White)
      .offset({ x: this.menuOffsetX })
    }.width('100%').height('100%')
    .onTouch((event) => this.onTouchEvent(event))
    .onAreaChange((oldValue: Area, newValue: Area) => {
      // 監(jiān)聽(tīng)回調(diào)中獲取容器的寬度
      const width = Number.parseInt(newValue.width.toString())
      this.menuWidth = width * 0.7
      this.menuOffsetX = -this.menuWidth
      this.offsetXMin = -this.menuWidth
      this.offsetXMax = 0
    })
  }
  /**
   * 觸摸事件
   */
  onTouchEvent(event: TouchEvent) {
    const x = event.touches[0].x
    switch (event.type) {
      case TouchType.Down: // 手指按下
        {
          this.firstDownX = x
          this.lastDownX = x
          clearInterval(this.intervalID)
        }
        break;
      case TouchType.Move: // 手指移動(dòng)
        {
          // 計(jì)算這次x坐標(biāo)點(diǎn)與上次x坐標(biāo)點(diǎn)的差
          const diff = x - this.lastDownX
          this.lastDownX = x
          // 累計(jì)算出滑動(dòng)的距離
          this.menuOffsetX += diff
          // 確定方向
          this.slideDirection = diff > 0 ? 'right' : 'left'
          // 限定距離范圍
          if (this.menuOffsetX >= this.offsetXMax) this.menuOffsetX = this.offsetXMax
          if (this.menuOffsetX <= this.offsetXMin) this.menuOffsetX = this.offsetXMin
          // 更改背景透明度
          this.bgOpacity = 0.6 * Math.abs(this.menuWidth + this.menuOffsetX) / this.menuWidth
        }
        break;
      case TouchType.Up: // 手指抬起
        {
          if (Math.abs(x - this.firstDownX) < 5) {
            return
          }
          if (this.slideDirection === 'left') {
            // 是否小于寬度的3/2
            const isClose = Math.abs(this.menuWidth + this.menuOffsetX) < this.menuWidth * 2 / 3
              isClose ? this.closeMenu() : this.openMenu()
          } else {
            // 是否大于寬度的3/1
            const isOpen = Math.abs(this.menuWidth + this.menuOffsetX) > this.menuWidth / 3
              isOpen ? this.openMenu() : this.closeMenu()
          }
        }
        break;
      default:
        break;
    }
  }
  /**
   * 定時(shí)器改變偏移量
   * @param type 偏移量 加或減
   */
  intervalChangeOffset(type: 1 | -1) {
    this.intervalID = setInterval(() => {
      this.menuOffsetX += type * 15
      if (this.menuOffsetX >= this.offsetXMax) {
        this.menuOffsetX = this.offsetXMax
        clearInterval(this.intervalID)
      }
      if (this.menuOffsetX <= this.offsetXMin) {
        this.menuOffsetX = this.offsetXMin
        clearInterval(this.intervalID)
        this.isOpen = false
      }
      this.bgOpacity = 0.6 * Math.abs(this.menuWidth + this.menuOffsetX) / this.menuWidth
    }, 5)
  }
  /**
   * 打開(kāi)菜單
   */
  openMenu() {
    this.intervalChangeOffset(1)
  }
  /**
   * 關(guān)閉菜單
   */
  closeMenu() {
    this.intervalChangeOffset(-1)
  }
}

import { SlideMenuContainer } from '@ohos/library'
@Entry
@Component
struct Index {
  @State isOpen: boolean = false
  ......
  /**
   * 內(nèi)容布局
   */
  @Builder ContentLayout() {...}
  /**
   * 菜單布局
   */
  @Builder MenuLayout() {...}

  build() {
    Column() {
      SlideMenuContainer({
        isOpen: $isOpen,
        content: this.ContentLayout(),
        menu: this.MenuLayout()
      })
    }.width('100%').height('100%')
  }
}

npm install @ohos/lottieETS --save

// 導(dǎo)入三方庫(kù)
import lottie from '@ohos/lottieETS'
@Entry
@Component
struct LottieDemo {
  private setting: RenderingContextSettings = new RenderingContextSettings(true)
  private crc: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting)
  private lottiePath = 'common/lottie/car-loading2-data.json'
  private lottieName = 'carName'
  @State isPlay: boolean = false
  build() {
    Column() {
      Canvas(this.crc)
        .width(300)
        .height(300)
        .margin({ top: 30, bottom: 50 })
        .margin({ top: 30, bottom: 50 })
        .onReady(() => {
          lottie.loadAnimation({
            container: this.crc, // 需要綁定Canvas的CanvasRenderingContext2D
            renderer: "canvas", // 目前只支持canvas模式
            loop: true, // 是否循環(huán)播放
            autoplay: false, // 是否自動(dòng)播放
            name: this.lottieName, // 設(shè)置lottie動(dòng)畫(huà)名稱(chēng)
            path: this.lottiePath // 指定lottie動(dòng)畫(huà)資源路徑
          })
        })
        .onDisAppear(() => {
          // Canvas銷(xiāo)毀時(shí)順帶銷(xiāo)毀lottie動(dòng)畫(huà)
          lottie.destroy(this.lottieName)
        })
      Button(this.isPlay ? '暫停' : '播放')
        .width(150).height(30)
        .backgroundColor('#2D9FE5')
        .onClick(() => {
          this.isPlay = !this.isPlay
          this.isPlay ? lottie.play(this.lottieName) : lottie.pause(this.lottieName)
        })
    }.width('100%').height('100%')
  }
}