【经验分享】HarmonyOS 鸿蒙Next应用开发中的动画与转场

【经验分享】HarmonyOS 鸿蒙Next应用开发中的动画与转场

鸿蒙应用开发动画与转场

1.ArkUi中的动画方案

在鸿蒙应用开发中，使用ArkUi框体的动画能力可以让我们开发的App更具表现力。 本篇文章目的是想要帮助没有接触过Ui动画开发的小伙伴们，快速入门鸿蒙应用开发中的动画接口使用。

在ArkUi中为我们做Ui动画提供了如下方案:

1. 属性动画
2. 转场动画
3. 粒子动画
4. 组件动画（自带）

对于动画的表现，提供了一些配置方案：

1. 动画曲线
2. 动画衔接
3. 动画效果

官方文档阅读： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-animation-V5

2.动画的实现

2-1·属性动画

属性动画顾名思义，通过对组件属性的值的修改，从而让组件实现动画。 属性动画接口实现的两种方式：

1. animateTo 在闭包函数内实现属性值的修改。
2. animation ArkUi原生组件链式调用animation属性接口进行动画参数配置，实现属性值的修改。
3. [@AnimatableExtend](/user/AnimatableExtend)装饰器 该装饰器可以拓展ArkUi原生组件，让原本不支持动画的组件属性拓展为同样可以利用animateTo与animation去实现动画。

具体官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-attribute-animation-overview-V5

2-2·转场动画

转场动画是针对用户交互过程中，界面显隐过程中的动画表现。 转场动画的使用，可以让用户在交互反馈中，更直观的理解业务流程。

ArkUi中的转场动画提供了如下几种方案：

1. 出现/消失转场 在显隐组件的场景下，这里提到了一个专门的转场api：transition。 通过对该api的设置，当前组件在显隐的时机会触发对应动画设置。

2. 导航转场 当页面需要转换的时候，除了基础的页面跳转动画。我们还可以通过原生组件Navigation来实现页面路由能力，在Navigation中去设置我们需要的页面跳转动画。

3. 模态转场 模态转场特指模态框、弹窗等双层界面场景下，所触发的界面显隐动画效果。 具体实现可以通过，bindContentCover、bindSheet来绑定浮层模态界面的绑定。从而触发被绑定组件的显隐。

4. 共享元素转场 共享元素转场顾名思义，即为一个页面内有同一个或者类组件的复用、位移等变换操作时。可以通过geometryTransition设置唯一标识符，来实现转场动画。

5. 页面转场动画 文档说不推荐，但能用。具体看文档吧。

6. 旋转屏动画增强 旋转屏动画实现关键在于监听arkui全局接口display中的orientation字段。 该字段默认设置在module.json5的对应Ability中，用来表达当前Ability是否为横屏或者竖屏。 关于module.json5的详细配置：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/module-configuration-file-V5#abilities%E6%A0%87%E7%AD%BE

当我们拿到了横竖屏的标识数据，我们可以通过AppStorage来存储监听，来影响我们当前Ui组件的属性状态。 从而实现旋转屏动画。

关于转场动画各方案的详细文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-transition-overview-V5

2-3·粒子动画

粒子动画（Particle）实现对于应用开发者可能比较陌生，但是对于游戏开发者会非常熟悉。 在ArkUi中提供的Particle粒子动画接口，很多默认配置参数与游戏引擎常用的粒子特效比较类似。 如果对粒子特效感兴趣的小伙伴，可以结合cocos、unity等游戏引擎来熟悉粒子特效的制作。 然后通过ArkUi的Particle接口来复现一个酷炫的粒子效果。

2-4·组件动画

文档中提到的组件动画，是说ArkUi原生组件有一些特定组件提供了默认的动画。我们只要使用默认组件，就可以有默认的动画展现。 我们可以通过这些组件的详细配置与使用，可以定制修改默认动画。 比如，button的点击动画，scroll的滑动动画。 搭配上述的各种动画实现方案，我们可以在ArkUi框架下开发丰富的鸿蒙应用动画效果。

3.动画的高阶效果

3-1·动画曲线

一段动画之所以称之为动画，是因为在一段时间内，一段数据的值在发生改变。 所以重要的有两个点：

1. 时间
2. 数据

动画曲线指的是，在这段时间内，数据变化的速度曲线。 在ArkUi提供的动画曲线配置中使用传统曲线与弹簧曲线

传统曲线指的是一些固定的算法，来结合插值计算来修改数值的变化曲线（缓动效果）。既然是常用的方案算法，也会有固定的参数常量。 如：Linear、Ease、EaseIn、EaseOut等等。 更多缓动曲线参考资料： https://easings.net/

弹簧曲线指的是缓动曲线中的阻尼效果，具体使用参考官方文档即可。

3-2·动画衔接

动画衔接是说通过上述动画接口实现的属性动画等效果时，框架会自动衔接动画尚未播放完毕的过渡。

当我们开发触控事件时，也同样可以利用动画衔接的特性去处理图形对象跟手运动的问题。

3-3·动画模糊

ui组件提供了blur（模糊），shadow（阴影），gradient（渐变）等不同的图像后效的现成接口。

我们同样可以通过动画接口去修改这些后效api的参数，来处理组件的特效表现。

4·总结

本篇文章旨在帮助对动画接口不熟悉的同学准备的文档导读。 具体动画开发还需要真正去代码实现效果， 关于动画的实现ArkUi框架提供的接口能力已经非常丰富，但是依然还有一些常规项目需要svg canvas等一些常见技术去实现。 关于这类型需求，我个人经验在鸿蒙这里还有一个库大家可以利用。 '[@ohos](/user/ohos).animator'; https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-animator-V5#onframe12

在这个库中我们可以控制一段动画的播放，暂停，帧回调。 这样开发svg canvas项目会更自由一点。

关于更多ArkUi的问题，大家在活动贴提问吧。 https://developer.huawei.com/consumer/cn/forum/topic/0210155918261294183?fid=23