HarmonyOS：合理使用动画（1）

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）
➤GitHub地址：https://github.com/strengthen
➤原文地址：https://www.cnblogs.com/strengthen/p/18498909
➤如果链接不是为敢技术的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ 

一、概述

HarmonyOS系统为开发者提供了丰富的动画能力，在实际开发过程中，我们需要把UX设计视角转换为开发实现视角，即使用HarmonyOS系统提供的动画能力来实现设计的场景和动效。

二、动效场景设计

基于视觉效果设计，可以将动效划分为五类：

1、特征动效：是指在用户界面中突出某个特定元素的动画效果。通过特征动效，可以吸引用户的注意力，提升用户体验。例如，在一个应用程序中，当用户点击”下载”按钮时，渐变显示出进度条并动态加载。

2、转场动效：是指在不同页面或视图之间切换时使用的动画效果。通过转场动效，可以平滑地过渡到下一个页面或视图，增加界面间的连贯性和流畅性。

3、手势动效：手势动效是指根据用户的手势操作而产生的动画效果。通过手势动效，可以增强用户与设备之间的互动体验。手势包括：点击、滑动、翻动、夹捏和拖拽。

4、微动效：是指在界面中细微的动画效果，用于增加界面的生动感和交互性。微动效可以体现在按钮的点击效果、图标的变化、文本的出现等。例如，当用户打开某个面板时，可以使用微小的缩放或颜色变化来体现。

5、特征动效，也叫插画动效：是指在界面中基于插画的动画效果。通过插画动效，可以为界面增添趣味和个性化。例如使用插画动效来表示场景的变化。

三、动画能力选型

HarmonyOS为开发者提供了三类动画能力：（1）、系统能力。（2）、资源调用。（3）、三方库。

1、系统能力。即系统已经封装好的动画能力。这类动画可以直接调用，性能优秀，但太复杂的动画不便于实现，关于系统能力更详细的内容可以参看指南和API文档。系统能力动画包括：

（1）、属性动画：通过更改组件的属性值实现渐变过渡效果，例如缩放、旋转、平移等。

（2）、显式动画：可以通过用户的直接操作或应用程序的特定逻辑来触发，例如按钮点击时的缩放动画、列表项展开时的渐变动画等。

（3）、转场动画：转场动画可以实现平滑的界面切换效果，例如页面之间的淡入淡出、滑动切换、旋转切换等，增强了界面的连贯性和吸引力。

（4）、路径动画：指对象沿着指定路径进行移动的动画效果。通过设置路径可以实现视图沿着预定义的路径进行移动，例如曲线运动、圆周运动等，为用户呈现更加生动的交互效果。

（5）、粒子动画：通过大量小颗粒的运动来形成整体动画效果。通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感。

2、资源调用。HarmonyOS提供了两个组件：其一是Image组件，通过在特定位置放置Image组件并加载GIF格式的图像，开发者可以轻松实现动画效果。其二是ImageAnimator组件，开发者可以配置需要播放的图片列表，以及每张图片的播放时长，从而实现精细的动画效果。

（1）、GIF动画：

GIF动画可以在特定位置循环播放，为应用界面增添生动的视觉效果。在开发中，可以通过在特定位置放置Image组件，并加载GIF格式的图像，开发者可以轻松实现动画效果。

（2）、帧动画：

通过逐帧播放一系列图片来实现动画效果，在开发中可以使用ImageAnimator组件来实现帧动画的播放。开发者可以配置需要播放的图片列表，以及每张图片的播放时长，从而实现精细的动画效果。

3、三方库。调用强大的三方库实现动画。

（1）、Lottie：解析Adobe After Effects软件通过Bodymovin插件导出的jison格式的动画，并在移动设备上进行本地渲染。Lottie动画可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性。

（2）、SVG：通过将SVG图片解析并渲染到页面上并对SVG图片样式动态改变实现动画。OHOS-SVG不仅能够提供高质量的图形呈现，而且还能够实现图形样式的实时更新。

4、每一种动画方式都有自己的特点，开发者需要在设计和实现过程中，综合考虑动画的使用场景、频率以及对系统资源的影响，扬长避短。

四、动画开发实现

1、一般而言，需要通过五个步骤来完成视角转换。

（1）、了解系统能力：首先开发者需要深入了解HarmonyOS系统提供的动画能力，这包括了解动画以及如何在HarmonyOS应用中使用相关API。

（2）、分析UX设计视角：仔细分析UX设计所提供的动效，理解设计师的意图。

（3）、设计动画方案：基于分析的结果设计出合理的动画方案，确定动画的触发时机、动画的类型和参数等。

（4）、使用动画能力：利用HarmonyOS提供的动画能力，如：属性动画、转场动画等，或者调用第三方库完成设计效果。

（5）、调试和优化：在实施转场和动效等过程中，进行调试和优化，确保动画效果的流畅，动效符合预期且满足性能要求。

2、视角转换过程：

案例一：使用属性动画实现微动效。在本场景中，随着用户滑动顶端图标和文字需要随着主体内容变更而切换。随着用户滑动顶端图标和文字，需要随着主体内容变更而切换。最终实现效果如下图。根据设计特点，只需要变更细微的文字内容，可以选择系统能力中的属性动画实现。

属性动画是通过animation属性实现的，在对应需要变化的组件下增加animation属性实现的，在对应需要变化的组件下增加animation组件，例如：将animation属性中的动画时长duration设置为500毫秒，动画以低速结束。

具体实现：

（1）、第一步，设置需要变化的组件，确定需要进行形状变化的组件或元素。这里将图标和两行文字放置在一个column中进行属性设置。

（2）、第二步，设置需要变化的内容，确定需要替换的具体内容。在对应的资源文件中填入变化取值。

（3）、第三步，设置animation内的动画属性，使用动画属性来实现形状变化。这里设置变化方式为easeout，动画持续时间为500ms。

案例二：资源加载案例，加载GIF实现微动效。在本场景中，需要实现小魔法棒反复播放的微动效，选择用Image组件渲染GIF格式的资源实现。

具体实现：

（1）、第一步，将小魔法棒的动画制作成GIF格式的图片。并将其作为资源加载到应用程序中。

（2）、第二步，接下来，在需要放置动画的地方使用image组件渲染小魔法棒的图片，再配置对应的图片属性。也可以根据需要配置事件。

案例三：加载lottie库实现特征动效。在本场景中，需要点击徽章后将其放大并播放烟花动效。可以让设计师进行动效设计，直接导出json格式的文件进行调用和播放。

具体实现：

（1）、第一步，在本场景下，先将Lottie动画与画布绑定，同时还需要将画布同全模态转场绑定。

 （2）、第二步，点击徽章图标后实现全模态跳转并显示画布和lottie动画。

具体实现流程：

（1）、创建context对象构建渲染上下文。

（2）、同时需要将canvas画布组件和上下文对象context绑定，一般而言需要在画布构建的onready事件中加载Lottie动画，开发者也可以根据实际需求，将Lottie加载在需要的位置。

（3）、最后可以配置Lottie播放的相关设置，在本案例中，只需要在点击小图标后进行一次播放即可。