程序員Feri一名12年+的程序員,做過(guò)開(kāi)發(fā)帶過(guò)團(tuán)隊(duì)創(chuàng)過(guò)業(yè),擅長(zhǎng)Java、嵌入式、鴻蒙、人工智能等,專注于程序員成長(zhǎng)那點(diǎn)兒事,希望在成長(zhǎng)的路上有你相伴！君志所向,一往無(wú)前！

屬性動(dòng)畫-animation

屬性值的變化，通常會(huì)引發(fā) UI 的變化,結(jié)合動(dòng)畫可以讓這個(gè)變化過(guò)程更為流暢，反之這個(gè)過(guò)程將在一瞬間完成，用戶體驗(yàn)不好，觀感突兀。

組件的某些通用屬性變化時(shí)，可以通過(guò)屬性動(dòng)畫實(shí)現(xiàn)漸變過(guò)渡效果，提升用戶體驗(yàn)。

支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

基本使用

使用動(dòng)畫的核心步驟如下：

  1. 聲明相關(guān)狀態(tài)變量
  2. 將狀態(tài)變量設(shè)置到相關(guān)可動(dòng)畫屬性接口
  3. 通過(guò)屬性動(dòng)畫接口開(kāi)啟屬性動(dòng)畫（在屬性動(dòng)畫上面的屬性會(huì)應(yīng)用動(dòng)畫）
  4. 通過(guò)狀態(tài)變量改變UI界面

@Entry
@Component
struct Index {
  // 1. 聲明相關(guān)狀態(tài)變量
  @State y: number = 10
  @State bgColor: ResourceColor = Color.Red
  @State fontColor: ResourceColor = '#0094ff'
  @State fontWeight: number = 100

  build() {
    Column() {
      Text('Feri')
        .width(100)
        .height(100)
        .opacity(1)
          // 2.將狀態(tài)變量設(shè)置到相關(guān)可動(dòng)畫屬性接口
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)
        .translate({ y: this.y })
      Button('修改狀態(tài)變量')
        .onClick(() => {
          // 4. 通過(guò)狀態(tài)變量改變UI界面
          this.bgColor = '#0094ff'
          this.translateY = 100
          this.fontColor = Color.Green
          this.fontWeight = 900
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

常用屬性

可以通過(guò)動(dòng)畫參數(shù)(以對(duì)象的形式傳遞)來(lái)定制動(dòng)畫效果組件

動(dòng)畫曲線枚舉值：

playMode 播放模式枚舉值

效果實(shí)現(xiàn)

需求：

  1. 動(dòng)畫效果: a. 元素大小切換 b. 動(dòng)畫次數(shù)無(wú)限，元素【加載之后】開(kāi)啟動(dòng)畫
@Entry
@Component
struct Index {
  // 1. 聲明相關(guān)狀態(tài)變量
  @State scaleX: number = 1
  @State scaleY: number = 1

  build() {
    Column({ space: 50 }) {
      Text('全場(chǎng)低至一分購(gòu)')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)// 2.將狀態(tài)變量設(shè)置到相關(guān)可動(dòng)畫屬性接口
        .scale({
          x: this.scaleX,
          y: this.scaleY
        })// 3. 通過(guò)屬性動(dòng)畫接口開(kāi)啟屬性動(dòng)畫
        .animation({
          duration: 1000,
          curve: Curve.Ease,
          playMode: PlayMode.Alternate,
          iterations: -1
        })
        .onClick(() => {
          // 4.通過(guò)狀態(tài)變量改變UI界面
          this.scaleX = 1.3
          this.scaleY = 1.3
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

  @Styles
  fullSize() {
    .width('100%')
    .height('100%')
  }
}

組件加載自動(dòng)觸發(fā)

如果要實(shí)現(xiàn)元素加載的時(shí)候就開(kāi)始動(dòng)畫，可以使用掛載事件來(lái)實(shí)現(xiàn)，這是一個(gè)通用事件

名稱支持冒泡功能描述
onAppear(event: () => void) 否 組件掛載顯示時(shí)觸發(fā)此回調(diào)。從API version 9開(kāi)始，該接口支持在ArkTS卡片中使用。
onDisAppear(event: () => void) 否 組件卸載消失時(shí)觸發(fā)此回調(diào)。從API version 9開(kāi)始，該接口支持在ArkTS卡片中使用。

效果實(shí)現(xiàn)-優(yōu)化

@Entry
@Component
struct Index {
  // 1. 聲明相關(guān)狀態(tài)變量
  @State scaleX: number = 1
  @State scaleY: number = 1

  build() {
    Column({ space: 50 }) {
      Text('全場(chǎng)低至一分購(gòu)')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)// 2.將狀態(tài)變量設(shè)置到相關(guān)可動(dòng)畫屬性接口
        .scale({
          x: this.scaleX,
          y: this.scaleY
        })// 3. 通過(guò)屬性動(dòng)畫接口開(kāi)啟屬性動(dòng)畫
        .animation({
          duration: 1000,
          curve: Curve.EaseInOut,
          playMode: PlayMode.Alternate,
          iterations: -1
        })
        .onAppear(() => {
          // 4.通過(guò)狀態(tài)變量改變UI界面
          this.scaleX = 1.3
          this.scaleY = 1.3
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

  @Styles
  fullSize() {
    .width('100%')
    .height('100%')
  }
}

好啦。就到這里啦，主要是說(shuō)一下HarmonyOS中的屬性動(dòng)畫效果。