HarmonyOS 鸿蒙Next上实现那些有趣的动画-基础篇

HarmonyOS 鸿蒙Next上实现那些有趣的动画-基础篇 一、动画在APP中的使用场景

动画在APP中的使用场景非常广泛，主要用于提升用户体验、引导用户操作以及增加界面的趣味性和互动性。使用场景很多：

  • 加载动画：当应用需要加载数据或执行耗时操作时，显示一个加载动画可以告诉用户系统正在处理请求，并非卡死状态，从而减少用户的焦虑感。
  • 转场动画：在页面切换时使用过渡动画可以使转换更加平滑自然，帮助用户理解页面之间的层次关系和导航流程，增强用户的沉浸感。
  • 反馈动画：当用户进行交互操作（如点击按钮、提交表单等）后，通过动画形式提供即时反馈，让用户知道操作已被接受，比如按钮变色、图标跳动等。
  • 引导动画：用于新手引导或者突出新功能特性，通过动画引导用户关注特定区域或元素，帮助他们快速上手使用应用。

相关系列文章:

二、动画的原理

动画是由一系列被称为“帧”的静态图片组成的，每一帧代表了动作的一个瞬间。通常情况下，为了让人眼感觉到流畅的动画效果，帧率需要达到至少24FPS，而在一些高性能的应用中，如视频游戏或高端动画制作中，可能会使用60FPS甚至更高的帧率。

三、动画的要素

  1. 时长

动画的时长是指动画从开始到结束所需的时间长度。这个参数对于控制动画的速度至关重要。用于定义动画完成一个周期所需的具体时间，可以用秒（s）或毫秒（ms）指定

  1. 状态变化

状态变化指的是动画过程中对象属性的变化情况。这包括但不限于位置、大小、颜色、透明度等的变化。可以通过设定不同的属性值来实现状态的变化

  1. 动画曲线

动画曲线是用来描述状态变化的速度随时间变化的方式。它可以用来调整动画的加速度和减速度，使得动画看起来更加自然流畅。例如线性、弹性等

常用动画曲线

我们根据下图进行理解，改变元素的不同状态，可以实现不同的动画；改变动画的时长，可以控制动画周期；改变动画曲线，可以得到不同的动画模式

四、Harmony Next中的动画

ArkUI提供两种属性动画接口animateTo和animation驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。

增加Slider组件和Button组件方便控制动画的播放：

封装了一个animationDemoItem组件，用于实现不同的动画曲线展示，例如实现ease动画

鸿蒙提供了传统曲线和弹簧曲线两种形式，开发者可以根据情况选择使用：

  1. 传统曲线基于数学公式，创造形状符合开发者预期的动画曲线。以三阶贝塞尔曲线为代表，通过调整曲线控制点，可以改变曲线形状，从而带来缓入、缓出等动画效果。详见文档：传统曲线-动画曲线-使用动画-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

包含： Linear、 Ease、EaseIn、 EaseOut、EaseInOut、FastOutSlowIn等

  1. 阻尼弹簧曲线（以下简称弹簧曲线）对应的阻尼弹簧系统中，偏离平衡位置的物体一方面受到弹簧形变产生的反向作用力，被迫发生振动。详见文档：弹簧曲线-动画曲线-使用动画-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

包含：springMotion、responsive、interpolating、springCurve

接下来我们使用属性动画，实现App开发中常见的一些动画形式。

相关系列文章:


更多关于HarmonyOS 鸿蒙Next上实现那些有趣的动画-基础篇的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

更多动画类型实现，可以看系列文章

更多关于HarmonyOS 鸿蒙Next上实现那些有趣的动画-基础篇的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next上实现动画效果，主要依赖于ArkUI框架中的动画组件和API。ArkUI提供了多种动画类型，包括属性动画、过渡动画、路径动画等，开发者可以通过这些工具实现丰富的交互效果。

  1. 属性动画：通过改变组件的属性值（如位置、大小、透明度等）来实现动画效果。例如，使用animateTo方法可以平滑地改变组件的位置。

  2. 过渡动画：在组件状态变化时自动触发，如显示/隐藏、启用/禁用等。通过Transition组件可以定义这些状态变化时的动画效果。

  3. 路径动画：让组件沿着指定的路径移动。使用PathAnimation组件可以实现复杂的运动轨迹。

  4. 自定义动画：通过AnimationController和Animation类，开发者可以自定义动画的持续时间、缓动函数等，实现更精细的控制。

以下是一个简单的属性动画示例，实现了一个按钮在点击时从左侧移动到右侧的动画效果：

import { animateTo } from '@ohos.animator';

@Entry
@Component
struct Index {
  @State left: number = 0;

  build() {
    Column() {
      Button('Move Me')
        .position({ x: this.left, y: 100 })
        .onClick(() => {
          animateTo({ duration: 1000, curve: 'easeInOut' }, () => {
            this.left = 200;
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

通过以上方法，开发者可以在HarmonyOS鸿蒙Next上实现各种有趣的动画效果，提升用户体验。

回到顶部