HarmonyOS API：动画

joytrian

发布于 2023-3-27 17:38

浏览

0收藏

版本：v3.1 Beta

页面间转场

更新时间: 2023-02-17 09:19

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

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

名称	参数	参数描述
PageTransitionEnter	{ type?: RouteType, duration?: number, curve?: Curve \| string, delay?: number }	设置当前页面的自定义入场动效。 - type：页面转场效果生效的路由类型。默认值：RouteType.None。说明：没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。 - duration：动画的时长，单位为毫秒。 - curve：动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。默认值：Curve.Linear - delay：动画延迟时长，单位为毫秒，默认不延迟播放。
PageTransitionExit	{ type?: RouteType, duration?: number, curve?: Curve \| string, delay?: number }	设置当前页面的自定义退场动效。 - type：页面转场效果生效的路由类型。默认值：RouteType.None。说明：没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。 - duration：动画的时长，单位为毫秒。 - curve：动画曲线，string类型取值与PageTransitionEnter相同。默认值：Curve.Linear - delay：动画延迟时长，单位为毫秒，默认不延迟播放。

RouteType枚举说明

名称	描述
Pop	重定向指定页面。从PageB回退到之前的页面PageA。对于PageB，指定RouteType为None或者Pop的PageTransitionExit组件样式生效，对于PageA，指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。
Push	跳转到下一页面。PageA跳转到下一个新的界面PageB。对于PageA，指定RouteType为None或者Push的PageTransitionExit组件样式生效，对于PageB，指定RouteType为None或者Push的PageTransitionEnter组件样式生效。
None	页面未重定向。如Push和Pop描述中RouteType为None的情形，即页面进场时PageTransitionEnter的转场效果生效；退场时PageTransitionExit的转场效果生效。

属性

参数名称	参数类型	必填	参数描述
slide	SlideEffect	否	设置页面转场时的滑入滑出效果。默认值：SlideEffect.Right
translate	{ x? : number \| string, y? : number \| string, z? : number \| string }	否	设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 - x：横向的平移距离。 - y：纵向的平移距离。 - z：竖向的平移距离。
scale	{ x? : number, y? : number, z? : number, centerX? : number \| string, centerY? : number \| string }	否	设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 - x：横向放大倍数（或缩小比例）。 - y：纵向放大倍数（或缩小比例）。 - z：竖向放大倍数（或缩小比例）。 - centerX、centerY缩放中心点。 - 中心点为0时，默认的是组件的左上角。
opacity	number	否	设置入场的起点透明度值或者退场的终点透明度值。默认值：1

SlideEffect枚举说明

名称	描述
Left	设置到入场时表示从左边滑入，出场时表示滑出到左边。
Right	设置到入场时表示从右边滑入，出场时表示滑出到右边。
Top	设置到入场时表示从上边滑入，出场时表示滑出到上边。
Bottom	设置到入场时表示从下边滑入，出场时表示滑出到下边。

事件

事件	功能描述
onEnter(event: (type?: RouteType, progress?: number) => void)	回调入参为当前入场动画的归一化进度[0 - 1]。 - type：跳转方法。 - progress：当前进度。
onExit(event: (type?: RouteType, progress?: number) => void)	回调入参为当前退场动画的归一化进度[0 - 1]。 - type：跳转方法。 - progress：当前进度。

示例

自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。

// index.ets
@Entry
@Component
struct PageTransitionExample1 {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
        Image($r('app.media.bg1')).width('100%').height('100%')    // 图片存放在media文件夹下
      }
    }.scale({ x: this.scale1 }).opacity(this.opacity1)
  }
  // 自定义方式1：完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale1 = 1
        this.opacity1 = progress
      }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale1 = 1 - progress
        this.opacity1 = 1
      }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
  }
}

