未验证 提交 afd784e2 编写于 作者: L luoying_ace 提交者: Gitee

update zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md.

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 216f783d
...@@ -61,13 +61,13 @@ struct PageTransitionExample1 { ...@@ -61,13 +61,13 @@ struct PageTransitionExample1 {
@State opacity1: number = 1 @State opacity1: number = 1
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
Image($r('app.media.bg1')).width("100%").height("100%") Image($r('app.media.bg1')).width('100%').height('100%')
} }
}.scale({ x: this.scale1 }).opacity(this.opacity1) }.scale({ x: this.scale1 }).opacity(this.opacity1)
} }
// 自定义方式1:完全自定义转场过程的效果 // 自定义方式1:完全自定义转场过程的效果
pageTransition() { pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => { .onEnter((type: RouteType, progress: number) => {
...@@ -93,12 +93,12 @@ struct AExample { ...@@ -93,12 +93,12 @@ struct AExample {
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { Navigator({ target: 'pages/index', type: NavigationType.Push }) {
Image($r('app.media.bg2')).width("100%").height("100%") Image($r('app.media.bg2')).width('100%').height('100%')
} }
}.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2) }.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2)
} }
// 自定义方式1:完全自定义转场过程的效果 // 自定义方式1:完全自定义转场过程的效果
pageTransition() { pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => { .onEnter((type: RouteType, progress: number) => {
...@@ -129,12 +129,12 @@ struct PageTransitionExample { ...@@ -129,12 +129,12 @@ struct PageTransitionExample {
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
Image($r('app.media.bg1')).width("100%").height("100%") Image($r('app.media.bg1')).width('100%').height('100%')
} }
}.scale({ x: this.scale1 }).opacity(this.opacity1) }.scale({ x: this.scale1 }).opacity(this.opacity1)
} }
// 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等) // 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等)
pageTransition() { pageTransition() {
PageTransitionEnter({ duration: 1200 }) PageTransitionEnter({ duration: 1200 })
.slide(SlideEffect.Left) .slide(SlideEffect.Left)
...@@ -152,16 +152,16 @@ struct PageTransitionExample { ...@@ -152,16 +152,16 @@ struct PageTransitionExample {
struct PageTransitionExample1 { struct PageTransitionExample1 {
@State scale2: number = 1 @State scale2: number = 1
@State opacity2: number = 1 @State opacity2: number = 1
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/index', type: NavigationType.Push }) { Navigator({ target: 'pages/index', type: NavigationType.Push }) {
Image($r('app.media.bg2')).width ("100%").height("100%") Image($r('app.media.bg2')).width('100%').height('100%')
} }
}.scale({ x: this.scale2 }).opacity(this.opacity2) }.scale({ x: this.scale2 }).opacity(this.opacity2)
} }
// 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等) // 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等)
pageTransition() { pageTransition() {
PageTransitionEnter({ duration: 1200 }) PageTransitionEnter({ duration: 1200 })
.slide(SlideEffect.Left) .slide(SlideEffect.Left)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册