【鸿蒙南向开发】 OpenHarmony动画详解

简介

动画是组件的基础特性之一，精心设计的动画使 UI 变化更直观，平滑的动画效果能够很好地增强差异性功能的过渡，有助于改进应用程序的外观并改善用户体验。

OpenHarmony 动画分类：

• 属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括 width、height、backgroundColor、opacity、scale、rotate、translate 等。
• 显示动画：提供全局 animateTo 显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
• 转场动画
  • 页面间转场：在全局 pageTransition 方法内配置页面入场和页面退场时的自定义转场动效。
  • 组件内转场：组件内转场主要通过 transition 属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合animateTo 才能生效，动效时长、曲线、延时跟随 animateTo 中的配置）。
  • 共享元素转场：设置页面间转场时共享元素的转场动效。
• 路径动画：设置组件进行位移动画时的运动路径。
• 窗口动画：提供启动退出过程中控件动画和应用窗口联动动画能力。

动画详解

属性动画

通过控件的 animation 属性实现动画效果。

animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})

参数	类型	必填	描述
duration	number	否	设置动画时长。单位为毫秒，默认动画时长为 1000 毫秒。 默认值：1000
tempo	number	否	动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢 值为 0 时，表示不存在动画。 默认值：1
curve	string	Curve	ICurve9+
delay	number	否	设置动画延迟执行的时长。单位为毫秒，默认不延时播放。 默认值：0
iterations	number	否	设置播放次数。默认播放一次，设置为-1 时表示无限次播放。 默认值：1
playMode	PlayMode	否	设置动画播放模式，默认播放完成后重头开始播放。 默认值：PlayMode.Normal
onFinish	() => void	否	状态回调，动画播放完成时触发。

示例

// xxx.ets
@Entry
@Component
struct AnimateToExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State rotateAngle: number = 0
  private flag: boolean = true

  build() {
    Column() {
      Button('change width and height')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 3,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize = 100
              this.heightSize = 50
            })
          } else {
            animateTo({}, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag
        })
      Button('change rotate angle')
        .margin(50)
        .rotate({ angle: this.rotateAngle })
        .onClick(() => {
          animateTo({
            duration: 1200,
            curve: Curve.Friction,
            delay: 500,
            iterations: -1, // 设置-1表示动画无限循环
            playMode: PlayMode.AlternateReverse,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this.rotateAngle = 90
          })
        })
    }.width('100%').margin({ top: 5 })
  }
}

显示动画

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

animateTo(value: AnimateParam, event: () => void): void

参数	类型	是否必填	描述
value	AnimateParam	是	设置动画效果相关参数。
event	() => void	是	指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

AnimateParam 对象说明

名称	类型	描述
duration	number	动画持续时间，单位为毫秒。 默认值：1000
tempo	number	动画的播放速度，值越大动画播放越快，值越小播放越慢，为 0 时无动画效果。 默认值：1.0
curve	Curve	Curves
delay	number	单位为 ms(毫秒)，默认不延时播放。 默认值：0
iterations	number	默认播放一次，设置为-1 时表示无限次播放。 默认值：1
playMode	PlayMode	设置动画播放模式，默认播放完成后重头开始播放。 默认值：PlayMode.Normal
onFinish	() => void	动效播放完成回调。

示例

// xxx.ets
@Entry
@Component
struct AnimateToExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State rotateAngle: number = 0
  private flag: boolean = true

  build() {
    Column() {
      Button('change width and height')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 3,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize = 100
              this.heightSize = 50
            })
          } else {
            animateTo({}, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag
        })
      Button('change rotate angle')
        .margin(50)
        .rotate({ angle: this.rotateAngle })
        .onClick(() => {
          animateTo({
            duration: 1200,
            curve: Curve.Friction,
            delay: 500,
            iterations: -1, // 设置-1表示动画无限循环
            playMode: PlayMode.AlternateReverse,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this.rotateAngle = 90
          })
        })
    }.width('100%').margin({ top: 5 })
  }
}

注：效果和属性动画等价

转场动画

页面间转场

在全局 pageTransition 方法内配置页面入场和页面退场时的自定义转场动效。

名称	参数	参数描述
PageTransitionEnter	{ type: RouteType, duration: number, curve:Curve	string, delay: number }
PageTransitionExit	{ type: RouteType, duration: number