鸿蒙 - arkTs:属性动画,显式动画,组件转场动画

2023-12-25 13:22:23

属性动画:

属性动画是通过设置组件的animation属性来给组件添加动画;

代码示例:

@Entry
@Component
struct Index {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State flag: boolean = true

  build() {
    Column() {
      Button('开始动画')
        .onClick(() => {
          if (this.flag) {
            this.widthSize = 150
            this.heightSize = 60
          } else {
            this.widthSize = 250
            this.heightSize = 100
          }
          this.flag = !this.flag
        })
        .margin(30)
        .width(this.widthSize)
        .height(this.heightSize)
        .animation({
          duration: 2000,
          curve: Curve.EaseOut,
          iterations: 3,
          playMode: PlayMode.Normal
        })
    }
      .width('100%')
      .margin({ top: 20 })
  }
}

显式动画:

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

代码示例:

@Entry
@Component
struct Index {
  @State widthSize: number = 250
  @State heightSize: number = 100
  private flag: boolean = true

  build() {
    Column() {
      Button('change size')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({}, () => {
              this.widthSize = 150
              this.heightSize = 60
            })
          } else {
            animateTo({}, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag
        })
    }
      .width('100%')
      .margin({ top: 5 })
  }
}

属性动画 & 显式动画 - animation枚举说明:

名称参数类型必填描述
durationnumber

设置动画时长,单位为毫秒;默认值:1000。

temponumber

动画播放速度。数值越大,动画播放速度越快。值为0时,表示不存在动画。默认值:1。

curvestring |?Curve

设置动画曲线。默认曲线为线性。默认值:Curve.Linear。

delaynumber

设置动画延迟执行的时长,单位为毫秒。默认值:0。

iterationsnumber

设置播放次数。默认值:1。

playModePlayMode

设置动画播放模式,默认播放完成后重头开始播放。默认值:PlayMode.Normal。

onFinish() => void状态回调,动画播放完成时触发的方法。

animation - Curve枚举说明:

  • Linear:表示动画从头到尾的速度都是相同的。
  • Ease:表示动画以低速开始,然后加快,在结束前变慢。
  • EaseIn:表示动画以低速开始。
  • EaseOut:表示动画以低速结束。
  • EaseInOut:表示动画以低速开始和结束。

animation - PlayMode枚举说明:

  • Normal:动画按正常播放。
  • Reverse:动画反向播放。
  • Alternate:动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
  • AlternateReverse:动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。

组件转场动画:?

组件内转场主要通过transition属性配置转场参数,在组件插入和删除时显示过渡动效。

代码示例:

@Entry
@Component
struct Index {
  @State flag: boolean = true

  build() {
    Column() {
      Button(this.flag ? '隐藏组件' : '展示组件')
        .margin(30)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.flag = !this.flag
          })
        })
      if (this.flag) {
        Image($r('app.media.icon'))
          .width(300)
          .height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
      }
    }
      .width('100%')
  }
}

TransitionOptions枚举说明:

参数名称参数类型必填参数描述
typeTransitionType

默认包括组件新增和删除。默认值:TransitionType.All。

opacitynumber

设置组件转场时的透明度效果,为插入时起点和删除时终点的值。默认值:1。

translate

{

????????x? : number | string,

????????y? : number | string,

????????z? : number | string,

}

设置组件转场时的平移效果,为插入时起点和删除时终点的值。

-x:横向的平移距离。

-y:纵向的平移距离。

-z:竖向的平移距离。

scale

{

????????x? : number,

????????y? : number,

????????z? : number,

????????centerX? : number | string,

????????centerY? : number | string,

}

设置组件转场时的缩放效果,为插入时起点和删除时终点的值。

-x:横向放大倍数(或缩小比例)。

-y:纵向放大倍数(或缩小比例)。

-z:竖向放大倍数(或缩小比例)。

- centerX、centerY指缩放中心点,centerX和centerY默认值是"50%"。

- 中心点为0时,默认的是组件的左上角。

rotate

{

????????x?: number,

????????y?: number,

????????z?: number,

????????angle?: number | string,

????????centerX?: number | string,

????????centerY?: number | string,

}

设置组件转场时的旋转效果,为插入时起点和删除时终点的值。

-x:横向的旋转向量。

-y:纵向的旋转向量。

-z:竖向的旋转向量。

- centerX,centerY指旋转中心点,centerX和centerY默认值是"50%"。

- 中心点为(0,0)时,默认的是组件的左上角。

TransitionType枚举说明:

  • ?All:指定当前的Transition动效生效在组件的所有变化场景。
  • Insert:指定当前的Transition动效生效在组件的插入显示场景。
  • Delete:指定当前的Transition动效生效在组件的删除隐藏场景。

文章来源:https://blog.csdn.net/weixin_45536484/article/details/135193052
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。