1. 属性动画
animation放在其他属性的后面才有过渡效果
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括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 | ICurve9+ | 否 | 设置动画曲线。 默认值：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时，动画效果无限循环不会停止，所以不会触发此回调。 |
示例
@Entry
@Component
struct Index {@State widthSize: number = 100@State heightSize: number = 100@State bgColor: Color = Color.Redbuild() {Column({ space: 15 }) {Row().width(this.widthSize).height(this.heightSize).backgroundColor(this.bgColor).animation({// 动画时长duration: 1000,// 执行次数iterations: 3,// 动画曲线curve: Curve.Ease,// 延时时间delay: 1000,// 播放模式playMode: PlayMode.Normal})Button("实现动画").onClick(() => {this.widthSize = 200this.heightSize = 200this.bgColor = Color.Yellow})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}2. 显式动画
提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
接口：
animateTo(value: AnimateParam, event: () => void): void
AnimateParam参数：
| 名称 | 类型 | 描述 |
|---|---|---|
| duration | number | 动画持续时间，单位为毫秒。 默认值：1000 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： - 在ArkTS卡片上最大动画持续时间为1000毫秒，若超出则固定为1000毫秒。 - 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
| tempo | number | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。 默认值：1.0 |
| curve | Curve | ICurve | string | 动画曲线。 默认值：Curve.EaseInOut 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| delay | number | 单位为ms(毫秒)，默认不延时播放。 默认值：0 说明： - 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
| iterations | number | 默认播放一次，设置为-1时表示无限次播放。 默认值：1 |
| playMode | PlayMode | 设置动画播放模式，默认播放完成后重头开始播放。 默认值：PlayMode.Normal 从API version 9开始，该接口支持在ArkTS卡片中使用。 相关使用约束请参考PlayMode说明。 |
| onFinish | () => void | 动效播放完成回调。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
示例
@Entry
@Component
struct Index {@State widthSize: number = 100@State heightSize: number = 100@State bgColor: Color = Color.Redbuild() {Column({ space: 15 }) {Row().width(this.widthSize).height(this.heightSize).backgroundColor(this.bgColor)Button("实现动画").onClick(() => {animateTo({// 动画时长duration: 1000,// 执行次数iterations: 3,// 动画曲线curve: Curve.Ease,// 延时时间delay: 1000,// 播放模式// 动画执行完成后，不回到起点,从终点再次执行playMode: PlayMode.Alternate}, () => {this.widthSize = 200this.heightSize = 200this.bgColor = Color.Yellow})})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}3. 路径动画
设置组件进行位移动画时的运动路径。
属性
| 名称 | 参数 | 描述 |
|---|---|---|
| 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：是否跟随路径进行旋转。 |
示例
@Entry
@Component
struct Index {@State flag: boolean = truebuild() {Column() {Row().height(100).width(100).backgroundColor(Color.Red)// 移动坐标 一般是页面的2倍 L0 400 （0，200）.motionPath({path: 'Mstart.x start.y L0 400 L400 400 Lend.x end.y',from: 0.0,to: 1.0,rotatable: false}).onClick(() => {animateTo({ duration: 3000 }, () => {this.flag = !this.flag})})}.width("100%").height("100%").alignItems(this.flag ? HorizontalAlign.Start : HorizontalAlign.End)}
}4. 组件内转场动画
组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，需要配合animateTo才能生效。
属性：
| 名称 | 参数类型 | 参数描述 |
|---|---|---|
| transition | TransitionOptions | 设置组件插入显示和删除隐藏的过渡效果。 默认值：不设置任何过渡效果时，默认有透明度从0到1的过渡效果。若设置了其他过渡效果，以设置的过渡效果为准。 说明： 所有参数均为可选参数，详细描述见TransitionOptions参数说明。 |
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）时，默认的是组件的左上角。 |
示例
组件转场动画
@Entry
@Component
struct Index {@State title: string = "显示"@State flag: boolean = falsebuild() {Column() {Button(this.title).onClick(() => {animateTo({ duration: 2000 }, () => {this.flag = !this.flagif (this.flag) {this.title = '隐藏'} else {this.title = '显示'}})})if (this.flag) {Row().width(200).height(200).backgroundColor(Color.Red).transition({type: TransitionType.Insert,translate: { x: 300, y: 300 }}).transition({type: TransitionType.Delete,scale: { x: 0, y: 0 }})}}.width("100%").height("100%").justifyContent(FlexAlign.Center)}
}列表过渡动画
@Entry
@Component
struct Index {@State list: number[] = [1, 2, 3, 4]build() {Stack({ alignContent: Alignment.BottomEnd }) {Column() {List({ space: 3 }) {ForEach(this.list, (item) => {ListItem() {Text(`${item}`).height(60).width("100%").backgroundColor(Color.Pink).textAlign(TextAlign.Center).fontSize(20)}.transition({type: TransitionType.All,translate: { x: 300 }}).onClick(() => {animateTo({ duration: 1000 }, () => {let delIndex = this.list.indexOf(item)this.list.splice(delIndex, 1)})})}, item => item)}}.width("100%").height("100%")Button("增加").margin({ right: 10, bottom: 10 }).onClick(() => {animateTo({ duration: 1000 }, () => {this.list.push(Date.now())})})}.width("100%").height("100%")}
}弹簧动画曲线
import curves from '@ohos.curves'@Entry
@Component
struct Index {@State translateX: number = 0build() {Column() {Row().height(200).width(200).backgroundColor(Color.Red).translate({x: this.translateX})Button("弹簧动画曲线").margin({ top: 20 }).onClick(() => {this.translateX = -10 //起始位置animateTo({duration: 1000,// 初始速度(velocity) 质量(mass) 刚度(stiffness) 阻尼（damping）curve: curves.springCurve(10, 1, 1, 1)}, () => {this.translateX = 0})})}.width("100%").height("100%")}
}小球飞入购物车
@Entry
@Component
struct Index {@State productList: string[] = ["第一个商品", "第二个商品", "第三个商品", "第四个商品"]@State ScreenPX: number = 0@State ScreenPY: number = 0@State BoxOpacity: number = 0@State flag: boolean = truebuild() {Stack({alignContent: this.flag ? Alignment.TopEnd : Alignment.BottomStart}) {Column() {List({space: 20}) {ForEach(this.productList, (item) => {ListItem() {Row() {Text(item)Button() {Text("+").fontSize(18).fontColor(Color.White)}.width(30).height(30).onClick((e) => {this.ScreenPX = e.screenX - 15this.ScreenPY = e.screenY - 15this.BoxOpacity = 1;animateTo({duration: 500,onFinish: () => {this.flag = truethis.BoxOpacity = 0;}}, () => {this.flag = false;})})}.width('100%').justifyContent(FlexAlign.SpaceBetween)}})}.padding(20).divider({strokeWidth: 1,color: "#eee"})}.width('100%').height('100%')Row() {}.backgroundColor(Color.Red).width(30).height(30).borderRadius(30).opacity(this.BoxOpacity).motionPath({path: `Mstart.x start.y L${this.ScreenPX * 2 - 30} ${this.ScreenPY * 2 + 30} Lend.x end.y`,from: 0.0,to: 1.0,rotatable: false}).margin({top: this.ScreenPY})}}
}5. 共享元素转场动画
当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。
5.1 修改 Index.ets
import router from '@ohos.router'@Entry
@Component
struct Index {build() {Row() {Column() {Image("https://img1.baidu.com/it/u=4070670852,624601372&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500").width('100%').aspectRatio(1).sharedTransition('chocolate', {duration: 500,type: SharedTransitionEffectType.Exchange //默认 放大缩小})Text('德国进口薇莉Vivani排块烘焙黑巧克力75%99%100%纯可可脂网红零食').sharedTransition('text', {duration: 1000,type: SharedTransitionEffectType.Static //淡入淡出})}.padding(15).width('50%').onClick(() => {router.pushUrl({url: 'pages/DetailPage'})})}.width('100%')}
}5.2 修改 DetailPage.ets
import router from '@ohos.router'@Entry
@Component
struct DetailPage {build() {Column() {Column() {Image("https://img1.baidu.com/it/u=4070670852,624601372&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500").width('100%').aspectRatio(1).sharedTransition('chocolate', {duration: 500,type: SharedTransitionEffectType.Exchange //默认})Text('德国进口薇莉Vivani排块烘焙黑巧克力75%99%100%纯可可脂网红零食').fontSize(30).sharedTransition('text', {duration: 1000,type: SharedTransitionEffectType.Static //淡入淡出})}.padding(15).onClick(() => {router.back()})}.height('100%').width('100%')}
}6. 页面间转场动画
在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。
pageTransition
进入此页面或移动到其他页面时实现动画。
pageTransition?(): void
PageTransitionEnter
设置当前页面的自定义入场动效。
PageTransitionEnter(value: PageTransitionOptions)
PageTransitionExit
设置当前页面的自定义退出动效。
PageTransitionExit(value: PageTransitionOptions)
PageTransitionOptions参数：
| 名称 | 类型 | 必填 | 描述 |
|---|---|---|---|
| type | RouteType | 否 | 页面转场效果生效的路由类型。 默认值：RouteType.None。 |
| duration | number | 否 | 动画的时长。 单位：毫秒 默认值：1000 |
| curve | Curve | string | 否 | 动画曲线。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 | number | 否 | 动画延迟时长。 单位：毫秒 默认值：0 说明： 没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。 |
属性
| 参数名称 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| 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 |
事件
| 事件 | 功能描述 |
|---|---|
| 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。 |
示例
入场动画为淡入，退场动画为缩小
Index.ets
import router from '@ohos.router'@Entry
@Component
struct Index {@State scale1: number = 1@State opacity1: number = 1build() {Column() {Text("首页")Button("去其他页面").onClick(() => {router.pushUrl({url: "pages/OtherPage"})})}.width('100%').height('100%').scale({ x: this.scale1 }).opacity(this.opacity1)}// 自定义方式1：完全自定义转场过程的效果pageTransition() {PageTransitionEnter({ duration: 1200, curve: Curve.Linear }).onEnter((type: RouteType, progress: number) => {this.scale1 = 1this.opacity1 = progress}) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)PageTransitionExit({ duration: 1500, curve: Curve.Ease }).onExit((type: RouteType, progress: number) => {this.scale1 = 1 - progressthis.opacity1 = 1}) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)}
}OtherPage.ets
import router from '@ohos.router'@Entry
@Component
struct OtherPage {@State scale2: number = 1@State opacity2: number = 1build() {Column() {Text("其他页面")Button("去首页页面").onClick(() => {router.pushUrl({url: "pages/Index"})})}.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 = 1this.opacity2 = progress}) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)PageTransitionExit({ duration: 1500, curve: Curve.Ease }).onExit((type: RouteType, progress: number) => {this.scale2 = 1 - progressthis.opacity2 = 1}) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)}
}入场动画为从左侧滑入，退场为缩小加透明度变化
Index.ets
import router from '@ohos.router'@Entry
@Component
struct Index {@State scale1: number = 1@State opacity1: number = 1build() {Column() {Text("首页")Button("去其他页面").onClick(() => {router.pushUrl({url: "pages/OtherPage"})})}.width('100%').height('100%').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)}
}OtherPage.ets
import router from '@ohos.router'@Entry
@Component
struct OtherPage {@State scale2: number = 1@State opacity2: number = 1build() {Column() {Text("其他页面")Button("去首页页面").onClick(() => {router.pushUrl({url: "pages/Index"})})}.width('100%').height('100%').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)}
}
)
