一、合理使用动画
合理使用动画可以通过以下两个方面考虑：
- 提升动画感知流畅度：使用合适的动画能力将UX设计视角转换为开发实现视角，并将设计师提供的动效转化为具体的代码实现。这样可以确保应用在实际使用中达到设计的预期效果，提升动画感知流畅度并提供良好的用户体验。
- 提升动画运行流畅度：优化动画资源的加载和释放，避免内存泄漏和资源浪费；合理使用动画缓存和复用，减少不必要的重复绘制，提高动画的运行效率。
在使用动画时，需要根据具体场景和用户需求进行合理的设计和运用，并且需要注意动画的性能影响，及时采取相应的优化措施。通过合理使用动画，可以提升动画的感知流畅度和运行流畅度，从而提升应用程序的用户体验和性能。
二、动画的分类
2.1特征动效
特征动效是指在用户界面中突出某个特定元素的动画效果。通过特征动效，可以吸引用户的注意力，提升用户体验。它可以广泛应用于开场动画、加载动画、下载动画等场景。例如，在一个应用程序中，当用户点击”下载”按钮时，渐变显示出进度条并动态加载(如下图所示)。
点击特征动效示意图：
2.2转场动效
转场动效是指在不同页面或视图之间切换时使用的动画效果。通过转场动效，可以平滑地过渡到下一个页面或视图，增加界面间的连贯性和流畅性。
转场动效示意：
2.3手势动效
手势动效是指根据用户的手势操作而产生的动画效果。
- 点击：点击的接触过程中有一段100ms~300ms的时长是无反馈状态，为了提升感知体验，可以在按下那一刻即响应动效反馈。这一可先行的触控响应机制强化了界面元素的视觉反馈，为理解界面状态提供了更多的线索信息。
- 滑动：滑动手势是用户进行滑动操作时产生的相应动画效果，例如随手指移动的平滑过渡动画，增强了界面的流畅性。保证对象动效反馈的结果与手势动作的连贯性是滑动手势动效设计的关键。
- 翻动：翻动手势动效通常用于模拟翻书或翻页的效果，用户可以通过拖拽或抛滑手势来翻转页面或切换内容，界面元素会产生相应的翻页动画，提供更真实的交互体验。翻页有成功与否，未成功会停留在当前内容上；成功则显示下一页/几页的内容。为了提示性，翻页也有过界拖拽的场景。
- 夹捏：捏合手势是指双/多指合拢或分开的动作，常用于缩放或旋转对象。手势过程中需要令对象跟随手势做出相应的响应趋势。
- 拖拽：拖拽手势是指手指按下同时进行移动的动作，动效设计了对象通过拖拽行为进行状态转换的整个过程，以确保用户操作的连贯性和流畅性。
手势动效示意：
2.4微动效
微动效是指在界面中细微的动画效果，用于增加界面的生动感和交互性。微动效可以体现在按钮的点击效果、图标的变化、文本的出现等。例如，当用户打开某个面板时，可以使用微小的缩放或颜色变化来体现（如图所示）。
图5 微动效示意
2.5插画动效
插画动效是指在界面中应用的基于插画的动画效果。通过插画动效，可以为界面增添趣味和个性化。通过动画的方式丰富视觉元素所要表达的信息，可以引导解读功能信息并串联前后画面，便于用户理解，也使画面表现更富有生命力。
插画动效示意：
三、动画实现选型
开发人员接收到设计需求后，需要选择合适的动画能力完成该设计。 在HarmonyOS中，我们可以通过不同的方式实现动画效果。
3.1系统能力
- 属性动画：通过更改组件的属性值实现渐变过渡效果，例如缩放、旋转、平移等。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
- 显式动画：可以通过用户的直接操作或应用程序的特定逻辑来触发，例如按钮点击时的缩放动画、列表项展开时的渐变动画等。HarmonyOS提供了全局animateTo显式动画接口来指定由于闭包代码导致状态变化的插入过渡动效。
- 转场动画：转场动画可以实现平滑的界面切换效果，例如页面之间的淡入淡出、滑动切换、旋转切换等，增强了界面的连贯性和吸引力。具体使用方法可参考《合理使用页面间转场》。
- 路径动画：指对象沿着指定路径进行移动的动画效果。通过设置路径可以实现视图沿着预定义的路径进行移动，例如曲线运动、圆周运动等，为用户呈现更加生动的交互效果。
- 粒子动画：通过大量小颗粒的运动来形成整体动画效果。通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感。
3.2资源调用
- GIF动画：GIF动画可以在特定位置循环播放，为应用界面增添生动的视觉效果。在开发中，可以使用Image组件来实现GIF动画的播放。通过在特定位置放置Image组件，并加载GIF格式的图像，开发者可以轻松实现动画效果，具体实现可以参考后文”加载GIF实现微动效”。
- 帧动画：通过逐帧播放一系列图片来实现动画效果，在开发中可以使用ImageAnimator组件来实现帧动画的播放。开发者可以配置需要播放的图片列表，以及每张图片的播放时长，从而实现精细的动画效果。
3.3第三方库
- Lottie：解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。Lottie动画可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性。
- SVG：通过将SVG图片解析并渲染到页面上并对SVG图片样式动态改变实现动画。OHOS-SVG不仅能够提供高质量的图形呈现，而且还能够实现图形样式的实时更新，为用户带来更加丰富的视觉体验。
四、各动画能力特点
| 动画能力 | 特点 |
|---|---|
| 系统能力 | 可以直接调用，性能优秀，但太复杂的动画不便于实现 |
| GIF | 可设计、直接调用组件实现，但文件占用空间大，掉帧严重、会出现失真、模糊、锯齿等现象 |
| 帧动画 | 兼容性高、直接调用组件实现，但需要大量图片，占据大量内存 |
| Lottie | 跨平台、可设计，但性能难以提升、帧率较低 |
| SVG | 可代码编辑，文件较小、无损伸缩，但实现、维护成本高，并且复杂度高会减慢渲染速度 |
