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

1.基本使用

核心步骤：

声明相关状态变量将状态变量设置到相关可动画属性接口通过属性动画接口开启属性动画（在属性动画上面的属性会应用动画）通过状态变量改变UI界面1.1 测试代码

@Entry
@Component
struct AnimationDemo {
  @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)
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)
        .translate({ y: this.translateY })
        .opacity(1)
        
        //animation一天要写在这些属性的下面，不然监听不到
        .animation({})
      Button('修改状态变量')
      //添加点击事件，当点击时就会将状态变量的值进行改变，然后animation在变得期间进行动画效果设置
        .onClick(() => {
          this.bgColor = '#0094ff'
          this.translateY = 100
          this.fontColor = Color.Pink
          this.fontWeight = 900
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}
  }
}

1.2 常用属性

.animation({
  //duration: 1000, //动画的时长，默认1秒
  //curve:Curve.Linear,//枚举类型的动画曲线
  //curve:curves.cubicBezierCurve(0.29,-0.33,.83,0.67),//自定义贝塞尔曲线
  //delay: 1000, //延时一秒钟播放
  iterations: -1, //开发常用，-1为无限循环动画,默认为1，1为循环一次
  playMode: PlayMode.Alternate, //开发常用，表示动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  // onFinish: () => {          //当完成循环动画过后会返回一个参数，在这里设置了一个弹窗效果，将来做反馈有用
  //   AlertDialog.show({ message: '完成了' })
  // }
})

说明：如果要自定义贝塞尔曲线的话可以去：

1.2.1 其中curve动画曲线的一些枚举值说明

1.2.2 playMode 取值

2.1 案例

搞这个案例之前还要学一个通用事件

说明：onAppear表示组件加载成功时会自动进行进行方法体里面的结构，当用户一打开界面，它就能实现自动做逻辑里面的事情，也就是上面这个案例一打开它就自动进行动画效果，如果时用onclick的话再一次进去需要点击一次才能触发动画效果

参考代码

@Entry
@Component
struct Index {
  @State xs: number = 1
  build() {
    Column() {
      Text('全场低至一分购')
        .fontSize(40)
        .fontColor(Color.Red)
        .fontWeight(800)
        .backgroundColor('#e8b66c')
        .padding(20)
        .borderRadius(25)
        .margin({ top: 50 })
        .scale({
          x: this.xs,
          y: this.xs
        })
        .animation({
          iterations:-1,
          playMode:PlayMode.Alternate
        })
        /*.onClick(()=>{
          this.xs = 0.7
        })*/
          //  组件加载成功时会自动进行进行方法体里面的结构
          // 这样就解决了每次加载完页面时都需要自己去点击一次才开始动画
        .onAppear(()=>{
          this.xs = 0.5 
        })
  }
}
}

3.1 显示动画animateTo

属性动画 animation是作为属性使用，而animateTo显示动画是一个系统的内置函数，可以直接调用，一般事件触发时一起使用，比如点击事件，滚动事件等等

说明：animateTo可以解决animation属性不能实现动画的场景：例如：自定义打开和关闭SideBarContainer侧边栏的动画效果 animation不能实现，但是使用animateTo可以实现

3.1.1 基本语法

// 参数 1 动画选项 和 animation 相同
// 参数 2 箭头函数，状态变量的修改写在里面
animateTo({}, () => {
  
})

通过一个案例来解释更加容易理解

@Entry
@Component
struct Index {
  @State isShow: boolean = false
  build() {
    Column() {
      SideBarContainer(SideBarContainerType.Overlay) {
        // 1. 侧边栏区域
        Column() {
          Text('侧边栏区域内容')
          Button('关闭')
            .onClick(() => {
              animateTo({duration:2000},()=>{
                this.isShow = false
              })
            })
        }
        // .height('100%')
        // .width(200)
        .backgroundColor(Color.Orange)
        //  2.内容区域
        Column() {
          Text('内容')
          Button('打开')
            .onClick(() => {
              // 调用系统内置的一个函数来实现动画效果
              animateTo({ duration:500 },()=>{
                this.isShow = true
              })
            })
        }
        // .height('100%')
        // .width(200)
        .backgroundColor(Color.Green)
      }
      .showSideBar($$this.isShow)
      .showControlButton(false)
      .sideBarWidth(200)
      .minSideBarWidth(100)
      .maxSideBarWidth(300)
      // .animation({})
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}

说明：通过在onclick里面配合使用animateTo来侦听由true变为false中间的过程，在其中加入动画效果，这个功能是animation办不到的。