鸿蒙进阶篇-属性动画

“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。”

各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,鸿蒙进阶篇-属性动画

在鸿蒙中，属性动画（Property Animation）是一种用于实现视图或组件属性平滑过渡和动态变化的机制。

通过属性动画，可以对对象的属性（如位置、大小、透明度、颜色等）进行连续、流畅的改变，从而产生生动的动画效果。

与传统的补间动画（Tween Animation）不同，属性动画直接操作对象的实际属性值，而不仅仅是视图的显示效果。这使得动画更加真实和灵活，能够与应用的逻辑和交互更好地结合。

属性动画可以设置动画的持续时间、插值器（控制动画的变化速率）、重复次数等参数，以满足不同的动画需求。

属性值的变化，通常会引发 UI 的变化,结合动画可以让这个变化过程【更为流畅】，反之这个过程将在一瞬间完成，用户体验不好，观感突兀。这就是动画的作用：附上官方文档链接https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-animation-V5

HarmonyOS 中的动画主要分为：

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

属性动画-animation

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

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

基本使用

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

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

// 最核心写法，相关动画属性后续展开
组件
  .属性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)// 2.将状态变量设置到相关可动画属性接口
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)
        .translate({ y: this.translateY })// 3.通过属性动画接口开启属性动画
        .animation({})
      Button('修改状态变量')
        .onClick(() => {
          // 4. 通过状态变量改变UI界面
          this.bgColor = '#0094ff'
          this.translateY = 100
          this.fontColor = Color.Pink
          this.fontWeight = 900
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

常用属性

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

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

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

动画曲线https://animista.net/枚举值：

playMode 播放模式枚举值

下面展示一个案例来理解:

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

组件加载自动触发事件

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

附上官方文档链接https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-events-show-hide-V5

下面展示一个案例来理解:

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

以上是关于鸿蒙进阶篇-属性动画综合的一些内容,方便大家学习,至此，关于鸿蒙进阶篇-Scroll、Tabs、Badge属性动画 综合的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！

以上内容仅供学习交流，如有违法或者侵权可以联系删除。