// page1.ets
@Entry
@Component
struct AExample {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
        Image($r('app.media.bg2')).width('100%').height('100%')   // 图片存放在media文件夹下
      }
    }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2)
  }
  // 自定义方式1：完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale2 = 1
        this.opacity2 = progress
      }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale2 = 1 - progress
        this.opacity2 = 1
      }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
  }
}

HarmonyOS API：动画-鸿蒙开发者社区

自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。

// index.ets 
@Entry
@Component
struct PageTransitionExample {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
        Image($r('app.media.bg1')).width('100%').height('100%')   // 图片存放在media文件夹下
      }
    }.scale({ x: this.scale1 }).opacity(this.opacity1)
  }

  // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}

// page1.ets
@Entry
@Component
struct PageTransitionExample1 {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
        Image($r('app.media.bg2')).width('100%').height('100%')    // 图片存放在media文件夹下
      }
    }.scale({ x: this.scale2 }).opacity(this.opacity2)
  }

  // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}

HarmonyOS API：动画-鸿蒙开发者社区

组件内转场

更新时间: 2023-02-17 09:19

组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性

名称	参数类型	参数描述
transition	TransitionOptions	所有参数均为可选参数，详细描述见TransitionOptions参数说明。

TransitionOptions参数说明

参数名称	参数类型	必填	参数描述
type	TransitionType	否	默认包括组件新增和删除。默认值：TransitionType.All 说明：不指定Type时说明插入删除使用同一种效果。
opacity	number	否	设置组件转场时的透明度效果，为插入时起点和删除时终点的值。默认值：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）时，默认的是组件的左上角。

示例

// xxx.ets
@Entry
@Component
struct TransitionExample {
  @State flag: boolean = true
  @State show: string = 'show'

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          // 点击Button控制Image的显示和消失
          animateTo({ duration: 1000 }, () => {
            if (this.flag) {
              this.show = 'hide'
            } else {
              this.show = 'show'
            }
            this.flag = !this.flag
          })
        })
      if (this.flag) {
        // Image的显示和消失配置为不同的过渡效果
        Image($r('app.media.testImg')).width(300).height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
      }
    }.width('100%')
  }
}

示意图：

图片完全显示时：

HarmonyOS API：动画-鸿蒙开发者社区

图片消失时配置顺时针旋转180°的过渡效果：

HarmonyOS API：动画-鸿蒙开发者社区

图片完全消失时：

HarmonyOS API：动画-鸿蒙开发者社区

图片显示时配置横向放大一倍的过渡效果：

HarmonyOS API：动画-鸿蒙开发者社区

共享元素转场

更新时间: 2023-02-17 09:19

设置页面间转场时共享元素的转场动效。

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性

名称	参数	参数描述
sharedTransition	id: string, { duration?: number, curve?: Curve \| string, delay?: number, motionPath?: { path: string, form?: number, to?: number, rotatable?: boolean }, zIndex?: number, type?: SharedTransitionEffectType }	两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。 - id：设置组件的id。 - duration：单位为毫秒，默认动画时长为1000毫秒。 - curve：默认曲线为Linear，有效值参见Curve说明。 - delay：单位为毫秒，默认不延时播放。 - motionPath：运动路径信息，详细说明请参考路径动画。 - path：设置路径。 - from：设置起始值。 - to：设置终止值。 - rotatable：是否旋转。 - zIndex：设置Z轴。 - type：动画类型。

示例

示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。

// xxx.ets
@Entry
@Component
struct SharedTransitionExample {
  @State active: boolean = false

  build() {
    Column() {
      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
        Image($r('app.media.ic_health_heart')).width(50).height(50)
          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
      }.padding({ left: 20, top: 20 })
      .onClick(() => {
        this.active = true
      })
    }
  }
}

// PageB.ets
@Entry
@Component
struct pageBExample {
  build() {
    Stack() {
      Image($r('app.media.ic_health_heart')).width(150).height(150)
        .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
    }.width('100%').height('100%')
  }
}

HarmonyOS API：动画-鸿蒙开发者社区