鸿蒙进阶-属性动画

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

先来说说动画~

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

HarmonyOS 中的动画主要分为：

属性动画
转场动画
组件动画

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

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

属性动画-animation

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

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

基本使用

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

声明相关状态变量
将状态变量设置到相关可动画属性方法上
通过属性动画接口开启属性动画（在属性动画上面的属性会应用动画）
通过状态变量改变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({ 动画参数 })

|------------|---------------------------|--------|------------------------------------------------------------------|
| 名称 | 参数类型 | 必填 | 描述 |
| duration | number | 否 | 动画时长，单位为毫秒。默认值：1000 |
| curve | string | Curve | ICurve | 否 | 设置动画曲线。默认值：Curve.EaseInOut |
| delay | number | 否 | 动画延迟播放时间。单位为毫秒，默认不延时播放。默认值：0 取值范围：(-∞, +∞) |
| iterations | number | 否 | 动画播放次数。默认值：1 取值范围：[-1, +∞) 说明： 设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
| playMode | PlayMode | 否 | 动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal |
| onFinish | () => void | 否 | 结束回调，动画播放完成时触发。从API version 9开始，该接口支持在ArkTS卡片中使用。 |

动画曲线枚举值：

|---------------------|----------------------------------------------------------|
| 名称 | 描述 |
| Linear | 表示动画从头到尾的速度都是相同的。 |
| Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。 |
| EaseIn | 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。 |
| EaseOut | 表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。 |
| EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。 |
| FastOutSlowIn | 标准曲线，CubicBezier(0.4, 0.0, 0.2, 1.0)。 |
| LinearOutSlowIn | 减速曲线，CubicBezier(0.0, 0.0, 0.2, 1.0)。 |
| FastOutLinearIn | 加速曲线，CubicBezier(0.4, 0.0, 1.0, 1.0)。 |
| ExtremeDeceleration | 急缓曲线，CubicBezier(0.0, 0.0, 0.0, 1.0)。 |
| Sharp | 锐利曲线，CubicBezier(0.33, 0.0, 0.67, 1.0)。 |
| Rhythm | 节奏曲线，CubicBezier(0.7, 0.0, 0.2, 1.0)。 |
| Smooth | 平滑曲线，CubicBezier(0.4, 0.0, 0.4, 1.0)。 |
| Friction | 阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。 |

playMode 播放模式枚举值

|------------------|--------------|
| 名称 | 描述 |
| Normal | 动画正向播放。 |
| Reverse | 动画反向播放。 |
| Alternate | 先正向播放，再反向播放。 |
| AlternateReverse | 先反向播放，后正向播放。 |

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

案例-折扣信息

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

需求：

动画效果:

元素大小切换

动画次数无限，元素【加载之后】开启动画

点击按钮触发

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

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

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%')
  }
}

组件加载自动触发事件

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

链接

|---------------------------------|--------------------------------------------------|
| 名称 | 功能描述 |
| onAppear(event: () => void) | 组件挂载显示时触发此回调。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| onDisAppear(event: () => void) | 组件卸载消失时触发此回调。从API version 9开始，该接口支持在ArkTS卡片中使用。 |

如何理解软件开发中的事件： 框架提供给开发者，在特定时机注册自定义逻辑的一种机制

接下来进行一个测试~

@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%')
  }
}

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