OpenHarmony动画
文章目录
摘要
在应用开发时,我们常常遇到,需要添加动画效果
以优化用户体验,比如常见的动画效果有转场动画,组件转场等。本文就以动画开发范例为例,来讲解OpenHarmony应用动画开发相关的技术点,帮助开发者快速学习动画。
关键字
OpenHarmony 动画 属性动画 显式动画 转场动画 ArkUI
概述
ArkUI中,产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律(即曲线)等参数。当属性值发生变化后,按照动画参数,从原来的状态过渡到新的状态,即形成一个动画。
ArkUI提供按照页面分类
和按照基础能力分类
的动画能力。 本文按照基础能力分类的动画能力,从使用场景出发,提供各种动画的使用方法和注意事项,使开发者快速学习动画。
通过本篇文章的学习,你将学会:
1.如何使用属性动画
2.如何使用显式动画
3.如何使用转场动画
按照页面分类的动画
ArkUI提供的动画能力按照页面的分类方式,可分为页面内的动画
和页面间的动画
。如下图所示,页面内的动画指在一个页面内即可发生的动画,页面间的动画指两个页面跳转时才会发生的动画。
按照基础能力分类的动画
如果按照基础能力分,可分为属性动画
、显式动画
、转场动画
三部分。如下图所示。
属性动画
效果预览
实现思路
通过改变组件的某些通用属性值
时,实现属性动画渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
参数说明
名称 | 参数 | 必填 | 参数描述 |
---|---|---|---|
duration | number | 否 | 设置动画时长。 默认值:1000 单位:毫秒 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: - 在ArkTS卡片上最大动画持续时间为1000毫秒。 - 设置浮点型类型的值时,向下取整;设置值为 1.2,按照1处理。 |
tempo | number | 否 | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢。值为0时,表示不存在动画。 默认值:1 |
curve | string/Curve | 否 | 设置动画曲线。 默认值:Curve.EaseInOut 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
delay | number | 否 | 设置动画延迟执行的时长。 默认值:0,不延迟播放。 单位:毫秒 取值范围:[0, +∞) 说明: 设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 |
iterations | number | 否 | 设置播放次数。 默认值:1 取值范围:[-1, +∞) 说明: 设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
playMode | PlayMode | 否 | 设置动画播放模式,默认播放完成后重头开始播放。 默认值:PlayMode.Normal 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
onFinish | () => void | 否 | 状态回调,动画播放完成时触发。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 当iterations设置为-1时,动画效果无限循环不会停止,所以不会触发此回调。 |
显式动画
效果预览
实现思路
通过ArkUI提供的全局animateTo()
显式动画接口的属性值改变,来指定由于闭包
代码导致的状态变化从而插入过渡动效。
animateTo(value: AnimateParam, event: () => void): void
参数说明
名称 | 参数 | 参数描述 |
---|---|---|
duration | number | 设置动画时长。 默认值:1000 单位:毫秒 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: - 在ArkTS卡片上最大动画持续时间为1000毫秒。 - 设置浮点型类型的值时,向下取整;设置值为 1.2,按照1处理。 |
tempo | number | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢。值为0时,表示不存在动画。 默认值:1 |
curve | string/Curve | 设置动画曲线。 默认值:Curve.EaseInOut 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
delay | number | 设置动画延迟执行的时长。 默认值:0,不延迟播放。 单位:毫秒 取值范围:[0, +∞) 说明: 设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 |
iterations | number | 设置播放次数。 默认值:1 取值范围:[-1, +∞) 说明: 设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
playMode | PlayMode | 设置动画播放模式,默认播放完成后重头开始播放。 默认值:PlayMode.Normal 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
onFinish | () => void | 状态回调,动画播放完成时触发。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 当iterations设置为-1时,动画效果无限循环不会停止,所以不会触发此回调。 |
转场动画
此处以页面转场动画为例
效果预览
实现思路
页面转场效果写在pageTransition函数中,通过PageTransitionEnter
和PageTransitionExit
指定页面进入和退出的动画效果。
PageTransitionEnter的接口为:
PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})
PageTransitionExit的接口为:
PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})
名称 | 参数 | 必填 | 参数描述 |
---|---|---|---|
PageTransitionEnter | { type?: RouteType, duration?: number, curve?: string, delay?: number } | 否 | 设置当前页面的自定义入场动效。 - type:页面转场效果生效的路由类型。 默认值:RouteType.None。 - duration:动画的时长。 单位:毫秒 默认值:1000 - 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?: string, delay?: number } | 否 | 设置当前页面的自定义退场动效。 - type:页面转场效果生效的路由类型。 默认值:RouteType.None。 - duration:动画的时长。 单位:毫秒 默认值:1000 - curve:动画曲线,string类型取值与PageTransitionEnter相同。 默认值:Curve.Linear - delay:动画延迟时长。 单位:毫秒 默认值:0 说明: 没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。 |
说明:
1、上述接口定义了PageTransitionEnter
和PageTransitionExit
组件,可通过slide、translate、scale、opacity属性定义不同的页面转场效果。对于PageTransitionEnter而言,这些效果表示入场时起点值,对于PageTransitionExit而言,这些效果表示退场的终点值,这一点与组件转场transition配置方法类似。此外,PageTransitionEnter提供了onEnter接口进行自定义页面入场动画的回调,PageTransitionExit提供了onExit接口进行自定义页面退场动画的回调。2、上述接口中的参数type,表示路由生效的类型,这一点开发者容易混淆其含义。页面转场的两个页面,必定有一个页面退出,一个页面进入。如果通过router.pushUrl操作从页面A跳转到页面B,则页面A退出,做页面退场动画,页面B进入,做页面入场动画。如果通过router.back操作从页面B返回到页面A,则页面B退出,做页面退场动画,页面A进入,做页面入场动画。即页面的PageTransitionEnter既可能是由于新增页面(push,入栈)
引起的新页面的入场动画
,也可能是由于页面返回(back,或pop,出栈)引起的页面栈中老页面的入场动画
,为了能区分这两种形式的入场动画,提供了type参数,这样开发者能完全定义所有类型的页面转场效果。
属性说明
参数名称 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
slide | 详见slideEffect枚举说明 | 否 | 设置页面转场时的滑入滑出效果。 |
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缩放中心点。centerX和centerY默认值是"50%",即默认以页面的中心点为旋转中心点。 - 中心点为(0, 0)代表页面的左上角。 |
opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
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的转场效果生效。 |
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。 |
type配置为RouteType.None
type为RouteType.None表示对页面栈的push、pop操作均生效,type的默认值为RouteType.None。
// page A
pageTransition() {
// 定义页面进入时的效果,从左侧滑入,时长为1200ms,无论页面栈发生push还是pop操作均可生效
PageTransitionEnter({ type: RouteType.None, duration: 1200 })
.slide(SlideEffect.Left)
// 定义页面退出时的效果,向左侧滑出,时长为1000ms,无论页面栈发生push还是pop操作均可生效
PageTransitionExit({ type: RouteType.None, duration: 1000 })
.slide(SlideEffect.Left)
}
// page B
pageTransition() {
// 定义页面进入时的效果,从右侧滑入,时长为1000ms,无论页面栈发生push还是pop操作均可生效
PageTransitionEnter({ type: RouteType.None, duration: 1000 })
.slide(SlideEffect.Right)
// 定义页面退出时的效果,向右侧滑出,时长为1200ms,无论页面栈发生push还是pop操作均可生效
PageTransitionExit({ type: RouteType.None, duration: 1200 })
.slide(SlideEffect.Right)
}
type配置为RouteType.Push
或RouteType.Pop
1、type为RouteType.Push表示仅对页面栈的push操作生效,type为RouteType.Pop表示仅对页面栈的pop操作生效。
2、假设页面栈为标准实例模式,即页面栈中允许存在重复的页面。可能会有4种场景,对应的页面转场效果如下表。
路由操作 | 页面A转场效果 | 页面B转场效果 |
---|---|---|
router.pushUrl,从页面A跳转到新增的页面B | 页面退出,PageTransitionExit且type为RouteType.Push的转场样式生效,向左侧滑出屏幕 | 页面进入,PageTransitionEnter且type为RouteType.Push的转场样式生效,从右侧滑入屏幕 |
router.back,从页面B返回到页面A | 页面进入,PageTransitionEnter且type为RouteType.Pop的转场样式生效,从左侧滑入屏幕 | 页面退出,PageTransitionExit且type为RouteType.Pop的转场样式生效,向右侧滑出屏幕 |
router.pushUrl,从页面B跳转到新增的页面A | 页面进入,PageTransitionEnter且type为RouteType.Push的转场样式生效,从右侧滑入屏幕 | 页面退出,PageTransitionExit且type为RouteType.Push的转场样式生效,向左侧滑出屏幕 |
router.back,从页面A返回到页面B | 页面退出,PageTransitionExit且type为RouteType.Pop的转场样式生效,向右侧滑出屏幕 | 页面进入,PageTransitionEnter且type为RouteType.Pop的转场样式生效,从左侧滑入屏幕 |
说明:
- 由于每个页面的页面转场样式都可由开发者独立配置,而页面转场涉及到两个页面,开发者应考虑两个页面的页面转场效果的衔接,如时长尽量保持一致。
- 如果没有定义匹配的页面转场样式,则该页面使用系统默认的页面转场样式。
禁用某页面的页面转场
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
通过设置页面转场的时长为0,可使该页面无页面转场动画
。
快速开始
属性动画
开发者可在项目中的entry目录下进行代码开发。
构建页面结构
编写页面结构
- 在页面添加Button组件,并设置其样式。
- 用变量flag控制按钮点击前后的两种状态:动画跳转前:flag=true;点击按钮后将flag状态置为false,flag=false时代表动画完成效果后状态并将flag重新置于true;
工程创建后,在“Project”窗口,点击“entry > src > main > ets > pages”,打开“Index.ets”文件,可以看到页面由Button组件组成。“Index.ets”文件的示例如下:
@Entry
@Component
struct AnimationSample {
@State widthSize: number = 160;
@State heightSize: number = 80;
@State rotateAngle: number = 0;
@State flag: boolean = true;
build() {
Column() {
Scroll() {
Column() {
Button()
// 添加按钮,以响应用户点击
.onClick(() => {
if (this.flag) {
this.heightSize = 60;
} else {
this.heightSize = 80;
}
this.flag = !this.flag;
})
.margin(35)
.width(this.widthSize)
.height(this.heightSize)
Button()
// 添加按钮,以响应用户点击
.onClick(() => {})
.width(160)
.margin(35)
.constraintSize({ minHeight: '100%' })
.margin({ bottom: 20 })
}
.borderRadius(24)
.backgroundColor(Color.White)
.height('90%')
.width('100%')
.margin({ left: 12, right: 12 })
}
}
}
引用资源
- 定义需要被引用的文字资源:在“Project”窗口,点击“entry > src > main > resources > base > element > string.json”,打开“string.json”文件,加入文字资源,如代码展示:
{
"string": [
{
"name": "attribute_animation_change_size",
"value": "改变大小(属性动画)"
},
{
"name": "attribute_animation_change_rotation",
"value": "改变旋转角度"
}
]
}
引用文字资源:在 Button() 中用 $r(‘app.string.xx’) 的方式引用文字资源。
- “Index.ets”文件的示例如下:
@Entry
@Component
struct AnimationSample {
@State widthSize: number = 160;
@State heightSize: number = 80;
@State rotateAngle: number = 0;
@State flag: boolean = true;
build() {
Column() {
Scroll() {
Column() {
// 按钮引用文字资源
Button({ title: $r('app.string.attribute_animation') })
// 添加按钮,以响应用户点击
.onClick(() => {
if (this.flag) {
this.heightSize = 60;
} else {
this.heightSize = 80;
}
this.flag = !this.flag;
})
.margin(35)
.width(this.widthSize)
.height(this.heightSize)
// 按钮引用文字资源
Button($r('app.string.attribute_animation_change_rotation'))
// 添加按钮,以响应用户点击
.onClick(() => {})
.width(160)
.margin(35)
.constraintSize({ minHeight: '100%' })
.margin({ bottom: 20 })
}
.borderRadius(24)
.backgroundColor(Color.White)
.height('90%')
.width('100%')
.margin({ left: 12, right: 12 })
}
}
}
加入属性动画
在Button()组件内的点击事件中增加属性动画.animation({})
,参数详见上文。
“Index.ets”文件的示例如下:
@Entry
@Component
struct AnimationSample {
@State widthSize: number = 160;
@State heightSize: number = 80;
@State rotateAngle: number = 0;
@State flag: boolean = true;
build() {
Column() {
Scroll() {
Column() {
// 按钮引用文字资源
Button({ title: $r('app.string.attribute_animation') })
// 添加按钮,以响应用户点击
.onClick(() => {
if (this.flag) {
this.heightSize = 60;
} else {
this.heightSize = 80;
}
this.flag = !this.flag;
})
.margin(35)
.width(this.widthSize)
.height(this.heightSize)
// 添加属性动画,点击按钮后,属性动画为一个持续2s,只播放1次的渐变动画
.animation({
duration: 2000,
curve: Curve.EaseOut,
iterations: 1,
playMode: PlayMode.Normal
})
Button($r('app.string.attribute_animation_change_rotation'))
// 添加按钮,以响应用户点击
.onClick(() => {})
.width(160)
.margin(35)
// 添加属性动画,点击按钮后,属性动画为一个持续1.2s,播放2次,结束后旋转回原位的渐变动画
.rotate({ angle: this.rotateAngle })
.animation({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: 2,
playMode: PlayMode.Alternate,
onFinish: () => {
this.rotateAngle = 0;
}
})
.constraintSize({ minHeight: '100%' })
.margin({ bottom: 20 })
}
.borderRadius(24)
.backgroundColor(Color.White)
.height('90%')
.width('100%')
.margin({ left: 12, right: 12 })
}
}
}
显式动画
构建页面结构
编写页面结构
- 在页面添加Button组件,并设置其样式。
- 用变量flag控制按钮点击前后的两种状态:动画跳转前:flag=true;动画完成后:flag=false,每次点击都将flag值取反;
加入显式动画
添加显式动画属性:在 Button().animateTo()
的闭包函数中改变动画属性值从而开始播放动画。关键代码如下:
// 按钮点击后,显式动画为一个持续1.2s,播放2次,第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
Button()
.onClick(() => {
animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: 2,
playMode: PlayMode.Alternate,
// 动效播放完成回调,表现为旋转回原位,旋转角度为0。
onFinish: () => {
this.rotateAngle = 0;
}
}, () => {
this.rotateAngle = 90;
});
})
工程创建后,在“Project”窗口,点击“entry > src > main > ets > pages”,打开“Index.ets”文件,可以看到页面由Button组件组成。“Index.ets”文件的示例如下:
@Entry
@Component
struct AnimationToSample {
@State widthSize: number = 160;
@State heightSize: number = 80;
@State rotateAngle: number = 0;
@State flag: boolean = true;
build() {
Column() {
Scroll() {
Column() {
Button()
.onClick(() => {
if (this.flag) {
// 显式动画接口,表现的显式动画为一个持续2s,播放1次,第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
animateTo({
duration: 2000,
curve: Curve.EaseOut,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {}
}, () => {
this.heightSize = 60;
});
} else {
animateTo({}, () => {
this.heightSize = 80;
});
}
this.flag = !this.flag;
})
.margin(35)
.width(this.widthSize)
.height(this.heightSize)
.backgroundColor()
Button()
.onClick(() => {
按钮点击后,显式动画为一个持续1.2s,播放2次,第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: 2,
playMode: PlayMode.Alternate,
onFinish: () => {
this.rotateAngle = 0;
}
}, () => {
this.rotateAngle = 90;
});
})
.width(160)
.margin(35)
.rotate({ angle: this.rotateAngle })
.backgroundColor()
}
.constraintSize({ minHeight: '100%' })
}
.borderRadius(24)
.backgroundColor(Color.White)
.height('90%')
.width('100%')
.margin({ left: 12, right: 12 })
}
}
}
引用资源
- 定义需要被引用的文字资源:在“Project”窗口,点击“entry > src > main > resources > base > element > string.json”,打开“string.json”文件,加入文字资源,如代码展示:
{
"string": [
{
"name": "attribute_animationTo_change_size",
"value": "改变大小(显式动画)"
},
{
"name": "attribute_animation_change_rotation",
"value": "改变旋转角度"
}
]
}
引用文字资源:在 Button() 中用 $r(‘app.string.xx’) 的方式引用文字资源。
- 定义需要被引用的颜色资源:在“Project”窗口,点击“entry > src > main > resources > base > element > color.json”,打开“color.json”文件,加入颜色资源,如代码展示:
{
"color": [
{
"name": "app.color.background_btn",
"value": "#e27a93"
},
]
}
引用颜色资源:在 Button(){}.backgroundColor() 中用 $r(‘app.color.xx’) 的方式引用颜色资源。
- “Index.ets”文件的示例如下:
@Entry
@Component
struct AnimationToSample {
@State widthSize: number = 160;
@State heightSize: number = 80;
@State rotateAngle: number = 0;
@State flag: boolean = true;
build() {
Column() {
Scroll() {
Column() {
// 按钮引用文字资源
Button($r('app.string.attribute_animationTo_change_size'))
.onClick(() => {
if (this.flag) {
// 显式动画接口,表现的显式动画为一个持续2s,播放1次,第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
animateTo({
duration: 2000,
curve: Curve.EaseOut,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {}
}, () => {
this.heightSize = 60;
});
} else {
animateTo({}, () => {
this.heightSize = 80;
});
}
this.flag = !this.flag;
})
.margin(35)
.width(this.widthSize)
.height(this.heightSize)
// 按钮引用颜色资源
.backgroundColor($r('app.color.background_btn'))
// 按钮引用文字资源
Button($r('app.string.attribute_animation_change_rotation'))
.onClick(() => {
// 按钮点击后,显式动画为一个持续1.2s,播放2次,第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: 2,
playMode: PlayMode.Alternate,
onFinish: () => {
this.rotateAngle = 0;
}
}, () => {
this.rotateAngle = 90;
});
})
.width(160)
.margin(35)
.rotate({ angle: this.rotateAngle })
// 按钮引用颜色资源
.backgroundColor($r('app.color.background_btn'))}
.constraintSize({ minHeight: '100%' })
}
.borderRadius(24)
.backgroundColor(Color.White)
.height('90%')
.width('100%')
.margin({ left: 12, right: 12 })
}
}
}
注意事项
使用显性动画接口
animateTo(value: AnimateParam, event: () => void): void
时,其中需注意:
PlayMode属性说明:
1、PlayMode推荐使用PlayMode.Normal
和PlayMode.Alternate
,此场景下动画的第一轮是正向播放的。如使用PlayMode.Reverse和PlayMode.AlternateReverse,则动画的第一轮是逆向播放的,在动画刚开始时会跳变到终止状态,然后逆向播放动画。
2、使用PlayMode.Alternate或PlayMode.AlternateReverse时,开发者应保证动画最终状态和状态变量的取值一致,即应保证动画的最后一轮是正向播放的。使用PlayMode.Alternate时,iterations应为奇数。使用PlayMode.AlternateReverse时,iterations应为偶数。
3、不推荐使用PlayMode.Reverse,此场景下不仅会导致动画刚开始就跳变到终止状态,也会导致动画最终状态和状态变量的取值不同。
转场动画
构建第一个页面
- 下面介绍定义了所有的四种页面转场样式的页面转场动画示例:在第一个页面添加图片组件,按钮事件及跳转路由,并设置其样式。
工程同步完成后,在“Project”窗口,点击“entry > src > main > ets > pages”,打开“Index.ets”文件,可以看到页面由Image,Button组件组成。“Index.ets”文件的示例如下:
// Index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Image($r('app.media.mountain'))
.width('90%')
.height('80%')
.objectFit(ImageFit.Fill)
.syncLoad(true) // 同步加载图片,使页面出现时图片已经加载完成
.margin(30)
Row({ space: 10 }) {
Button("pushUrl")
.onClick(() => {
// 路由到下一个页面,push操作
router.pushUrl({ url: 'pages/Second' });
})
Button("back")
.onClick(() => {
// 返回到上一页面,相当于pop操作
router.back();
})
}.justifyContent(FlexAlign.Center)
}
.width("100%").height("100%")
.alignItems(HorizontalAlign.Center)
}
}
}
- 添加pageTransition动画跳转函数,并定义出所有的四种页面转场样式。
在默认页面基础上,我们添加一个pageTransition函数
作为页面间动画跳转方法,响应用户点击,从而实现动画跳转到另一个页面。“Index.ets”文件的示例如下:
// Index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Image($r('app.media.mountain'))
.width('90%')
.height('80%')
.objectFit(ImageFit.Fill)
.syncLoad(true) // 同步加载图片,使页面出现时图片已经加载完成
.margin(30)
Row({ space: 10 }) {
Button("pushUrl")
.onClick(() => {
// 路由到下一个页面,push操作
router.pushUrl({ url: 'pages/Second' });
})
Button("back")
.onClick(() => {
// 返回到上一页面,相当于pop操作
router.back();
})
}.justifyContent(FlexAlign.Center)
}
.width("100%").height("100%")
.alignItems(HorizontalAlign.Center)
}
}
pageTransition() {
// 定义页面进入时的效果,从右侧滑入,时长为1000ms,页面栈发生push操作时该效果才生效
PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
.slide(SlideEffect.Right)
// 定义页面进入时的效果,从左侧滑入,时长为1000ms,页面栈发生pop操作时该效果才生效
PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
.slide(SlideEffect.Left)
// 定义页面退出时的效果,向左侧滑出,时长为1000ms,页面栈发生push操作时该效果才生效
PageTransitionExit({ type: RouteType.Push, duration: 1000 })
.slide(SlideEffect.Left)
// 定义页面退出时的效果,向右侧滑出,时长为1000ms,页面栈发生pop操作时该效果才生效
PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
.slide(SlideEffect.Right)
}
}
构建第二个页面
参照第一个页面“Index.ets”文件
实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
说明:
开发者也可以在右键点击“pages”文件夹时,选择“New > Page”,则无需手动配置相关页面路由。
- 配置第二个页面的路由。在“Project”窗口,打开“entry > src > main > resources > base > profile”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下:
{
"src": [
"pages/Index",
"pages/Second"
]
}
-
添加图片,按钮及跳转路由。
参照第一个页面,在第二个页面添加图片组件,按钮事件和跳转路由等,并设置其样式。“Second.ets”文件的示例如下:
// Second.ets import router from '@ohos.router'; @Entry @Component struct Second { build() { Row() { Column() { Image($r('app.media.forest')) .width('90%') .height('80%') .objectFit(ImageFit.Fill) .syncLoad(true) // 同步加载图片,使页面出现时图片已经加载完成 .margin(30) Row({ space: 10 }) { Button("pushUrl") .onClick(() => { // 路由到下一页面,push操作 router.pushUrl({ url: 'pages/Index' }); }) Button("back") .onClick(() => { // 返回到上一页面,相当于pop操作 router.back(); }) }.justifyContent(FlexAlign.Center) } .width("100%").height("100%") .alignItems(HorizontalAlign.Center) } } }
-
添加pageTransition动画跳转函数,并定义出第二个页面所有的四种页面转场样式。
参照第一个页面,我们添加一个
pageTransition函数
作为页面间动画跳转方法,响应用户点击,从而实现动画跳回到另一个页面。“Second.ets”文件的示例如下:// Second.ets import router from '@ohos.router'; @Entry @Component struct Second { build() { Row() { Column() { Image($r('app.media.forest')) .width('90%') .height('80%') .objectFit(ImageFit.Fill) .syncLoad(true) // 同步加载图片,使页面出现时图片已经加载完成 .margin(30) Row({ space: 10 }) { Button("pushUrl") .onClick(() => { // 路由到下一页面,push操作 router.pushUrl({ url: 'pages/Index' }); }) Button("back") .onClick(() => { // 返回到上一页面,相当于pop操作 router.back(); }) }.justifyContent(FlexAlign.Center) } .width("100%").height("100%") .alignItems(HorizontalAlign.Center) } } pageTransition() { // 定义页面进入时的效果,从右侧滑入,时长为1000ms,页面栈发生push操作时该效果才生效 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) .slide(SlideEffect.Right) // 定义页面进入时的效果,从左侧滑入,时长为1000ms,页面栈发生pop操作时该效果才生效 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) .slide(SlideEffect.Left) // 定义页面退出时的效果,向左侧滑出,时长为1000ms,页面栈发生push操作时该效果才生效 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) .slide(SlideEffect.Left) // 定义页面退出时的效果,向右侧滑出,时长为1000ms,页面栈发生pop操作时该效果才生效 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) .slide(SlideEffect.Right) } }
注意事项
假设页面栈为标准实例模式,即页面栈中允许存在重复的页面
。可能会有4种场景
,对应的页面转场效果如下表。
路由操作 | 页面A转场效果 | 页面B转场效果 |
---|---|---|
router.pushUrl,从页面A跳转到新增的页面B | 页面退出,PageTransitionExit生效,向左侧滑出屏幕 | 页面进入,PageTransitionEnter生效,从右侧滑入屏幕 |
router.back,从页面B返回到页面A | 页面进入,PageTransitionEnter生效,从左侧滑入屏幕 | 页面退出,PageTransitionExit生效,向右侧滑出屏幕 |
router.pushUrl,从页面B跳转到新增的页面A | 页面进入,PageTransitionEnter生效,从左侧滑入屏幕 | 页面退出,PageTransitionExit生效,向右侧滑出屏幕 |
router.back,从页面A返回到页面B | 页面退出,PageTransitionExit生效,向左侧滑出屏幕 | 页面进入,PageTransitionEnter生效,从右侧滑入屏幕 |
如果希望pushUrl进入的页面总是从右侧滑入,back时退出的页面总是从右侧滑出,则上表中的第3、4种情况不满足要求,那么要完整的定义4个页面转场效果。
参考文档
1、动画组件 · OpenHarmony
2、属性动画接口 · OpenHarmony
3、显性动画接口 · OpenHarmony
4、转场动画接口(页面间转场) · OpenHarmony