鸿蒙学习 - 显式动画、属性动画 和 transition

鸿蒙学习 - 显式动画、属性动画 和 transition

显式动画：animateTo 包起来就行，适用于：组件的属性和列表数据的数据源变化。 属性动画：.animation 使用于：组件的属性例如：宽高、透明度、颜色、圆角等属性。 对组件的创建移除不生效。

transition 动画需要结合显式动画或者属性动画使用。不能单独使用。

@Entry
@Component
struct Index {

  @State btnWidth: number = 100
  build() {

    Column({space:20}){
      // Button("测试动画").onClick(() => {
      //   // 显示动画
      //   animateTo({duration: 1000, curve:Curve.Linear}, () => {
      //     if (this.btnWidth === 100) {
      //       this.btnWidth = 200
      //     } else {
      //       this.btnWidth = 100
      //     }
      //   })
      // }).width(this.btnWidth).height(100).backgroundColor(Color.Red)

     
Button("测试动画").onClick(() => {
  // 显示动画
  if (this.btnWidth === 100) {
    this.btnWidth = 200
    this.textWidth = 200
  } else {
    this.btnWidth = 100
    this.textWidth = 0
  }
}).width(this.btnWidth).height(100).backgroundColor(Color.Red)
  .animation({duration:1000, curve:Curve.Linear})

Text("专场动画").fontSize(50).width(this.textWidth).height(100).backgroundColor(Color.Blue)
  .transition({
    type:TransitionType.All,
    translate:{x:-200, y:0}, // 动画开始或者结束的状态
    opacity:0
  })
  .animation({duration:1000})

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