转场动画&路径动画

        本篇文章我们介绍下转场动画及路径动画。

1、概述

        转场动画有三种类型,页面间转场、组件内转场、共享元素转场。

2、页面间转场

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

2.1、函数说明

名称

参数

必填

参数描述

PageTransitionEnter

{

type?: RouteType,

duration?: number,

curve?: Curve | string,

delay?: number

}

设置当前页面的自定义入场动效。

- type:页面转场效果生效的路由类型。

默认值:RouteType.None

- 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:动画延迟时长。

单位:毫秒

默认值:0,默认不延迟播放。

说明:

没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。

PageTransitionExit

{

type?: RouteType,

duration?: number,

curve?: Curve | string,

delay?: number

}

设置当前页面的自定义退场动效。

- type:页面转场效果生效的路由类型。

默认值:RouteType.None。

- duration:动画的时长,单位为毫秒。

- curve:动画曲线,string类型取值与PageTransitionEnter相同。

默认值:Curve.Linear

- delay:动画延迟时长,单位为毫秒,默认不延迟播放。

默认值:0

单位:毫秒

说明:

没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。

 2.2、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的转场效果生效。

2.3、属性

参数名称

参数

必填

参数描述

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

 2.4、SlideEffect枚举说明

名称

描述

Left

设置到入场时表示从左边滑入,出场时表示滑出到左边。

Right

设置到入场时表示从右边滑入,出场时表示滑出到右边。

Top

设置到入场时表示从上边滑入,出场时表示滑出到上边。

Bottom

设置到入场时表示从下边滑入,出场时表示滑出到下边。

事件

事件

功能描述

onEnter(event: (type?: RouteType, progress?: number) => void)

回调入参为当前入场动画的归一化进度[0 - 1]。

- type:跳转方法。

- progress:当前进度。

触发该事件的条件:逐帧回调,直到入场动画结束,progress从0变化到1。

onExit(event: (type?: RouteType, progress?: number) => void)

回调入参为当前退场动画的归一化进度[0 - 1]。

- type:跳转方法。

- progress:当前进度。

触发该事件的条件:逐帧回调,直到退场动画结束,progress从0变化到1。

 2.5、案例

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

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

  build() {
    Column() {
      Navigator({ target: 'pages/ui/anim/scene/AExample', type: NavigationType.Push }) {
        Image($r('app.media.girl2')).width('100%').height('100%').fitOriginalSize(true)
      }
    }.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%)
  }
}

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

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

  build() {
    Column() {
      Navigator({ target: 'pages/ui/anim/scene/PageTransitionExapleTarget', type: NavigationType.Push }) {
        Image($r('app.media.girl4')).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)
  }
}

运行效果如下: 

HarmoneyOS4.0页面间转场动画

3、组件内转场

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

3.1、属性

名称

参数类型

参数描述

transition

TransitionOptions

设置组件插入显示和删除隐藏的过渡效果。

默认值:不设置任何过渡效果时,默认有透明度从0到1的过渡效果。若设置了其他过渡效果,以设置的过渡效果为准。

说明:

所有参数均为可选参数,详细描述见TransitionOptions参数说明。

3.2、TransitionOptions参数说明

参数名称

参数类型

必填

参数描述

type

TransitionType

默认包括组件新增和删除。

默认值:TransitionType.All

说明:

不指定Type时说明插入删除使用同一种效果。

opacity

number

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

默认值:1

取值范围: [0, 1]

说明:

设置小于0或大于1的非法值时,按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)时,默认的是组件的左上角。

3.3、案例
// xxx.ets
@Entry
@Component
struct WidgetTransitionExamplePage {
  @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
          })
        })
        .margin({ top: 48 })
      if (this.flag) {
        // Image的显示和消失配置为不同的过渡效果
        Image($r('app.media.girl7')).width(300).height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 }, opacity: 0, scale: { x: 0, y: 0 } })
      }
    }.width('100%')
  }
}

        主要是通过组件的transition方法指定动画相关参数来配置组件出现或者消失时的动画效果,运行效果如下:

组件转场动画

4、共享元素转场

        当路由进行切换时,可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

 4.1、属性

名称

参数

参数描述

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

单位:毫秒

取值范围:[0, +∞)

- curve:默认曲线为Linear,有效值参见Curve说明。

- delay:单位为毫秒,默认不延时播放。

默认值:0

单位:毫秒

取值范围:[0, +∞)

设置小于0的值时,按值为0处理。

- motionPath:运动路径信息,详细说明请参考路径动画。

- path:设置路径。

- from:设置起始值。

- to:设置终止值。

- rotatable:是否旋转。

默认值:false

- zIndex:设置Z轴。

默认值:0

- type:动画类型。

默认值:SharedTransitionEffectType.Exchange

说明

type为SharedTransitionEffectType.Exchange时motionPath才会生效。

4.2、案例

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

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

  build() {
    Column() {
      Navigator({ target: 'pages/ui/anim/scene/SharedTransitionTargetExamplePage', type: NavigationType.Push }) {
        Image($r('app.media.girl8')).width(200).height(200).objectFit(ImageFit.Contain)
          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
      }.margin({top: 48})
      .onClick(() => {
        this.active = true
      })
    }
  }
}

        目标页面:

// SharedTransitionTargetExamplePage.ets
import router from '@ohos.router'

@Entry
@Component
struct SharedTransitionTargetExamplePage {
  build() {
    Stack() {
      Image($r('app.media.girl8')).width('100%').height('100%').objectFit(ImageFit.Contain)
        .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }).onClick(() => {
            router.back()
        })
    }.width('100%').height('100%')
  }
}

        运行效果如下:

HarmoneyOS4.0共享元素转场动画

5、路径动画

        设置组件进行位移动画时的运动路径。

5.1、属性

名称

参数

描述

motionPath

{

path: string,

from?: number,

to?: number,

rotatable?: boolean

}

设置组件的运动路径。

- path:位移动画的运动路径,使用svg路径字符串。path中支持使用start和end进行起点和终点的替代,如:'Mstart.x start.y L50 50 Lend.x end.y Z',更多说明请参考绘制路径。

- from:运动路径的起点。

取值范围:[0, 1]

- to:运动路径的终点。

取值范围:[0, 1]

- rotatable:是否跟随路径进行旋转。

5.2、案例
@Entry
@Component
struct MotionPathExample {
  @State toggle: boolean = true

  build() {
    Column() {
      Button('click me').margin(50)
        // 执行动画:从起点移动到(300,200),再到(300,500),再到终点
        .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
        .onClick(() => {
          animateTo({ duration: 10000, curve: Curve.Linear }, () => {
            this.toggle = !this.toggle // 通过this.toggle变化组件的位置
          })
        })
    }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
  }
}

运行效果如下:

HarmoneyOS4.0路径动画

你可能感兴趣的:(鸿蒙4.0开发,鸿蒙4.0,ArkTS,UI,harmonyos,转场动画)