鸿蒙进阶-属性动画

hello大家好啊，这里是鸿蒙开天组，今天我们来学习鸿蒙中的动画属性。

先来说说动画~

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

HarmonyOS 中的动画主要分为：

1. 属性动画
2. 转场动画
3. 组件动画

这么三类，一些和动画相关的其他细节咱们接着往下学。

今天咱们主要来学习属性动画。

属性动画-animation

接下来看看如何让咱们的应用动起来

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

基本使用

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

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

// 最核心写法，相关动画属性后续展开
组件
  .属性1()
  .属性2()
  // .... animation 必须在需要动画的属性的后面 
  .animation({})

看完了概念，让我们来试一下~

基础模板

@Entry
@Component
struct Page01_animation {
  // 1. 声明相关状态变量
  @State translateY: number = 1
  @State bgColor: ResourceColor = Color.Pink
  @State fontColor: ResourceColor = '#0094ff'
  @State fontWeight: number = 100

  build() {
    Column() {
      Text('C')
        .width(100)
        .height(100)
        .opacity(1)
        .textAlign(TextAlign.Center)
         // 2.将状态变量设置到相关可动画属性接口
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .translate({ y: this.translateY })
      Button('修改状态变量')
        .onClick(() => {
          // 4. 通过状态变量改变UI界面
          this.bgColor = '#0094ff'
          this.translateY = 100
          this.fontColor = Color.Pink
          this.fontWeight = 900
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

在上面的模板代码中，我们需要为容器添加动画，也就是给text的变量改变添加一个过渡。

为了方便理解，接下来的参考代码将变量改变的部分进行了函数封装，这样我们就可以得到这样一个结果 ：

@Entry
@Component
struct Page01_animation {
  // 1. 声明相关状态变量
  @State translateY: number = 1
  @State bgColor: ResourceColor = Color.Pink
  @State fontColor: ResourceColor = '#0094ff'
  @State fontWeight: number = 100
  @State isOrNot: boolean = false

  onclickEventEnd() {
    // 4. 通过状态变量改变UI界面
    this.bgColor = '#0094ff'
    this.translateY = 100
    this.fontColor = Color.Pink
    this.fontWeight = 900
  }

  onclickEventStart() {
    // 4. 通过状态变量改变UI界面
    this.bgColor = Color.Pink
    this.translateY = 1
    this.fontColor = Color.Pink
    this.fontWeight = 100
  }

  build() {
    Column() {
      Text('C')
        .width(100)
        .height(100)
        .opacity(1)// 2.将状态变量设置到相关可动画属性接口
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)
        .translate({ y: this.translateY })
      // 3.通过属性动画接口开启属性动画
        .animation({})
      Button('修改状态变量')
        .onClick(() => {
          if (this.isOrNot) {
            this.onclickEventStart()
            this.isOrNot = !this.isOrNot
          } else {
            this.onclickEventEnd()
            this.isOrNot = !this.isOrNot
          }
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

常用属性

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

组件
  .animation({ 动画参数 })

动画曲线枚举值：

playMode 播放模式枚举值

非常多的属性值，这里就不逐个尝试啦~有兴趣的可以自己尝试一下。

案例-折扣信息

接下来咱们来写一个小小的案例

需求：

动画效果:

• 元素大小切换
• 动画次数无限，元素【加载之后】开启动画

点击按钮触发

咱们先考虑如何实现点击开启动画，元素加载之后涉及到一个还未学习的知识点

核心步骤：有布局，有逻辑

1.布局：用 Text 方便调整实现布局

2.动画：animation

        a.次数无限次

        b.动画线性：匀速

        c.改变的是缩放

                 i.宽高，定义在@State

3.如何触发：

        a.点击触发

模板代码

@Entry
@Component
struct Page02_animationDemo1 {
  build() {
    Column({ space: 50 }) {
      Text('全场低至一分购')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

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

参考代码

@Entry
@Component
struct Page02_animationDemo1 {
  // 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 Page03_appearAnddisAppear {
  @State isShow: boolean = false

  build() {
    Column({ space: 50 }) {
      Button('切换显示')
        .onClick(() => {
          this.isShow = !this.isShow
        })

      if (this.isShow) {
        Text('我是文本')
          .width('100%')
          .onAppear(() => {
            console.log('加载了')
          })
          .onDisAppear(() => {
            console.log('卸载了')
          })
      }

    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

案例调整后的效果

@Entry
@Component
struct Page04_animationDemo1_event {
  // 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%')
  }
}

今天的文章就到这里啦！这里是鸿蒙开天组，感谢大家的关注,咱们下篇文章再见！