【OpenHarmony动画】如何使用动画

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(