程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员成长那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！

属性动画-animation

属性值的变化，通常会引发 UI 的变化,结合动画可以让这个变化过程更为流畅，反之这个过程将在一瞬间完成，用户体验不好，观感突兀。

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。

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

基本使用

使用动画的核心步骤如下：

1. 声明相关状态变量
2. 将状态变量设置到相关可动画属性接口
3. 通过属性动画接口开启属性动画（在属性动画上面的属性会应用动画）
4. 通过状态变量改变UI界面

@Entry
@Component
struct Index {
  // 1. 声明相关状态变量
  @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.将状态变量设置到相关可动画属性接口
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)
        .translate({ y: this.y })
      Button('修改状态变量')
        .onClick(() => {
          // 4. 通过状态变量改变UI界面
          this.bgColor = '#0094ff'
          this.translateY = 100
          this.fontColor = Color.Green
          this.fontWeight = 900
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

常用属性

可以通过动画参数(以对象的形式传递)来定制动画效果组件

动画曲线枚举值：

playMode 播放模式枚举值

效果实现

需求：

1. 动画效果:
   a. 元素大小切换
   b. 动画次数无限，元素【加载之后】开启动画

@Entry
@Component
struct Index {
  // 1. 声明相关状态变量
  @State scaleX: number = 1
  @State scaleY: number = 1

  build() {
    Column({ space: 50 }) {
      Text('全场低至一分购')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)// 2.将状态变量设置到相关可动画属性接口
        .scale({
          x: this.scaleX,
          y: this.scaleY
        })// 3. 通过属性动画接口开启属性动画
        .animation({
          duration: 1000,
          curve: Curve.Ease,
          playMode: PlayMode.Alternate,
          iterations: -1
        })
        .onClick(() => {
          // 4.通过状态变量改变UI界面
          this.scaleX = 1.3
          this.scaleY = 1.3
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

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

组件加载自动触发

如果要实现元素加载的时候就开始动画，可以使用挂载事件来实现，这是一个通用事件

效果实现-优化

@Entry
@Component
struct Index {
  // 1. 声明相关状态变量
  @State scaleX: number = 1
  @State scaleY: number = 1

  build() {
    Column({ space: 50 }) {
      Text('全场低至一分购')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)// 2.将状态变量设置到相关可动画属性接口
        .scale({
          x: this.scaleX,
          y: this.scaleY
        })// 3. 通过属性动画接口开启属性动画
        .animation({
          duration: 1000,
          curve: Curve.EaseInOut,
          playMode: PlayMode.Alternate,
          iterations: -1
        })
        .onAppear(() => {
          // 4.通过状态变量改变UI界面
          this.scaleX = 1.3
          this.scaleY = 1.3
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

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

好啦。就到这里啦，主要是说一下HarmonyOS中的属性动画效果。