鸿蒙开发5.0【编排控件】 动画1

属性动画

属性动画概述

• 属性动画最大的特点：其在使用时，使用链式调用，作为被修饰对象的一个属性

• 属性动画是什么

  • 在修饰对象的内置属性改变时，使用动画进行过渡。
  • 理论上讲，只要修饰对象的属性存在二值性，即可使用属性动画进行过渡

• 属性动画有什么作用

  • 常用动画参数：用户可以指定什么

    • 参数：动画持续时间、动画播放速度、动画速率曲线、动画延迟执行时长、动画播放次数、动画播放模式、
    • 回调：在动画播放时触发

• 我们怎么使用属性动画

  • 确定修饰对象的属性，及属性始末状态
  • 确定修饰作用域，及动画参数

• 细节问题

  • 尽量不要对颜色使用属性动画过渡，因为实现的效果不固定
  • 在对尺寸进行变化时，需考虑变化前后及过程中对其余布局的影响

属性动画的使用步骤

• 实际效果：可以用作进度条填充，做一个完整进度的实时动态展示

  

• 首先，确定动画的作用对象及相关属性

  • 常用属性：宽高尺寸、摆放状态、控件样式
  • 一般使用@State 修饰控件状态变量，因为其值改变，会自动触发build() 二次执行

  @Entry
  @Component
  struct AttrAnimationPage {
    @State wSize: number = 250//控件宽度
    @State hSize: number = 100//控件高度
  ​
    build() {
      Column() {
        Button('动画调整按钮宽高')
          .margin(30)
          .width(this.wSize)
          .height(this.hSize)
      }.width('100%').margin({top: 20})
    }
  }
  

• 其次，确定控件的始末状态及触发逻辑

  • 一般使用控件监听，并在监听逻辑中对控件状态变量进行二次赋值，从而确定控件的始末状态

  @Entry
  @Component
  struct AttrAnimationPage {
    ………………
  ​
    build() {
      Column() {
        Button('动画调整按钮宽高')
          .onClick(() => {//确定控件的始末状态及触发逻辑
            if (this.flag) {
              this.wSize = 150
              this.hSize = 60
            } else {
              this.wSize = 250
              this.hSize = 100
            }